Cara Buat Related Post

Cara Buat Related Post - 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.

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/AVvXsEg8tV7GEICGpcCR9Ali-s6u_wfgtlmiANU8FshzYtSJj8dj8zpKiPRw87AlU5WVmOkBPT8xIpxIsWIn2F891zAuABVLzhg0evAcvdsmf3lwdL34vf8G2KDXNohWTKHR0icAV1oynHVN3bw/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8tV7GEICGpcCR9Ali-s6u_wfgtlmiANU8FshzYtSJj8dj8zpKiPRw87AlU5WVmOkBPT8xIpxIsWIn2F891zAuABVLzhg0evAcvdsmf3lwdL34vf8G2KDXNohWTKHR0icAV1oynHVN3bw/s1600/bt.png) no-repeat bottom;}

</style>

<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/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>