Membuat Recent Post Bergerak di SideBar Blog

Widget Recent Pos atau postingan sebelumnya sebenarnya sudah ada pada bawaan blog dengan dasbor terbaru.Cuman tampilannya sebatas Link dengan posisi ke bawah tanpa adanya animasi sehingga terlihat kurang menarik.kali ini saya akan memberikan Tutor untuk membuat recent post menjadi bergerak slide ke bawah.Sebenarnya sudah banyak Blog-blog yang membahas tutor seperti ini. Namun tidak ada salahnya kan kalau saya coba untuk membahasnya juga,barangkali ada blogger newbi (seperti saya) yang membutuhhkannya juga. hehehe...

langsung aja ke TKPdibawah ini :

1. Login ke blogger kemudian masuk ke dashbor anda.

2. Pilih Tata Letak kemudian Tambah Gadget.

3. Setelah itu pilih Html/Javascript.

4. Pada judul isi aja "Recent Pos" ( atau terserah anda )

5. Kemudian masukkan kode script dibawah ini:

<script src="http://hostfileprofessional.16mb.com/files/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:335px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://hostfileprofessional.16mb.com/images/rcpost.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://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[1] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[2] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[3] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
imgr[4] = "http://hostfileprofessional.16mb.com/images/notfound.gif";
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 = 20;
home_page = "http://www.dimarupdate.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://hostfileprofessional.16mb.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

6. Setelah itu "Save"

Tulisan warna merah diatas harus diganti dengan alamat blog kamu.Lihat hasilnya.....Gampang bukan...!! Selamat mencoba..

Share this post