Cara Memasang Widget Related Post Dengan Thumbnails

Cara Memasang Widget Related Post Dengan Thumbnails. Pada postingan kali ini saya mau coba share tips blog lagi dimana postingan ini sedikit melengkapi catatan saya sebelumnya tentang related post dari layanan linkwithin. Widget related post atau artikel terkait memang merupakan salah satu widget yang wajib dipasang pada blog (menurut saya). Selain memudahkan pengunjung untuk membaca artikel-artikel lainnya, juga akan berpengaruh pada optimasi seo on page suatu blog. Untuk hal seo blog saya kira sudah menjadi salah satu agenda utama blogger pada blog yang sementara dikelolah. Widget related post ini pun mempunyai berbagai macam model yang bisa kita pasang pada blog tergantung dari selera kita agar sesuai juga dengan tampilan blog. Nah, langkah-langkah memasangnya pada blog, sobat bisa ikuti cara-cara berikut.

Langkah Pertama
Seperti biasa silahkan login dulu ke akun bloggernya trus pada halaman dasbor blog klik nama blognya. Pada halaman ikhtisar atau overview, silahkan pilih menu template dan klik Edit HTML trus klik lagi lanjutkan. Pada halaman edit HTML, centang pilihan Expand Widget Template. Kemudian silahkan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>.

<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/AVvXsEhb9ahY4KZEDPth2vyX3tgnfP_ovuEVfVUdiuphZAizpaymZZ2j2mljLK9hHimzHz-bK9iXmoNPQ8XYfqwFGlST1_itZCtfQ_PVIcTS749TCpkfN8MTmj94fWIjHJI8W6XRVp1b0IKverQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://share-with-agung-talaga.googlecode.com/files/kode-related-post-with-thumbnail.js' type='text/javascript'/>

Untuk kode di atas, sobat bisa merubah angka yang saya kasih warna biru dengan keinginan sobat berapa artikel yang akan ditampilkan pada widget related post-nya serta silahkan juga ganti kata Related Posts dengan judul widget yang sobat inginkan. Kemudian link gambar yang saya kasih warna biru merupakan link gambar default yang akan ditampilkan pada widget related post jika artikel pada blog sobat tak disertakan dengan gambar. Sobat bisa menggantinya dengan link gambar yang sobat inginkan.

Langkah Kedua
Pada langkah kedua ini, silahkan cari lagi kode <div class='post-footer-line post-footer-line-1'>, pada template blog saya kode ini ada dua maka silahkan letakkan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.

<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>

Jika sudah selesai semuanya diatur sesuai dengan tampilan blognya, silahkan save templatenya dan coba buka salah satu artikel sobat, apakah widgetnya sudah muncul atau belum. Jika belum muncul, silahkan tanyakan kembali. Kurang lebih hasil pemasangan kode di atas seperti gambar di bawah ini.

Demikian informasi dari saya tentang tips blog yaitu Cara Memasang Widget Related Post Dengan Thumbnails, semoga bermanfaat buat sobat sekalian. Pertanyaan dan kritikan silahkan sobat tuliskan pada komentar di bawah ini...