Cara Membuat Artikel Terkait Dengan Gambar (Thumbnail)

Assalamu'alaikum Wr.Wb

Seperti biasanya saya menyapa sobat reader artikel riev-bapo dulu, apa kabar ? pasti baik donkk :D Amiiinn... Nah sobat tahu nggak sih ? kalo artikel terkait atau related post itu sangatlah penting dalam sebuah blog yang sangat mengutamakan SEO, tahu nggak kenapa ? karena dengan adanya artikel terkait atau related post, pembaca/pengunjung tidak akan bosan membaca artikel blog kita. Sehingga Bounce Rate akan semakin kecil dan lebih singkat untuk melihat aritkel yang lainnya.

Nah, kali saya akan berbagi tentang tutorial blog yaitu Cara Membuat Artikel Terkait Denga Gambar (Thumbnail), berikut ini adalah contoh artikel terkait yang menggunakan gambar (Thumbnail). Mari kita intip bareng-bareng yuk ... !!

Screenshoot ::

Cara membuatnya juga cukup mudah koq, sobat bisa ikuti langkah-langkah di bawah ini, jika blogger sobat ingin di percantik salah satunya dengan (Thumbnail) dan juga bisa dengan lainnya yang terdapat disini.

1. Pastinya login ke blog donk
2. Pilih menu Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode </head> (gunakan Ctrl + F atau F3 untuk mempermudah pencarian)
5. Copy kode script di bawah ini dan pastekan tepat dia atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1fv-tuPXf9nZAr2FZh1zN856UOEPZiobhzq_M6728App2HU5lULBWUIPLeOH147P9HSy7dVmtZhdiHCIIQ8NXRaSqKAmF4TllscMZosGvS9tqW1Lqp6naGG90F6d1z-cHtthTst38MXDE/s1600/No+Image.jpg";
var maxresults=6;
var splittercolor="#000000";
var relatedpoststitle="Silahkan Baca Yang Lainnya:";
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>

6. Selanjutnya sobat cari kode berikut (jika ada dua kode, pilih bagian yang kedua)

<data:post.body/>

7. Jika kode diatas sudah ketemu, Sekarang copylah dan pastekan kode script dibawah tepat dibawah kode <data:post.body/> ::

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

8. Klik Simpan Template.

NB:
Berikut ini adalah kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan yang berwarna biru sesuai dengan keinginan sobat masing-masing ::

Warna Teks var splittercolor="#000000";
Judul artike terkait var relatedpoststitle="Silahkan Baca Yang Lainnya:";
Menampilkan jumlah artike yang terkait yang muncul max-results=6

Okeh sobat, demikianlah yang bisa saya bagikan tentang tutorial blog yang menjelaskan Cara Membuat Artikel Terkait Dengan Gambar (Thumbnail). Mohon maaf jika ada kesalahan yang terdapat di artike ini atau pun artikel yang lainnya. Terima kasih !!

Wassalamu'alaikum Wr.Wb