Recent Post Slide Show JQuery

Published by Kang Fathur Friday, October 29, 2010

Salam blogger, sebelumnya saya akan berterimakasi kepada pengunjung dan pencinta blogger sekalin khususnya shabat - sahabat blogger, pada kesempatan malam ini saya akan bagi bagikan satu buah trik yang sederhana, simpel tapi mengasikan hehe cara pemasangannyapun sangat simpel.

OK, trik yang akan saya berikan adalah cara membuat "Recent Post Slide Show JQuery" dengan yang namanya "Recent Post Slide Show" ini blog kita akan lebih cantik dan menarik, mudah mudahan pengunjung kita pun juga merasa betah AMIIIN.

OK, berhubung saya tidak mao ngomong panjang lebar karena masih banyak yang harus du beresin kita langsung aja ke TKP :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<script src="https://sites.google.com/site/efekefek/file-js/recentpostslide.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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 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://ade-tea.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src=https://sites.google.com/site/efekefek/file-js/recentpostslide2.js' type='text/javascript'></script>
</div>

PERHATIAN
Kode yang berwarna merah ganti dengan alamat link sobat OK

Setelah semua langkah - langkah terlewati, simpan dan lihat hasilnya??

Selamat mencoba semoga bermanfaat dan jangan lupa comennya,

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI