Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga

Bener gak ya judul di atas? Habis bingung mau kasih judul apa hehe....
Oke langsung aja ke topik. Recent post atau postingan terbaru memang sangat penting. Karena dengan adanya recent post, pengunjung dapat mengetahui postingan terbaru di blog kita.

Dalam membuat recent post kali ini sangt mudah, sobat tinggal copy paste aja di Gadget sobat. Buat sobat yang tertarik memasang widget recen post ini, silahkan copy aja kode di bawah 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: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:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBz_LUWHxDLt15LH9kZGIqoQ1k1b3LsiZUL-PFYcISb5s3pU4AxHO_PuwcmlYyRkhft6QBHBnN0PXnHuUHvVmOJlF94hq-HTK4rmRKFLtgGwRHdl57Q5jqDoOC9hv32j6SNUv9aPX0UR6/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/AVvXsEjzuKGbYhy39xfGDohvV5ZbMTu_1vdeokbmwEwQWlWUqicbE4rzRrb2rbvybiXKiEJY7gmbok3Rp750LEpVzfKUmJIoM5rhs7z_1bz5sT7Ve5ochpaSNixuF3vnpNh54D17gZZjfqqgDZk/s400/noimage.png";


imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuKGbYhy39xfGDohvV5ZbMTu_1vdeokbmwEwQWlWUqicbE4rzRrb2rbvybiXKiEJY7gmbok3Rp750LEpVzfKUmJIoM5rhs7z_1bz5sT7Ve5ochpaSNixuF3vnpNh54D17gZZjfqqgDZk/s400/noimage.png";


imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuKGbYhy39xfGDohvV5ZbMTu_1vdeokbmwEwQWlWUqicbE4rzRrb2rbvybiXKiEJY7gmbok3Rp750LEpVzfKUmJIoM5rhs7z_1bz5sT7Ve5ochpaSNixuF3vnpNh54D17gZZjfqqgDZk/s400/noimage.png";


imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuKGbYhy39xfGDohvV5ZbMTu_1vdeokbmwEwQWlWUqicbE4rzRrb2rbvybiXKiEJY7gmbok3Rp750LEpVzfKUmJIoM5rhs7z_1bz5sT7Ve5ochpaSNixuF3vnpNh54D17gZZjfqqgDZk/s400/noimage.png";


imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuKGbYhy39xfGDohvV5ZbMTu_1vdeokbmwEwQWlWUqicbE4rzRrb2rbvybiXKiEJY7gmbok3Rp750LEpVzfKUmJIoM5rhs7z_1bz5sT7Ve5ochpaSNixuF3vnpNh54D17gZZjfqqgDZk/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 = 10;

home_page = "http://Alamat Blog.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>

Untuk yang warna hijau ganti URL blog sobat. Untuk ukurannya silahkan sobat atur sesuai template.

Semoga bermanfaat.
Alhamdulillah..

Artikel Terkait: