Cara Mudah Membuat Recent Post Slide Cantik

Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat. Slide Show yang akan kita buat ini saya ambil dari postingan Om Abu Farhan yang sepertinya di kembangkan sendiri.

Untuk melihat hasilnya, coba lihat gambar berikut (klik untuk memperbesar) :

Dan jika Anda tertarik untuk membuatnya, silahkan ikuti panduan 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(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://www.anak-smanda.co.cc/";

limitspy=4

intervalspy=4000

</script>


<div id="spylist">

    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>   


Note :
. Ganti Url berwarna biru dengan Url Anda . Semoga berhasil !!


Show comments
Hide comments

21 komentar

avatar

untuk melihat slider yang diatas bisa lihat contohnya di blog sya...!! makasih

avatar

ya kawan,,,
Terima kasih sebelumnya sudah mengunjungi Blog ku ini...
Salam Kenal Pecinta Blog ..

avatar

ane pasang script agan ini, keren men, tokcer , , , mancaaaaaap.... hehe

avatar

hahaha,,,
SilaakaaaaN Gan,,,,
Langsung Ke TKP,,,
kwkakakakakakakwka :D

avatar

Mantap gan...luar biasa ilmi tik nya tanks...

avatar

Bermanfaat bgt bagi saya gan..TQ

avatar

@www.kita-bisa.com :sama" gan,, Langsung dicoba aja......!!

avatar

@Khocet Blog : sama" gan,,,, semoga sukses....!!

avatar

http://www.dubes-86.co.cc free back link gan siipp

avatar

waw,,, keren gan,,,, udah ane pasang di blog ane,,, makasih gan,,,

avatar

wah maksihya bro tipnya....
langsung di praktekkan nih di http://kodim-0701.blogspot.com/.....visit back ya ke http://kodim-0701.blogspot.com/......

avatar

gua coba gan N sudah berhasil,trims atas ilmunya sekalian saya akan share tutorialnya.

avatar

wah...bagus ini ...thanks..
www.informasievent.com

avatar

Keren widgetnya,, :D ijin sedot gan...

avatar

trims bro, visit back http://www.bocahdoko.co.cc :))

avatar

wah mantap juga nih,patut dicoba,makasih ya sebelumnya,sudah mau sharing ilmunya

Apakah Anda mempunyai saran? Silakan Tambah komentar. Jangan spam!