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 dashboard
Klick on Design - Edit HTML
and check the Expand Widget Templates.
Cari code: 
</head>
Ganti Dengan kode ini
<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/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> 
Next, Cari kode :
<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 == &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>
Save your template and you're done. Anda bisa mengganti jumlah postingan maksimal 20 posts, dengan merubah angka merah (10dan selamat mencoba

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Labels

Followers

Diberdayakan oleh Blogger.

Cari Blog Ini

Copyright © 2012 fathi -Black Rock Shooter- Powered by Blogger - Designed by Johanes Djogan