Membuat Scrolling recent post dengan gambar

Trik kali ini, akan membahas tentang cara membuat recent post animasi dengan image thumbnails atau recent post scrolling disertai gambar.

Sebagai contoh, pada sidebar blog saya ini. Itu adalah contoh Scroling post yang disertai dengan gambar.

Bagaimana cara membuat recent post dengan thumbnails/gambar?

Yuk kita bahas bareng..

Mudah kok caranya.

Buka pada halaman 'Layout' - 'Page Element' kemudian klik 'Add a Gadget' ditempat sodara mau tambahkan recent post dengan gambar ini. Kemudian pilih saja 'HTML/Javascript'

Copy paste code berikut :

<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:190px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:190px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.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] = "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 = 60;

thumbheight = 70;

fntsize = 10;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://namabloganda.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Kemudian simpan, jadi deh.

Sodara bisa mengganti kode diatas :

imgr[0]

Contoh diatas, terdapat 5 kode gambar. Gambar tersebut adalah gambar2 yang akan muncul secara acak jika pada postingan Sodara tidak ada gambar.

showRandomImg = true; ---->Isi dengan true jika Sodara menginginkan gambar akan tampil secara acak. Jika tidak, isi saja dengan false.

tablewidth = 230; ----> lebar keseluruhan.

cellspacing = 3; ----> Jarak antar kotak.

borderColor = "#f2f2f2"; ----> warna garis tepi.

bgTD = "#f2f2f2"; ----> warna background.

imgwidth = 80; ----> lebar gambar / thumbnails

imgheight = 80; ----> tinggi gambar / thumbnails

fntsize = 12; ----> ukuran huruf untuk judul

acolor = "#666"; ----> warna huruf untuk judul

ccolor = "#5588aa"; ----> warna huruf untuk comments

cFontsize = 10; ----> ukuran huruf untuk comments

aBold = true; ----> True jika judul tampil dengan huruf tebal

text = "comments"; ----> Silahkan ganti tulisan 'comments'

showPostDate = false; ---> true jika Sodara ingin menampilkan tanggal

summaryPost = 50; ----> banyaknya karakter pada Post summary

summaryFontsize = 10; ----> ukuran huruf untuk post summary

summaryColor = "#666"; ----> warna huruf untuk post summary

numposts = 3; ----> jumlah postingan yang akan tampil

home_page = ""; ----> silahkan ganti dengan alamat blog sodara
Selamat berkreasi membuat Scrolling recent post dengan gambar..