Cara Membuat Artikel Terkait dengan Gambar

Artikel terkait dapat memudahkan pengunjung untuk membaca artikel kita yang lain, Alangkah baiknya related post di letakkan di posisi yang tepat seperti di bawah konten atau artikel agar terlihat pengunjung. Memasang artikel terkait juga sangat efektif untuk mengurangi Bounce rate juga loh. Langsung saja Berikut adalah cara memasangnya.

• Login dan masuk ke dasbor blogger
• Klik template => edit HTML.
• Cari kode ]]></b:skin> untuk memudahkan pencarian tekan CRTL + F lalu cari kode tadi
• Jika sudah ketemu kode tadi masukan kode di bawah tepat di atas kode tadi

<b:if cond='data:blog.pageType == "item"'>
<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,Times New Roman,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/AVvXsEgyJuQP9jg2LKA_kVB2hD26glvU2eVWbePEBRsKZXwiFXS0qcGOyvQ2PNxDNLaEKpaHNVYpIRF09R_GUlZnFd4MAmc3F9lzNTVUnofTjOjXjXyvybBpGtfwCtRsBQIUUcleIBfjtcBbkAQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

• Lalu simpan template sobat

Sekarang kode CSS sudah selesai di pasang selanjutnya kita masuk ke tahap Cara memasang artikel terkaitnya.

• Masih di dalam edit template cari kode ini <data:post.body/> " Biasanya ada lebih dari 1 cobalah pilih yang sesuai dengan template sobat atau coba satu persatu "
• Selanjutnya masukan kode di bawah ini tepat di bawah kode tadi

<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'/>
</b:if>

• Setelah menurut sobat pas tinggal simpan template sobat

Selamat Artikel terkait atau related post berhasil terpasang jika gagal silahkan tinggalkan pertanyaan di kolom komentar.