Membuat Recent Post Bergerak Kebawah

 

Pada postingan kali ini saya ingin berbagi ilmu buat sobat semua, tentang bagaimana cara membuat recent post yang bergerak kebawah. Sebagai contohnya sobat bisa lihat pada slidebar blog saya ini, jika sobat tertarik ini membuatanya, berikut langkah-langkah cara membuat/memasang recent post bergerak kebawah

 

• Login ke blogger
• Pilih tambah gadget dan lanjutkan dengan HTML/JavaScript, selanjutnya letakkan script dibawah ini.

<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:350px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:301px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJiwOMl9zgEnj-GF4aGw4XQT72-mKl-OZA2oTiNGGUvKGsz_QUmJNQpCejYKm6453RkxjMYOumDEyMC4fy9JjddpSy_ENtdR0spA_iY0ljHmTXMY60ANrAVGmAmSqSYEpzEj4W4UNTeZpb/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebGAzUEQFQ9M5bVvjGZ9H_YWznOS3ZZfXVV_jVE3c_QcWRKbBk-qLaHaGJbInQjhd0oTRhTjdkvESDO19DXAVAFVcjoet0-tVM6DxxdYrr7ftP3JgSNrUbOtjPBRcoJ6qYwJK6FvZefE/s400/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebGAzUEQFQ9M5bVvjGZ9H_YWznOS3ZZfXVV_jVE3c_QcWRKbBk-qLaHaGJbInQjhd0oTRhTjdkvESDO19DXAVAFVcjoet0-tVM6DxxdYrr7ftP3JgSNrUbOtjPBRcoJ6qYwJK6FvZefE/s400/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebGAzUEQFQ9M5bVvjGZ9H_YWznOS3ZZfXVV_jVE3c_QcWRKbBk-qLaHaGJbInQjhd0oTRhTjdkvESDO19DXAVAFVcjoet0-tVM6DxxdYrr7ftP3JgSNrUbOtjPBRcoJ6qYwJK6FvZefE/s400/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebGAzUEQFQ9M5bVvjGZ9H_YWznOS3ZZfXVV_jVE3c_QcWRKbBk-qLaHaGJbInQjhd0oTRhTjdkvESDO19DXAVAFVcjoet0-tVM6DxxdYrr7ftP3JgSNrUbOtjPBRcoJ6qYwJK6FvZefE/s400/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgebGAzUEQFQ9M5bVvjGZ9H_YWznOS3ZZfXVV_jVE3c_QcWRKbBk-qLaHaGJbInQjhd0oTRhTjdkvESDO19DXAVAFVcjoet0-tVM6DxxdYrr7ftP3JgSNrUbOtjPBRcoJ6qYwJK6FvZefE/s400/noimage.png";
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.pointblue.co.cc/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

•  Text warna biru ubah situs blog anda
• Jika sudah selesai selanjutnya pilih simpan.
• Jalankan untuk melihat hasilnya.

Sekian dan selamat mencoba.