Recent Posting menggunakan Slide

Membuat Recent Posting menggunakan Slide seperti gambar di bawah ini:

Bagaimana cara membuatnya? Tanpa panjang lebar ikuti langkah-langkah dibawah ini :

1. Pertama masuk ke Blogger => Tata Letak/Layout
2. Klik Add a Gadget, pilih HTML/Javascript
3. Copy Paste code dibawah ini kedalamnya :

javascripto.blogspot.com


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
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:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</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 = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = " http://javascripto.blogspot.com ";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://serba-blog.googlecode.com/files/rpts-serbablog.js" type="text/javascript"></script>
</div>


Ganti tulisan berwarna merah dengan alamat URL blog anda (perhatian : harus pakai tanda " / " akhir URL)
Angka berwarna merah adalah jumlah postingan yang akan ditampilkan, silahkan merubah sesuai selera anda
Untuk menganti warna serta ukuran, silakan edit dibagian CSSnya dibagian atas.

Kemudian simpan,


Tunggu posting selanjutnya, Membuat inline frame

Baca juga tulisan menarik lainnya