Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar

Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar. Masih sama ni topik postingan kita dari sebelumnya yaitu tentang membuat artikel terkait / related posts tapi kali ini khusus yang ber-gambar. Dengan menggunakan artikel terkait / related posts yang disertai gambar akan makin menarik minat pembaca untuk mengkliknya.

Lalu bagaimana sih cara membuat dan memasang artikel terkait / related posts dengan disertai gambar ?!
Yups mas bro dan sis semua mari kita ikuti cara - cara dibawah ini step by step ..

Cara Membuat Artikel Terkait / Related Posts Dengan Script Gambar

Seperti biasa ketika ingin mengedit template blogspot, pertama masuk di akun blogger.com dan pilihlah opsi template

Menuju di halaman berikutnya, pilih tombol Edit HTML

Selanjutnya ada peringatan semacam ini, langsung saja klik tombol Lanjutkan

Sebelum mengedit template blogspot, jangan lupa centang kotak Expand Template Widget,

Agar artikel terkait / related post ini muncul di bawah setiap posting blog teman, letakkanlah script artikel terkait / related post tepat dibawah kode <div class="post-footer-line post-footer-line-1">.

<!--Kode Artikel Terkait / Related Posts dengan Gambar Dimulai-->
<!-- 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>
<!--Kode Artikel Terkait / Related Posts dengan Gambar Berakhir-->

Selanjutnya teman semua tambahkan script css dibawah ini kedalam template blogger kalian dan letakkan diatas kode ]]></b:skin>

#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:red;
}
#related-posts a:hover {
background-color:#pink;
}

Jangan lupa agar artikel terkait / related posts ini bisa jalan masukkan link javascript dibawah tepat diatas tag </head>

<!--Kode Artikel Terkait / Related Posts dengan Gambar Dimulai-->
<!-- remove -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aRPGASBsQDr5vdEyF2PHWTow5_pf1KgaDWsW__mp-pgMan01fQvg0TlD6Vyi541UVzsGjC9mk_MIHrG_tigFf46_7g1uGRu2bdd9jAvc_JnUT0pkNlw6rkMlSYcq1HVJH6xvAMmr2gQe/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Baca Artikel Terkait Lainnya :";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Kode Artikel Terkait / Related Posts dengan Gambar Berakhir-->

Keterangan : Angka yang berwarna merah ini bisa teman ganti dengan angka lainnya untuk menentukan jumlah artikel terkait / related posts dan bila ingin mengganti judul widget ini ganti kalimat berwarna hijau dengan kalimat kalian misal, Baca juga artikel terkait lainnya.

Langkah memasang script artikel terkait / related posts sudah selesai. Sekarang teman semua harus menyimpan hasil pengeditan template ini. Klik tombol Simpan Template dan Tutup.

Moga - moga makin banyak jumlah pageview yang bisa kita dapatkan bila memasang script artikel terkait / related post dengan gambar ke dalam blog kita.
Ok, selamat mencoba dan semoga sukses teman...