Cara Membuat Artikel Terkait Dengan Gambar Dibawah Posting Blog

Kemarin saya pernah mendapat usulan dari pengunjung saya untuk membuat related post di blog saya dan saya berfikir boleh juga untuk menambahkan hal tsb untuk memudahkan pengunjung mencari ulasan informasi yang berkaitan dengan apa yang mereka cari.

Nah pada kesempatan kali ini saya akan membagikan cara bagaimana membuat related posts tsb.

Berikut tampilan yang baru saya tambahkan : 

Langkah-Langkah :

1. Masuk Blogger > Template > Edit HTML

2. Tekan CTRL + F untuk mencari, lalu tuliskan kode </head>

Lalu copy kode yang ada bawah ini di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: #EEEEEE;}
#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:4px solid #f2f2f2;width:100px;height:100px;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;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. Cari kode  <div class='post-footer'> lalu copy kode dibawah ini tepat di atas  <div class='post-footer'>
Note penting! : Jika anda menemukan 2 kode <div class='post-footer'> maka anda harus meng-copy kode dibawah ini 2x tepat di atas ke 2 kode <div class='post-footer'> tsb

<!-- 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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknudFn67pbisI6S1gXBowSkGVm3uIYu_PJXvnI7oQQgPpHKwtzp_okl0xBWrf65QInBTqf2POKYm0aQFlmKpPYprlzIr43eehm3nUk_jrkVqEr1hWPxL4bm_HYIxwEM5GNSOZ9u12MTR_/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Untuk var maxresults=6; anda bisa mengubah angka 6 menjadi jumlah related posts yang  ingin anda tampilkan pada setiap post.

4. Save Template

Selamat Mencoba..