Modifikasi Recent Posts/Artikel Terbaru dengan Tooltip

Aloo Vero Blogger... gimana kabarnya ??? semoga sehat dan bahagia, info unik kali ini tentang cara membuat Widget Artikel Terbaru (Recent Post) yang unik dan keren, pastinya...hehehe... Widget ini akan menampilkan daftar postingan artikel blog terbaru dengan ringkasan artikel. Widget ini berfungsi untuk memudahkan pengunjung blog mengetahui info artikel terbaru yang ada di blog.
Pada contoh diatas, coba dekatkan mouse sobat ke daftar link recent post monozcore diatas. Pada saat mouse didekatkan maka akan muncul label info yang berisi ringkasan postingan artikel blog. Pembuatan widget ini cukup mudah... oke buat yang tertarik kita langsung aja ke TKP... Cara Pemasangan

• Login ke blog sobat.
• Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/Javascript".
• Copy-paste kode berikut ini pada kotak postingan gadget. 

<style type="text/css"> /* FEEDBLITZ WIDGET */ .postnew li a:hover { display:block; text-decoration:none; background:#efefef; } .postnew li a:visited { text-decoration:none; } .postnew { float:left; width:380px; } .postnew ul { width:90%; list-style-type:none; } .postnew li a { text-decoration:none; border-top:1px solid rgb(204,204,204); line-height:1.6em; font-size:12px; display:block; padding:3px 0px 3px 0; } .feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter { display:none; padding:2px 3px; margin-left:95px; margin-bottom:12px; width:162px } .feedburnerFeedBlock li:hover .date { font-size:13px; font-weight:bold; text-align:left; display:block; position:absolute; background:url(http://4.bp.blogspot.com/_1_qkt6bisvU/TFWxXnUOeKI/AAAAAAAAAiQ/lPG9EIxJemM/s400/tooltips-date.gif) no-repeat scroll 10px 0px; color:#333; padding:0px 35px; margin-right:10px; width:114px } .feedburnerFeedBlock li:hover div { line-height:1.2em; border-radius:8px 8px; -moz-border-radius:0 0 8px 8px; -khtml-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; font-size:90%; display:block; position:absolute; border:1px solid #D8D8D8; background:#E5E5E5 url(http://2.bp.blogspot.com/_1_qkt6bisvU/TFWw-97HlKI/AAAAAAAAAiI/0uCcQMJxNgU/s1600/tooltips-background.png) repeat-x; color:#333; padding:35px 10px 10px 10px; } </style> <script src="http://feeds.feedburner.com/VeroMonster?format=sigpro&nItems=5&format=openLinks=new &displayDate=true&displayhttp://veromons.com/2012/02/modifikasi-recent-postsartikel-terbaru.html" style="text-decoration:none;color:white;">Get this widget</a></div>

• Gunakan feed burner sebagai rss feed blog sobat kemudian ganti teks "VeroMonster" pada kode script di atas dengan nama blog sobat. Untuk nItems=5 merupakan banyaknya daftar recent post yang ingin ditampilkan, pada kode diatas recent post yang ditampilkan sebanyak 5 postingan artikel terbaru.
• Klik "Save" dan lihat hasilnya...

Gimana Moz's Blogger kerenkan infonya ??? jangan lupa supportnya ya...dan juga klik sponsor iklan yang ada di blog ini supaya kreasinya makin unik dan bermanfaat...Terima kasih.
.:Semoga Bermanfaat:.




Contoh :