Cara Membuat Artikel Terkait Beserta Gambar Di Bawah Postingan

Pada postingan kali ini saya akan memberikan tutorial blogger blogspot mengenai cara membuat artikel terkait beserta gambar di bawah postingan. Membuat artikel terkait / related post yang dilengkapi dengan gambar akan lebih banyak dilihat dan diklik oleh pengunjung , karena tampilannya yang keren dan membuat pengunjung lebih antusias melihat postingan anda.Apabila anda tidak percaya dengan apa yang saya katakan, perhatikan sekarang dengan apa yang terjadi pada blog saya. Oke,, langsung saja berikut langkah - langkahnya :

1. Login ke akun Blogger anda 

2. Klik Templete,  lalu pilih Edit HTML 

3. Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.

4. Lalu Copy kode berikut dan letakan tepat diatas kode </head>

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdlbokt1ZIbft_NeaawzLjOZNddSfHO0yotnGf3Me19amguO-jLYCLKahifPAfclLbqgiRR9DGC_r7WM2ulUnymRz-OKalNjOCmdlk3loxg5Dy-JnrrjHHLqNBpu6ym9orQedzEpUvwPP/s1600/No+Image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;You Might also like:&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

5. Kemudian anda cari kode berikut ( Jika terdapat dua kode, pilih bagian yang kedua ) :

<data:post.body/>

Nb : Setiap template dapat berbeda beda jika anda sudah memasang readmore anda harus mencari kode di bawahnya. 

6. Kalau kode diatas sudah ketemu, copy script di bawah ini :

<!-- Start Related Posts-->
<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=7&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'/>
</b:if>
<!-- End Related Posts-->

7. Kemudian paste kode script diatas tepat dibawah kode :

<data:post.body/>

8. Jika sudah, klik Simpan Template.

9. Apabila anda masih gagal copy kode yang kedua di atas <data:post.body/> yang lainnya, kemudian simpan, begitu seterusnya. <!-- Start Related Posts--> ..................<!-- End Related Posts--> menunjukkan dimana artikel terkait kita akan kita letakkan, kalau double dengan yang lain otomatis tidak bisa.

Nb :
Kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan yang berwarna biru sesuai keinginan sobat.

• Menampilkan jumlah artikel terkait yang muncul max-results=7 
• Judul artikel terkait relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
• Warna Tulisan splittercolor=&quot;#000000&quot;; 

Sekian dari Cara Membuat Artikel Terkait Beserta Gambar Di Bawah Postingan semoga  berguna bagi kita semua dan semoga berhasil.