Cara mudah memasang Related post dengan Thumbnail

Memasang Related Post atau Artikel terkait selain dapat berfungsi untuk mempermudah Pengunjung untuk membaca artikel lain yang berada di blog sobat juga dapat menambah nilai kualitas SEO pada blog sobat.

kenapa dikatakan mempermudah pengunjung?, karena apabila seorang pengunjung ingin membaca artikel lainnya tetapi tidak ingin meninggalkan blog, pengunjung dapat mengambil jalan pintas dengan cara mengklik artikel lainya yang terdapat di bagian bawah postingan.

berikut tampilan screenshot related post dengan thumbnail yang terdapat di blog saya :

memang terlihat masih sedikit postingan saya , karena saya seorang pendatang baru di dunia blogging :).

bagaimana sobat?, tertarik untuk memasang related post dengan thumbnail di blog sobat juga?.

jika tertarik berikut saya paparkan caranya :

• Login Dahulu ke Akun Blog sobat
• lalu pilih rancangan, klik Edit HTML
• jangan lupa untuk mencentang Expand Widgets
• Cari kode </head> , setelah ketemu tambahkan kode dibawah ini tepat diatas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEgM8swoAIWpxlp9rMsNVFwQKndM_-b3sKFqqPh9H-WBgz_Qh-2omuL2iKxhntzOBLt1MAUwNx95rDfXEM8bMd7rXDP7tzIftDHNFLSL27c3P1XE46IsNYa8hMdx9SofUTThCmWoefmXRT0/s400/noimage.png"; var maxresults=5;
var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

* keterangan :

var maxresults=5; menunjukkan jumlah artikel yang akan muncul pada related post

var relatedpoststitle="Related Posts" ganti kata "Related Posts" dengan kata kata sesuai kemauan sobat.

• setelah itu, cari kode <data:post.body/> kemudian copy kode dibawah ini tepat dibawah kode <data:post.body/>.

<!-- Related Posts with Thumbnails Code Start-->
<!-- 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>
<!-- Related Posts with Thumbnails Code End-->

* jika soba menemukan banyak kode <data:post.body/>, pilihlah kode <data:post.body/> yang kedua.

• Selesai, lalu save dan lihat hasilnya, related post akan terlihat sama seperti punya saya.

sekian postingan saya hari ini tentang Cara mudah memasang Related post dengan Thumbnail, semoga dapat bermanfaat buat sobat!.

jika ada yang ingin ditanyakan seputar Cara mudah memasang Related post dengan Thumbnail dapat langsung berkomentar dibawah.