Cara Membuat Recent Post Dengan Thumbnail

Recent Post dengan thumnails? Sebelumnya kita harus tahu dulu slideshow itu apa.
Thumbnails merupakan salah satu content yang sangat menarik oleh karena itu banyak dari situs-situs terpopuler memasang slideshow sebagai tampilan review dari entry posting tulisan mereka ataupun review sebuah gallery untuk menampilkan foto-foto secara bergantian sehingga menghemat tempat. namun kelemahan dari content slideshow gallery ini adalah begitu banyaknya susunan script untuk menyusun dan menggerakan content slideshow ini sehingga mau tidak mau blog anda menjadi besarnya bertambah.

Artikel terbaru dengan slideshow ini berbeda dengan artikel terbaru yang hanya menggunakan bullet sebagai penghiasnya (baca: Menambahkan Recent Posts + Comment Dengan Javascript). Slideshow kali ini dilengkapi dengan efek marquee/berjalan (baca: Cara Membuat Kotak Blogroll dan Efek Marquee) yang membuat blog kita semakin cantik. Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat.

Tertarik membuatnya? Ikuti langkah berikut di bawah ini.
1. Login ke akun blogger sobat.
2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.

3. Lalu masukkan kode di bawah ini di kolom tersebut.

<style type="text/css">
#spylist {overflow:hidden;height:220px;margin-top:5px;padding:0px 0px;}
#spylist ul{list-style-type: none;padding:0px;margin:0px;}
#spylist li {padding: 5px 0px 5px 5px;margin:0px;float:none;height:44px;}
#spylist li a {text-decoration:none;color:#4B545B;font:12px calibri;margin:0px;padding:0px;}
#spylist li img {float:left;margin-right:5px;margin-top:7px;background:#EFEFEF;border:0;}
.spydate{font-size:10px;color:#0284C2;padding:2px 0px;margin:0px0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;}
.spycomment{font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px;margin:-2px 0px;}
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 20;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://daw-xp.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://h1.ripway.com/keichiro/javascript/artikelterbaru.js' type='text/javascript'></script></div> 

 - Ganti teks yang berwarna merah dengan alamat blog sobat.

4. Save widget.

5. Beralih ke menu Edit HTML, cari kode </head> dan ganti kode tersebut dengan kode dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
</head>

6. Save template dan lihat hasilnya.

Selesai sudah cara membuat artikel terbaru dengan slideshow. Bagi sobat kunjungi terus dan dapatkan artikel terbaru disini.

 

Sumber : http://daw.xp.blogspot.com