Salam untuk rakan-rakan semua. Ini adalah cara membuat recent post animasi effect Jquery dilengkapi dengan thumbnail dan captions. Ini langkah-langkahnya;

1.Login ke blogger dengan akaun anda
2.Klik Design –>Add gadget–>HTML/Javascript
3.Copy dan masukkan script dibawah kedalam konten html/javascript

<script src=” http://ceritangeblog.googlecode.com/files/Recentpos.js.txt ” type=”text/javascript”>
</script>
<style media=”screen” type=”text/css”>
<!–
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:430px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:260px;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#b4b6af url(http://cerita-ngeblog.blogspot.com/images/rcpost.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:328px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
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://4.bp.blogspot.com/-SWgYJQNjg-E/T__VxuI2ZqI/AAAAAAAAAKU/IPKLZcXB8lU/s72-c/screenshot.10.png”;
imgr[1] = “http://1.bp.blogspot.com/-Ufz8y-paab4/T-SpNwLIRzI/AAAAAAAAAFg/muWTeqChkpI/s72-c/screenshot.45.jpg”;
imgr[2] = “http://1.bp.blogspot.com/-gXs_ziCDlXI/T_OLgm-sfrI/AAAAAAAAAJA/HY3x-FcLwy8/s72-c/harapan.gif”;
imgr[3] = “http://4.bp.blogspot.com/-vCmCukIDaoU/T9hYuk5tpaI/AAAAAAAAADA/KhIQ9XsQFyw/s72-c/flagcounter.jpg”;
imgr[4] = “http://3.bp.blogspot.com/-7EqtEK3VcEY/T9aGY2HIiJI/AAAAAAAAAC0/C0Lorey_7WA/s320/00078ndhjbd.jpg”;
showRandomImg = true;
boxwidth = 255;
cellspacing = 9;
borderColor = “#232c35”;
bgTD = “#000000”;
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = “#666”;
aBold = true;
icon = ” “;
text = “comment”;
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = “#666”;
icon2 = ” “;
numposts = 25;
home_page = “http://www.elwenes.com/”;
limitspy=5
intervalspy=4000
</script>
<div id=”spylist”>
<script src=” http://ceritangeblog.googlecode.com/files/Recentpost.js.txt ” type=”text/javascript”>
</script></div>
<span style=”float:right; color:#000000;”>Get this <a href=”http://www.elwenes.com/2011/02/srchttpajax_16.html”> widget! </a></span>

Catatan: Anda harus mengganti home page (tulisan warna merah) dengan URL blog anda. Kode yang lain seperti background image, lebar dan tinggi thumbnail serta lebar caption boleh di edit mengikut cita rasa anda.

Recent Post Animasi Jquery Sebelah Kanan Blog Wanes

P/s Tutorial ini sesuai untuk newbie / blogger baru. Mungkin juga anda berminat untuk memasang Random Post di Sidebar

Sumber : http://cerita-ngeblog.blogspot.com