Salah satu cara untuk menarik perhatian pembaca blog adalah dengan menyajikan artikel berkaitan dengan thumbnail atau gambar dari postingan terkait. Seperti postingan saya sebelumnya membuat artikel berkaitan dengan ikon di mana saya merubah list style yang biasanya dengan number atau bullets, saya merubah list style tersebut dengan ikon atau gambar. Dan kali inipun saya kembali memodifikasi sedemikian rupa widgets artikel terkait dengan thumbnail plus bubble tooltips. Ya jelas beda, tidak hanya menampilkan gambar dari artikel terkait tapi juga menambahkan balon tooltip pada titlenya.
Umumnya tipe related post seperti ini bergerak menggunakan fungsi marquee, namun saya menemukan pada sebagian browser fungsi ini tidak berjalan dengan baik. Nah, saya merubah fungsi yang ada sehingga widget saya artikel berkaitan dengan thumbnail plus balon tooltip ini dapat berjalan dengan baik pada hampir semua browser. Kalau dari sobat menemukan error atau bugs dari widget ini, kasitau ya…
Berikut screenshotnya, atau untuk melihat live demo klik di sini.

Nah, kalau sobat tertarik untuk memasang widget ini di blog sobat, berikut cara pasangnya:
Edit template blogmu, log in ke dashboard blogger sobat – klik – Edit HTML dan klik juga Expand Widget Templates biar kodenya muncul semu. Cari dan temukan kode ini:
</head>
Gantikan dengan kode di bawah ini:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(https://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/s1600/noimage.jpg';</script>
<script src='https://rawcdn.githack.com/dvs11/jsdelivr/9142716e3d57267c3ed351eb6897d4fd92fdaffd/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>
</head>
Selanjutnya, temukan kode ini:
<div class='post-footer-line post-footer-line-1'>
atau jika tidak ada, cari kode ini
<p class='post-footer-line post-footer-line-1'>
Kalau sudah ketemu, tambahkan kode di bawah ini dibawahnya, atau Setelahnya.
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop> <h3>Related Posts</h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div><div style='clear:both'/> </b:if>
Save template blogmu dan selesai deh. Dengan widget ini sobat dapat menampilkan artikel/ posting terkait sampai 20 artikel, ubah saja angka pada jumlah maksiml “var maxresults=10 ” di atas dan sesuaikan sesukamu. Mudah-mudahan bermanfaat dan selamat mencoba, semoga sobat semua suka. Jika ada masalah atau skrip tidak jalan tolong diinformasikan ya..
Keren mas… ohya pemakaian jsnya ada brp mas?
file js udh dkompres blom?
bisa gak cssnya ditaruh terpisah , cssnya diatas ]]>
dan jsnya dbawah atau klo perlu diatas
agar requestnya beakangan
JSnya cuma satu (4.1kb) dan udah dikompress pula. klo CSS bisa dipake terpisah atau disimpan dimana sja. tp jsnya tetap seprti kode di atas sebab berpengaruh pada posisi related postnya yang setelah posting.
Terimakasih infonya, sangat membantu banget buat pengembangan blog saya:)
Same2, silahkan dicoba dan semoga bermanfaat!
thanks ya tutorialnya mas. sudah saya coba…
cuman kok gak bisa ya?
bisa dibantu saya mas?
Silahkan ikuti petunjuknya dan dicoba lagi, kalo yg lain bisa Widhi juga pasti bisa. Atau kasitau dimana letak kesulitanya.
thanks atas tutorialnya…………!!!!!!!
Wah, bagus-bagus tutorialnya,,, dah aku coba-coba semuanya berhasil. ma kasih ya,,, ijin pake di blog aku.
Terima kasih kembali. Ini juga sebenarnya masih belajar, alhamdulillah klo bisa bermanfaat bagi yang lain 😀