Cara membuat recent post dengan gaya slide naik turun

Kode Iklan anda yang ingin ada di sebelah kiri disini

Kode Iklan anda yang ingin ada di sebelah kanan disini

Halo sobat blogger, Satu lagi cara untuk menampilkan recent post dengan gaya yang agak unik pada blog yang sobat kelola, yakni dengan membuatnya slide naik turun. Tertarik kan ? selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya,tentu saja resep-resep yang targetblogger berikan bertujuan untuk menghias dan mempercantik tampilan blog agar lebih cling sehingga banyak blog walker yang tertarik untuk melihatnya. sama halnya dengan artikel terkait atau related post,recent post juga bisa dengan tampilan thumbnail,nah kali ini targetblogger akan memberi tutorial tentang cara membuat recent post dengan gaya slide naik turun. So biar tidak berlama-lama, silahkan sobat ikuti petunjuk dokter di bawah ini.

1. Login ke akun Blogger sobat
2. Klik Rancangan >> Elemen haLaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode berikut 

<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">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
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;
}
#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;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
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 = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://targetbloger.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://targetbloger.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

6. Simpan

Note :

• Url yang berwarna merah ganti dengan Url sobat
• Angka yang berwarna biru jumlah post yang ingin di tampilkan

Nah demikian cara membuat recent post dengan gaya slide naik turun pada blog, semoga bermanfaat! Happy blogging…..