Cara Membuat Widget Recent Post Bergerak Naik Disertai Gambar

Pada postingan kali ini saya mau memberi trik untuk membuat Recent Post bergerak disertai gambar. Sudah tahu kan apa itu widget recent post? kalau belum tahu ini saya kasih tahu. Recent Post adalah Daftar dari postingan kita yang terbaru. Kegunaan recent post ini selain untuk menigkatkan SEO blog anda, Juga bisa untuk memperhias blog karena recent post ini bergerak naik seperti animasi. Untuk contohnya bisa anda lihat dibawah ini :

Oke langsung saja ikuti langkah-langkahnya dibawah ini :
1. Login dulu ke blogger.com
2. Masuk ke Design .
3. Pilih add gadget.
4. Pilih HTML/Javascript
5. Masukkan kode program berikut ini kedalam kolom html .

<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:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
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 = 300;
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://hugetuget.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript">
</script></div>
catatan:
kode numposts = 10; = yang berarti jumlah postingan yang akan tampil ,anda bisa mengantinya sesuai yang anda ingginkan.

kode home_page = "http://hugetuget.blogspot.com/";= kode berikut silahkan ganti alamat URL dengan alamat blog anda.

6. Simpan.

Untuk melihat hasilnya silahkan cek di blog anda sendiri, jika ada berarti anda berhasil membuat recent post berjalan.

Tweet

Related Post: