Cara Membuat Related Post Dengan Thumbnail

Cara Membuat Related Post Dengan Thumbnail -  Related Post sangat membantu blog agar seo friendly, karena related post membantu pengunjung untuk mencari artikel yang berkaitan dengan post yang dia baca. Pada post saya kali ini saya akan membagikan bagaiman cara membuat related post

Tutorial :

-Buka blogger.com

-Masuk ke template > Edit HTML

-Car kode ]]></b:skin> agar mudah mencari gunakan ctrl+F untuk mencari

-Jika sudah ketemu kodenya salin kode CSS di bawah ini tepat di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;border-top:1px solid #ddd;margin:20px 0 10px 0}
#related-posts .title{background:none;color:#555;font-size:20px;font-family: 'Oswald', Arial;font-weight:normal;padding:20px 0 12px 0;text-transform:uppercase}
#related-posts .thumb_img {padding:0 0;width:170px;height:110px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts .thumb_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

-Kemudian cari kode <div class='post-footer'> gunakan ctrl+F untuk mencari
-Jika sudah ketemu masukan kode JavaScript di bawah ini tepat di atasnya

<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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Related Posts :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>

-Jika sudah selesai klik Simpan

Jika kalian tidak menemukan kode "<div class='post-footer'>" kalian bisa ikuti kode di bawah ini

-Perhatikan kode di bawah ini

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

    <div class='post-footer'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='post-footer-line post-footer-line-1'>
      </div>

Pada kode di atas kalian bisa mencari <div class='post-footer-line post-footer-line-1'> tapi dengan catatan taruh agak di atasnya

Untuk mengatur jumlah post kalian bisa ubah "var maxresults=4;" yang di tandai dengan warna merah ubah dengan jumlah post yang akan muncul

Nah itu tadi tutorial yang bisa saya sampaikan semgoa bermanfaat bagi sobat blogger semua :D