Animated Reccent Posts

Reccent Posts yang sudah saya share ada berbagai macam. Nah yang satu ini merukapan alternatif lainnya yang dapat Anda gunakan/pasang di Blog Anda. Memang Animated Reccent Posts ini merupakan cara yang lumayan lama, tapi namanya juga belajar dan sekedar share apa ruginya... ^^
Mari kita coba, dan simak dengan seksama...^^
Loggin ke Blogger

Klik Rancangan >> Pada halaman Edit Laman pilih "Tambah Gadget"(jika menggunakan widget baru) atau klik Edit pada salah satu Gadget yang ada, kemudian salin kode dibawah 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogd66zVdZm7rtpXc8H8cayjj3iWawY3-cthTQo6MqTvXewl3r8VkahMtsQUxgy9glthyphenhyphent_fynfn7OBPjja2qtw4OJJbvVxcu4Fe4M7sExli4G7a7sz7GdUWZLdd1ifYBFp2o5apVEJqFT/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqDvYGr5uyK11RBSO6Yyu5jRJ6bi4LvVSTjPmCVJ5PO2iYMa95gHD2fSURaD8zMtaOPuMI7WCkJVxTbwoN6Uiep4CLpudtsA1olejNQVROeZuDP6UhHcEw9XnwMkrygfJ5o0WFsNoL9o/s400/noimage.png"; 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://asal-suka.blogspot.com/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script> </div>

Saya sarankan salin terlebih dahulu ke notepad
Sebelum disimpan ada beberapa yang harus Anda edit terlebih dahulu:
Ubah yang berwarna merah!!!!
Wajib:

• home_page = “http://asal-suka.blogspot.com/”; (ganti dengan alamat Blog Anda)

Saran:

• width : 220px; 
• background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x; (background untuk Reccent Posts tersebut)
• thumbwidth = 70; (lebar gambar)
• thumbheight = 70; (tinggi gambar)
• showPostDate = true; (true=menampilkan tanggal; false=tidak menampilkan tanggal)
• numposts = 10; (jumlah reccent posts yang akan ditampilkan)

untuk kode-kode warna dapat dilihat disini.

Jika sudah selesai, salin kode ke gadget yang kita buka tadi, lalu disimpan.
Lihat hasilnya, jika tidak sesuai dengan keinginan Anda, Anda dapat mengeditnya sendiri.


Terima kasih sudah berkunjung...
Happy Blogging ^^...

Sumber www.abu-farhan.com