Membuat Related Post dengan Gambar/Thumbnails

Salam blogger....!!!

Pada kesempatan ini saya mau membagikan artikel cara lengkap dan tak membingungkan untuk membuat related post dengan gambar.

Related post adalah ringkasan atau link-link postingan yang berhubungan dengan postingan yang kita buat.

lansung saja pada topik permasalahannya yaitu cara membuat related post disertai gambar/thumbnail.

1. Login ke blogger sobat


2. Pilih template (Ada baiknya backup dulu templatenya)


3. Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode/tag  </head> ( tekan f3 untuk memudahkan pencarian)

<!--Related Posts Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia, “Times New Roman”, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style> <script src='https://sites.google.com/site/javascripsrelated/related/relatedpostwiththumbnails2.js' type='text/javascript'/><br /></b:if><br /><!--Related Posts End-->

4. Jika sudah kembali cari tag  <div class='post-footer-line post-footer-line-1'> <br /> biasanya ada dua kode seperti itu pilih paling bawah

<!-- Related Posts Start--><br /><b:if cond='data:blog.pageType == "item"'><br /><div id='related-posts'> <br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != "true"'><br /></b:if><br /><b:if cond='data:blog.pageType == "item"'><br /><br /><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://tetap-belajar.blogspot.com' style='display:none;'>Related Posts dengan thumbnails untuk blogger</a><br /><script type='text/javascript'><br />var currentposturl="<data:post.url/>";<br />var maxresults=10;<br />var relatedpoststitle="Related Posts";<br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs();<br /></script> </div> <br /><div style='clear:both'/> <br /></b:if> <!-- Related Posts End-->

5. Kemudian save (tunggu samapi proses penyimpanannya selesai) dan lihat hasilnya