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: Ayo rintis Bisnis Online Anda dari sekarang!
</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJuYaUfcuooTlSvMRrI5H6xPWXvf9CCacJT3dF-xuBt12SvRmdUaO7zP0wGp-Y8ljv6aGAKvJOxiyOYDRFfgt5eqDz7Y7H1TXz9rIQVBBPCGxRkBrwQNV5twxw5TAmfHbGFoUBmjbzoc/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJuYaUfcuooTlSvMRrI5H6xPWXvf9CCacJT3dF-xuBt12SvRmdUaO7zP0wGp-Y8ljv6aGAKvJOxiyOYDRFfgt5eqDz7Y7H1TXz9rIQVBBPCGxRkBrwQNV5twxw5TAmfHbGFoUBmjbzoc/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5_bIzIdszU8D9W3OtIArX3RKOn9X_LxB3M4StaMatA2T8Mg4XWXaMzWyyTppskPZy0cNmBB6VbJymRHmh9pZJv5FwQMl30ZO5GaqJ8-2B-VhTRImfiOzoXoEmKOeJQ_QZj_tAPTwMNA/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/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 dibawahny, 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 terkaitsampai 20 artikel, ubah saja huruf yang berwarna merah (10) di atas dan sesuaikan sesukamu. Mudah-mudahan bermanfaat dan selamat mencoba.
thanks nih sob atas infonya ..
ReplyDeletehttp://mat3riku.blogspot.com/
Salam kenal bro.
ReplyDeleteMantap tips kawan, yang seperti ini yang saya cari-cari, dan alhamdulillah berjalan baik di blog aku. Thank's so much dan sukses selalu.
Salam.