Cara Mudah Membuat Recent Post Slide Cantik

Dengan membuat tampilan Slide di halaman blog kita, pengunjung akan merasa lebih mudah untuk menelusuri daftar isi di blog yang kita buat. Saya mengambil tampilan Slide ini dari post Om Abu Farhan, yang tampaknya telah dikembangkan sendiri.

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

Dan jika Anda tertarik untuk membuatnya, silahkan ikuti panduan di bawah ini :

• Klik Tambah Gadget HTML/JavaScript  di Page Element blog anda

• Tambahkan kode dibawah ini kedalam HTML/Javascript

<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.anaksmanda.site/";limitspy=4intervalspy=4000</script><div id="spylist">    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script></div>   

Catatan

*Ganti Url berwarna merah dengan Url Anda . Semoga berhasil !!

Share this post