Cara Membuat Related Post Dengan Gambar Di Blog


Postingan Saya Kali ini Membuat Related Post Dengan Gambar Di Blog, Sebelumnya Saya Memposting Cara Membuat Related Post Tanpa Gambar, Kali Ini saya akan Membuat Trick Memsang Dengan Gambar Atau Thumbail,Okeh Karna Hari ini saya lagi buru buru jadi saya membuat postingan ini menjadi singkat, Langsung aja caranya Di Teliti Dengan baik.
Masuk Ke Template > Edit Html > Cari Kode </head> Kemudian Copy + Paste Kode Di bawah ini Tepat Di Atas Kode </head> 



<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->

Kemudian Cari Kode <div class='post-footer'> Copy + Paste Kode Di Bawah Ini Tepat Di Atas  <div class='post-footer'> 



<!-- Related Posts with Thumbnails Code Start-->
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Kemudian Save Template Dan Lihat Hasilnya.Gimana Berhasil Ga caranya? kalo tidak berhasil berarti sobat kurang teliti dengan cara di atas, Okeh sampai disini postingan saya semoga bermanfaat Sekian Terima Kasih.

0 comments:

Post a Comment