Tutorial membuat Recent Post Dengan Gambar Thumbnail Bergerak

Salam blogger untuk para sahabat waroeng mukhtasor dari mana saja!
Dalam tutorial atau postingan (terserah dah) kali ini blog waroeng mukhtasor akan share kepada teman-teman tentang Recent Post Dengan Gambar Thumbnail Bergerak,
untuk contoh widgetnya seperti gambar berikut:

O iya sekali lagi gambar thumbnailnya bergerak ke bawah ya bukan ke atas, hehehe...
Oke dah lansung aja ya sob, keburu pusing ni kepala!

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget(di bagian mana saja sobat ingin widget ini muncul)

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode di bawah ini dan letakkan di dalamnya.

<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:500px;
}
#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:#ffffff; /* warna background */
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000000;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{color:#cc0000; text-decoration:underline}
#spylist li img {
float:left;
margin-right:5px;
background:#ffffff;
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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmKiokxcGfkrdIW2yDdICZYSAqC2mEXWTT3Bjkpo_6hcR-d-FurTe73Y5Y1EnX2-uo29eE8QR8Vb3Z1zNd_u_MRJ62J9uEWw8S9pxm8fuEj9nVVFTtyqoc4EJQJ8XxsZ68AA9oZU0e60/s1600/O.W.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmKiokxcGfkrdIW2yDdICZYSAqC2mEXWTT3Bjkpo_6hcR-d-FurTe73Y5Y1EnX2-uo29eE8QR8Vb3Z1zNd_u_MRJ62J9uEWw8S9pxm8fuEj9nVVFTtyqoc4EJQJ8XxsZ68AA9oZU0e60/s1600/O.W.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmKiokxcGfkrdIW2yDdICZYSAqC2mEXWTT3Bjkpo_6hcR-d-FurTe73Y5Y1EnX2-uo29eE8QR8Vb3Z1zNd_u_MRJ62J9uEWw8S9pxm8fuEj9nVVFTtyqoc4EJQJ8XxsZ68AA9oZU0e60/s1600/O.W.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmKiokxcGfkrdIW2yDdICZYSAqC2mEXWTT3Bjkpo_6hcR-d-FurTe73Y5Y1EnX2-uo29eE8QR8Vb3Z1zNd_u_MRJ62J9uEWw8S9pxm8fuEj9nVVFTtyqoc4EJQJ8XxsZ68AA9oZU0e60/s1600/O.W.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmKiokxcGfkrdIW2yDdICZYSAqC2mEXWTT3Bjkpo_6hcR-d-FurTe73Y5Y1EnX2-uo29eE8QR8Vb3Z1zNd_u_MRJ62J9uEWw8S9pxm8fuEj9nVVFTtyqoc4EJQJ8XxsZ68AA9oZU0e60/s1600/O.W.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.waroengmukhtasor.blogspot.com/";
limitspy=6
intervalspy=4000
</script>
<div id="spylist">
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

5. Simpan.

Keterangan:

• Jika di templatemu sudah terpasang jQuery 1.3.2 maka kamu tidak perlu memasang jQuery 1.3.2 di atas atau tinggal di hapus saja.
• numposts = 20 angka 20 adalah jumlah postingan terbaru yang akan di munculkan di widget ini,
• ganti url http://www.waroengmukhtasor.blogspot.com/ dengan url blog sobat.
• kode di atas masih ada yang bisa sobat ganti seperti border, heigh, weight.

Jika anda menggunaka widget ini jangan lupa komentnya, jangan berkomentar cuma bila ada kesulitan saja. 

Saya rasa cukup, silahkan tinggalkan tanggapan atau keterangan sobat tentang postingan di atas!

sumber : http://otowebsite.blogspot.com/2012/05/widget-recent-post-dengan-gambar.html