Widget Recent Posts Dengan Gambar dan Ringkasan dalam Tooltip

Widget Recent Posts dengan Gambar dan Ringkasan dalam Tooltip yang keren ;) kali ini contohnya seperti di sidebar kanan atas pada halaman single post di Warung Bebas ini. Widget ini untuk melengkapi Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip. Untuk dipasang di blog yang dihost di blogger.com / blogspot.com, jadi untuk wordpress tidak cocok, data yang diambil tidak sama.

Yang jelas widget ini otomatis tanpa harus memasukkan tooltip secara manual, (*) gambar dan tooltip berupa ringkasan artikel akan muncul sendiri. Sebelum memasang pada blog kamu, bisa dicoba dulu tanpa harus pasang langsung di blog.

Langsung saja pada contoh tampilannya untuk diterapkan ke blog kamu:

Tampilan diatas itu standar, baik warna dan lebarnya, jika dipasang di blog sendiri bisa diedit beberapa bagian. Untuk memasangnya ikuti petunjuk berikut ini:

1. Pasang dulu script Tooltip. (Required)

Kalau belum pasang script tooltip, maka tidak akan bekerja kode Widget Recent Posts ini, karena memang kelebihannya menggunakan tooltip.

2. Setelah itu pastikan setting feed blog kamu dalam kondisi PENUH.

Lihat dan edit di PENGATURAN » FEED SITUS, dari dashboard blogger.com kamu saat login. Lihat Gambar:



3. Kalau sudah tambahkan widget di elemen halaman

Letaknya silahkan sesuaikan sendiri, kiranya hal ini mudah bagi kamu. Tambahkan widget kemudian isinya masukkan kode dibawah ini:

<script type='text/javascript'>
numposts = 5;
showRandomImg = true;
jmlsummary = 250;
boxwidth = 300;
cellspacing = 5;
borderColor = "#fff";
thumbwidth = 35;
thumbheight = 35;
jdlsz = "12px";
acolor = "#000";
text = "komentar";
showPostDate = true;
</script><script src='http://javascript-share.googlecode.com/files/wb_recentpoststhumb_tt.js'></script><a id='wb_recentposts_tt' href='http://www.warungbebas.com/2010/10/widget-recent-posts-dengan-gambar-dan.html'>Recent posts with thumbnail</a><script src='/feeds/posts/default?redirect=false&alt=json-in-script&orderby=published&callback=wb.$_showrecentposts&max-results=5'></script>

4. Simpan, dan lihat sekarang keluar apa tidak widgetnya di blog Anda. Ingat tahapan diatas adalah menguji script bekerja atau tidak. Nanti diedit belakangan.

Sudah muncul widgetnya? Sekarang bagaimana cara melakukan modifikasi widgetnya. Bagian yang bisa dimodifikasi adalah kode berikut:

<script type='text/javascript'>
numposts=5;
showRandomImg=true;
jmlsummary=250;
boxwidth=300;
cellspacing=5;
borderColor="#fff";
thumbwidth=35;
thumbheight=35;
jdlsz="12px";
acolor="#000";
text="komentar";
showPostDate=true;
</script>

Ganti huruf warna merah dan warna biru diatas sesuai selera, penjelasannya berikut ini:

Selain pentunjuk diatas, kamu jangan edit lainnya, bisa gak keluar widgetnya.

OK, sampai sini semoga tidak ada kesulitan, jika ada trouble silahkan dilaporkan dikomentar agar bisa diperbaiki bug-nya, karena memang selama ini tooltip sering kress dengan karakter tertentu, so, kalau misal dalam postingan blog kamu mengandung karakter itu, bisa jadi ada masalah, dan perlu dimasukkan dalam daftar karakter yang perlu dihilangkan dalam script. Dari pengalaman ada beberapa blog dengan postingan banyak mengandung special character tidak bisa menggunakan widget ini. Terima kasih.