Cara Membuat Related Posts / Artikel Terkait dengan Tampilan Gambar

Related Post atau sering juga kita sebut artikel terkait adalah artikel yang berhubungan dengan postingan yang sedang dibuka/dibaca. Artikel terkait yang ditampilkan adalah artikel yang sama-sama dalam satu label/kategori. Artikel terkait penting untuk SEO dan menambah kunjungan ke blog kita. Tentunya agar pembaca tertarik untuk membacanya kita perlu menghiasnya dengan tambahan gambar. Belum lengkap rasanya jika widget yang satu ini tidak disertakan dalam blog kita.

Pada kesempatan yang lalu saya pernah membuat artikel tentang tata cara membuat artikel terkait dengan tampilan teks biasa alias tanpa gambar. Nah sekarang saya akan membuat artikel terkait dengan tambahan gambar / thumbnail.

Memang banyak teknik-teknik cara membuat artikel terkait dengan gambar, salah satunya ialah dengan linkwithin yang cukup terkenal itu di kalangan blogger. Namun tak ada salahnya jika kita mencoba teknik yang satu ini.

Oke langsung saja kita buat tutorialnya
1. Masuk ke akun blogger > Rancangan > Edit HTML.
2. Centang expland template widget.
3. Cari kode di bawah ini  (tekan CTRL+F untuk memudahkan pencarian)

</head>

4. Masukkan kode di bawah ini  tepat di atas / sebelum kode </head> tadi.

<!--Kode Artikel Terkait dengan gambar start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KQJ2ChWgLlQKCzKJ_0tZRNDe50GjnR1lMRCm3i1PccBnKbE_lC1V3sNtP7lxzhRLGMAN7mflGzhu0qZzZEUt3TKH71O-CnDeUK4Fe8OvmK6AlUgsAB8CdUzyBzunHCsmVAkVdkreT8E8/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://julak-project.googlecode.com/files/relposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Kode Artikel terkait dengan gambar End-->

Sobat blogger bisa mengganti kode berwarna merah di atas;
a. angka 5 jumlah postingan yang ingin ditampilkan
b. "artikel terkait" dengan kalimat yang dikehendaki 

5. Kemudian cari kode seperti berikut:

<div class='post-footer-line post-footer-line-1'>

atau kode seperti ini

<div class='post-footer-line post-footer-line-1'>
</div>

atau kode seperti ini

<p class='post-footer-line post-footer-line-1'>

6. Masukkan kode dibawah ini, tepat dibawah kode-kode di atas tadi (pilih salah satu).

<!--Code artikel terkait dengan gambar Start-->
<!-- remove --><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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://blogbelajar2.blogspot.com'><img alt='Belajar Ngeblog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GzveGAZEUPU1Ea-TWV7dljjU_28YFp5DrTcXcbxvdimmN1cWC4kgClzhi9KQwrAj4AtiGcfRHp_YbHZib9tLa0xtNLEC9Yd9SvoSW5VIoVIbbBJXLPixkFHUA6p2um1BHJw03Yy5M8UT/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Code artikel terkait dengan gambar End-->

7. Terakhir, klik pratinjau, lalu save template. Selesai. Dan widget artikel terkait dengan tampilan gambar di bawah postingan blog sudah jadi.