Cara Memasang Related Post Dengan Thumbnail

Cara Memasang Related Post Dengan Thumbnail, Sebelumnya blog ini pernah membahas tentang
Cara Membuat related juga di bawah postingan di antaranya:
Cara Cepat Dan Mudah Membuat Related Post Dengan Thumbnails.(menggunakan pihak ketiga)
Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll.
dan sekarang kita akan membahas tentang Cara Memasang Related Post Dengan Thumbnail dan tanpa pihak ketiga, alias kita harus memasangnya sendiri di blog sobat.

Sebelumnya saya basa-basi sedikit tentang Related Post Dengan Thumbnail/gambar kali ini, sebenarnya kegunaan related post di bawah postingan sangatlah bagus karna pengunjung setelah melihat/membaca tutorial kita maka meraka dapat melihat tutorial selanjutnya, apalagi jika related post kita mengguanakan gambar, pasti akan semakin menarik pengunjung untuk membaca tutorial selanjutnya, tapi tergantung menarik tidaknya gambar yang kita pasang, judul pun juga akan sangat menentukan ketertaikan pengunjung untuk membaca tutorial kita selanjutnya.

Oke dah segitu dulu basa-basinya walaupun gak nyambung, hehehe . . .

Kalo sobat ingin Memasang Related Post Dengan Thumbnail di bawah setiap postingan blog sobat,sobat cukup ikuti langkah-langkah berikut, cukup mudah kok caranya!

contoh related post dengan thumbnail

1. Log in ke blogger.

2. Pada Menu klik Rancangan ➨ edit HTML ➨ centang  Expand Template Widget, download dulu template sobat untuk mengantisipasi bila ada kesalahan..

3. Selanjutnya cari kode </head> ,jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML, jika sudah ketemu letakkan kode dibawah ini tepat diatasnya.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEimGc7lM5CM75sX0WO_V_oOtbvhphRd-f23M8QjAJStm3VtfjzWKef9o15WEvRuX0ziJd3AC7R2Nnk2epZMu9UnEh1cff118yjhpBBaE_io6i5Ja7nH7L1V4_BGw2ase81qwxyRCNLo-NE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan:
Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, sobat bisa merubahnya sesuai keinginan sobat.
Kode yang berwarna biru adalah judul dari widget related postsnya, sobat bisa merubahnya sesuai keinginan sobat, seperti artikel terkait dan sebagainya
.
4. Cari kode <data:post.body/> (jika sobat sudah memasang radmore otomatasi biasanya ada dua atau tiga kode <data:post.body/> jadi letakkan di bawah <data:post.body/> yang kedua ya.

<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Klik save template.

Selesai sudah langkah-langkah Cara Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!