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:

Blogger

• Cara membuat tombol minimize dan maximize
• Cara Membuat Daftar Isi Dengan Jquery
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Link Bergoyang Dengan Javascript
• Post Populer dengan Animasi
• Konten Bundar Slide
• Cara membuat Label cloud berputar di blog
• Putar Gambar dengan CSS3 tanpa Javascript
• Pasang Modus Hemat Energi di Blog
• Membuat Tombol Top Up
• Gambar Dengan Efek Zooming di Blog
• Kotak Text Area Dengan Tombol Select All
• Cara Membuat Browser Berputar
• Cara Membuat Efek Coret Pada Postingan
• Image Gallery Menggunakan Jquery 1.4.2
• Cara Menampilkan Favicon Di Semua Browser
• Cara Membuat Random Post Di Blogger
• Cara membuat Artikel Terkait Dengan Gambar/Thumbnails
• Cara Mudah Pasang Emoticon Di Kotak Komentar
• Cara Pasang Head Line News
• Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Fitur Reply Pada Kotak Komentar
• Cara menampilkan Icon Di Judul Postingan
• Memanipulasi Tampilan Jumlah Komentar