Related Posts Keren..!

Related Post Keren..!

Salah satu cara untuk merangsang minat pembaca adalah menyediakan related post dengan thumbnail. Sudah banyak style- style Relates post yang beredar baik yang biasa-biasa saja atau pun yang telah dimodif dengan efek-efek tertentu, tapi yang kali ini beda..!,

Related Post ini selain menggunakan thumbnail juga memakai style Marquee plus toolltip, widget ini juga dapat bergulir (berjalan) dan bergerak jauh sisi ke sisi, dan uniknya adalah judul posting akan muncul pada tooltip.

Demo

langkah-langkah Pembuatan:

1. Login ke akun blog sahabat, lalu pilih Rancangan.

2. Pilih Edit HTML, backup template anda terlebih dahulu, jaga-jaga kalau terjadi erorr
3. Centang pada Expand Widget Templates

4. Cari kode </head>, untuk memudahkan gunakan Ctrl F

5. Simpan Kode dibawah ini, diatas kode yang tadi, kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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/AVvXsEiMxkTJxFRiH5pB1h8UeaaEInAlhZsm0tKwT4C6BxQRlQG95THZCI9Ti7HutKeOA4eR5LFA3iUyQ9MzVcyjOvCXEwAgFy0mhrTzCT7vje8IQAGWGEMphrGI4k3qFq41a3TwyVUXRWnuXNs/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxkTJxFRiH5pB1h8UeaaEInAlhZsm0tKwT4C6BxQRlQG95THZCI9Ti7HutKeOA4eR5LFA3iUyQ9MzVcyjOvCXEwAgFy0mhrTzCT7vje8IQAGWGEMphrGI4k3qFq41a3TwyVUXRWnuXNs/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/AVvXsEjZbhi7ekBJIu0ev5jkorIp6Nsb5jBDBYrOXZYCJ0dmlsc7-JtRS3M_hCigDtgyyS4CQhkinyLDE4oEzW3V43j8eNTOdwj8yTSRdWRqH6mtiEaptYeZtDw_UKcuXfSi99BI7x7HKbPHi4s/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

6. Selanjutnya, cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

7. Simpan Kode dibawah ini, dibawah kode yang tadi, kode  <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' 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=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>

8. Simpan dan lihat hasilnya

Sahabat dapat menetapkan jumlah maksimum posting terkait sampai dengan 20 posting, hanya mengubah nomor berwarna merah (10) dan menyesuaikannya seperti yang  Sahabat  suka. 

Selamat mencoba.

http://www.intert3chmedia.net/