Sebelumnya Admin pernah memposting 7 Kesalahan dalam Mencari Backlink, nah kali ini saya akan buat Recent post atau postingan terakhir sangat penting bagi para blogger, disamping menunjukkan artikel-artikel terbaru, Artikel Terkait Bergambar Berjalan recent post juga dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya,sama halnya dengan artikel terkait blog atau related post, recent post juga bisa dengan tampilan thumbnail, nah kali ini Saya akan memberi tutorial tentang cara membuat recent post dengan efek slide show. lihat gambar dibawah ini:
Sebelumnya saya juga telah posting cara membuat recent post dengan gambar,lalu bagaimana agar gambar tersebut bisa tampil dengan slide show? ikuti tutorial dibawah ini:- Login ke akun Blogger sobat
- Klik Rancangan >> Elemen haLaman
- Klik Tambah Gadget
- Pilih HTML/Javascript
- Masukan kode berikut :
<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: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 = 20; home_page = "http://infonetmu.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript"> </script></div>Simpan dan Selesai
Sumber