Pasang Slide Recent Post Dengan Image Thumbnail Di Blogger

Mumpung Blog ini masih baru dan butuh banyak perbaikan dari segi  konten maupun template, saya sedang mencoba memasang recent posting dengan thumbnail dan bisa slide akhirnya nemu juga dan langsung saya pasang di blog ini. lumayan lah buat ngisi konten, walaupun dapet copas, etth... tapi cuma codenya aja. kalo bikin sendiri so pasti saya ga bakal bisa. wong namanya masih newbie.....!!

Langsung saja ke topik, buat pasang recent post slide dengan thumbnail caranya sangat gamapang, nah yang pertama pasti harus login ke blogger dulu terus > Design dan > Page Element, nah langsung saja add widget yaitu HTML/Javascript. Copy code dibawah ini :

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

#vilatlist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:250px;
}
#vilatlist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#vilatlist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#vilatlist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 7px; /*title margin */
padding:0px 0px 2px 0px;
}
#vilatlist li img {
float:left;
margin-top:7px;
margin-left:5px;
margin-right:7px;
background:#EFEFEF;
border:0;
}
.vilatdate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 15px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Georgia, verdana, sans-serif, arial;
}

.vilatcomment{
overflow:hidden;
font-family:Georgia, verdana, sans-serif, arial;
font-size:10px;
color:#262B2F;
padding:0px 15px;
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 = 300;

cellspacing = 10;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 50;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "alamatanda.blogspot.com";

limitvilat=4
intervalvilat=4000

</script>

<div id="vilatlist">
 <script src="http://sites.google.com/site/vilats/recentThumbSlider.js" type="text/javascript"></script>
</div>

Nah buat modifikasinya liat keterangan dibawah ini :

• thumbheight = 50; tinggi gambar
• thumbwidth = 70; lebar gambar
• boxwidth = 350; lebar recent post
• height:250px; tinggi daftar recent post
• numposts = 10; jumlah posting yang dislide
• home_page = "alamatanda.blogspot.com"; ganti dengan alamat blog anda
• intervalspy=4000 kecepatan slide(semakin besar nilainya, kecepatannya semakin lambat).

Semoga Membantudan ditunggu partisipasi dan komentarnya

Sumber Kode : http://vilat.blogspot.com/2010/01/sliding-recent-post-dengan-thumbnail.html