Posted by : fathi
Selasa, 31 Juli 2012
Cara Membuat Related Posts Atau Artikel Terkait Blogspot dengan Gambar berjalan atau slideshow memang agak memberatkan loading kemungkinan namun untuk yang doyan deperti saya yah saya gunakan aja.
ikuti langkah berikut.
Edit your template,
Log in to your blogger dashboardKlick on Design - Edit HTML
and check the Expand Widget Templates.
Cari code:
</head>Ganti Dengan kode ini
<b:if cond='data:blog.pageType == "item"'>Next, Cari kode :
<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/AVvXsEjBC_Vd_CPRhBFUF8tpTJOHCweV12bI_MGK2EsqNvNzndmZMUm8Q1eWft2ygp6faaALUQJU8EvpbsriGLoCRa60Huxds9G2QZ4vSY9Rf05qUIfC0PO-ruYnSU-93wBtC3lmz-XqSyGZyrQ/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBC_Vd_CPRhBFUF8tpTJOHCweV12bI_MGK2EsqNvNzndmZMUm8Q1eWft2ygp6faaALUQJU8EvpbsriGLoCRa60Huxds9G2QZ4vSY9Rf05qUIfC0PO-ruYnSU-93wBtC3lmz-XqSyGZyrQ/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/AVvXsEhyL0a5JGY8G-PUENUR11rYriGaLgxCYAwqBNwDTxj80UKzv604uH13m_YpTNe6xa2VmWJyPiZQMA0tl2hZGPNV_VNVXVX2QJPlzZiyOyoFYZOVhoz0BVySSTejn0Cn97WmaEG3-9nyywk/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>
</head>
<div class='post-footer-line post-footer-line-1'>atau
<p class='post-footer-line post-footer-line-1'>simpan kode ini dibawah kode tadi
<b:if cond='data:blog.pageType == "item"'>Save your template and you're done. Anda bisa mengganti jumlah postingan maksimal 20 posts, dengan merubah angka merah (10) dan selamat mencoba
<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>