Membuat Recent Post Slide Down

Hai teman-teman semua, bagaimanakah kabarnya?saya harap semuanya dalam keadaan baik-baik saja.

Sekarang saya akan membagi pelajaran atau ilmu yang telah saya pelajari sebelumnya, yaitu mengenai Bagaimana Cara Membuat Recent Post Dengan Tampilan Slide Down. Hal ini dimaksudkan agar tampilan blog/web kita semua menjadi lebih enak dipandang dan lebih indah. Jadi bagi teman-teman yang belum bisa dan belum mengerti, saya akan menjelaskan disini dengan sedetil-detilnya agar mudah dipelajari dan dipahami. Baiklah, mungkin langsung saja ya...karena saya tau pasti teman-teman pada tidak sabar untuk mempelajarinya. Nah, dibawah ini adalah contoh Recent Post yang ada di Blog saya:

Kalau dilihat contoh diatas tidak bergerak layaknya slide, ya pasti !! karena contoh diatas hanya sebuah gambar, untuk melihat hasilnya anda harus mengikuti langkah-langkah dibawah ini:

• Pertama Login terlebih dahulu di blogger teman-teman sekalian

• Kemudian pilih Tata Letak dan kemudian pilih Tambah Gadget

• Kemudian cari dan pilih HTML/Javascript dengan cara di-klik saja, kemudian akan tampil seperti dibawah ini:

• Kemudian sekarang teman-teman Copy dan Paste Code Script dibawah ini dikolom yang telah disediakan seperti gambar diatas.

                                                 <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:245px; } #spylist ul{ width:300px; overflow:hidden; list-style-type: none; padding: 0px 0px; 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(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 = false; 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 = 5; home_page = "http://freedom-mediafire.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript"> </script></div>

      Keterangan:

1. Ganti http://freedom-mediafire.blogspot.com/ dengan URL Blog teman-teman.
2. numposts = 5; adalah jumlah artikel yang muncul dalam slide down, ganti angka 5 untuk mengubah banyaknya tampilannya sesuai keinginnan teman-teman.

• Setelah copy dan paste serta edit code diatas, sekarang tinggal teman klik Simpan dan lihat hasilnya.

Oke..saya rasa untuk pelajaran kali ini cukup sekian dan kita akan berjumpa lagi dengan pelajaran yang lainnya. Semoga semua pelajaran ini bermanfaat bagi kita semua ,,amiiiiin.