Cara Memasang Related Post Dengan Thumbnail

Memberikan menu navigasi yang sederhana dan mudah diakses oleh pengunjung adalah hal yang sangat baik untuk blog kita. Hal ini karena akan membuat pengunjung berlama-lama pada blog kita, dan menjelajahi satu persatu halaman yang tersedia di blog kita. Ini akan berimbas terhadap page view dan SEO blog kita.

Karena page view blog kita meningkat maka akan mengundang para pemasang iklan untuk memasang iklan-nya di blog kita. Dan efek buat SEO-nya adalah Google akan menyukai blog kita karena google suka blog yang memberikan fasilitas menu navigasi yang mudah di telusuri.

Pada beberapa hari yang lalu saya pernah posting artikel Cara Membuat Related Posts Di Sidebar dan Cara Membuat Related Posts Di Bawah Posting  dan kali ini saya akan mengulas kembali artikel tentang related posts, tetapi kali ini berbeda, kita akan menambahkan gambar pada related posts-nya, jadi related post kali ini akan terlihat lebih menarik.

Bagaimana apakah anda juga ingin memasang-nya juga di blog anda? Ikuti langkah-langkah berikut ini.

1.  Log in ke blogger.

2.  Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.

3.  Cari kode </head> dan letakkan kode dibawah ini tepat diatas-nya.

<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts-1 {
float:center;
text-transform:none;
height:100%;
width:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts-1 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-1 a{
color:black;
}
#related-posts-1 a:hover{
color:black;
}
#related-posts-1 a:hover {
background-color:#d4eaf2;
}
</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK0mVIuW_QOTRic0vfTiTckUZ3IgBXmIsRRWURe8aP9e8tJ17EVQ90U81xRuV6DDpFXYcdCKBdkcWomhFJASuKCFxXTNZiK09Kb6Lb4-vt2UJp2uGNld-t1xsvRW8Mj9flwwZfMM00j24f/s1600/no_image.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Bacaan Terkait";
</script>
<script src='http://contents-ente.googlecode.com/files/conten-ente.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, anda bisa merubahnya sesuai keinginan anda.
Kode yang berwarna biru adalah judul dari widget related posts-nya, anda bisa merubah-nya sesuai keinginan anda.

4.   Cari kode <div class='post-footer-line post-footer-line-1'> (biasanya dalam satu template terdapat dua kode <div class='post-footer-line post-footer-line-1'> , jika ada dua pilihlah yang kedua) Dan letakkan kode dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-1'>.

<!-- 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://semilyartrik.blogspot.com/2012/04/cara-memasang-related-post-dengan.html'><img style="border: 0" alt="Cara Memasang Related Post Dengan Thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMonoIB2abuaVOmBnTVpVYQ6D6OR_kM-KeT7coabfoEqN2u_c_gAVhiOQ78R95oYba7i-7-ZniUat9emei4oElWn7bpLfIFmVMhYNHkBFZWOoRq5ccdNAb7Ckt8wA0Ys52OSPW5Uwg4kfv/s1600/tumbnail.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 anda.

Cara Membuat Related Posts Di Sidebar

Related posts widget atau artikel terkait adalah widget yang memunculkan artikel yang berkaitan dengan postingan yang sedang di baca. Cara ini sudah banyak yang menjelaskan di postingan para sahabat Blogger, namun saya juga ingin berbagi pengalaman yang sudah saya kerjakan.

Related posts sangat bermanfaat bagi blog kita terutama untuk SEO dan juga bermanfaat bagi pengunjung. Dengan related posts widget ini, pengunjung suatu blog akan mudah untuk membaca atau menelusuri setiap postingan yang ada di blog kita.

Nah tentunya hal ini akan meningkatkan page view blog kita. Related posts widget ini di buat dengan berbagai bentuk yang menarik agar pengunjung tertarik untuk menelusuri blog kita. Tertarik untuk mencobanya di blog anda? Silahkan ikuti totorial Cara Membuat Related Posts Di Sidebar berikut ini.

1. Log in ke blogger dengan akun yang anda miliki.
2. Pergi menuju ke rancangan » edit HTML » centang kotak expand template widget. Atau bagi yang menggunakan tampilan blogger yang baru, anda tinggal klik template » edit HTML » centang kotak expand template widget.
3. Hampir aja lupa, sebelum melakukan pengeditan, sebaiknya anda memback-up template anda dulu buat jaga-jaga bila terjadi kesalahan dalam melakukan pengeditan.
4. Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>. 

<script src='http://contents-ente.googlecode.com/files/sidebar-ente.js' type='text/javascript'></script>

    5.  Cari kode yang kira-kira mirip seperti ini.

<b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   </b:loop>

        </b:if>

     6.  Kalau sudah ketemu, tambahkan kode di bawah ini di dalam kode di atas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

Sehingga kodenya menjadi seperti ini.

<b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

          </b:loop>

        </b:if>

Keterangan : kode yang bercetak tebal berwarna merah adalah jumlah artikel terkait atau related posts yang akan di munculkan, sedangkan kode yang berwarna hijau adalah kode yang  di tambahkan.

     7.  Save template anda.

     8.  Sekarang anda menuju ke tata letak » tambah gadget » HTML/Java script. Masukkan kode di bawah ini pada kolom yang sudah di sediakan.

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

     9.  Save gadget anda, dan lihat hasilnya.

Sekian dulu tutorial dari saya kali ini tentang Cara Membuat Related Posts Di Sidebar, bagi yang masih bingung silahkan untuk bertanya ya.