Pages

Trik Membuat Animated Moving Recent Post Di Blog

Kali ini kita akan membuat dan menghiasi blog dengan widget Moving Recent Post, Widget ini akan memaparkan Posting yang dilengkapi Thumbnail gambar kecil serta tajuk dan juga komen daripada pembaca dan apa yang menarik adalah kerana ianya bergerak. Lihat Seperti di Blog saya ini atau gambar di bawah ini.

Caranya:

1: Dashboard
2: Design
3: Page Elements - Add a Gadget - Add HTML/Javascript
4: Kemudian Copykan semua kod - kod dibawah ini dan save.

Ini Kode/Scripnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:260px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:210px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background: url(-) repeat-x;
border:0px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 50;
home_page = "http://letsbesmart.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/pengerindu/pengerindu/animatedrecentpost.js' type='text/javascript'></script>
</div>
<small><a href="http://letsbesmart.blogspot.com/2011/03/trik-membuat-animated-moving-recent.html" target="_blank">get this widget here</a></small>

• Tukarkan URL yang berwarna Merah dengan Url blog anda sendiri.

Sumber: http://www.pengerindu.com
Jangan lupa komentar ya……..terimakasih.

3 komentar:

Abdullah mengatakan...

thx atas tricknya...

Raja Net mengatakan...

Sm2 sob thx kmbli

drs.h.handi mengatakan...

mas........ ini kan ke bawah... ada gak yang ke sampingnya.... makasih...

Posting Komentar

Jangan lupa komentarnya,Terimakasih atas komentar anda
(Do not forget to comment, Thank you for your comment)

Related Posts Plugin for WordPress, Blogger...

Followers