Bagaimana Membuat Artikel Terkait Horizontal Dengan Thumbnail?

 Membuat artikel terkait pada tiap postinga dapat memberikan manfaat yang besar kepada pengunjung blog. Mengapa? Karena dengan adanya artikel terkait, pengunjung blog akan membaca artikel yang berhubungan dengan yang sedang dia baca. sehingga pengunjung blog tersebut akan terasa terbantu dalam menyelesaikan masalah yang sedang dia alami.

Kenapa saya berkata seperti itu, karena pengunjung yang datang ke blog kita dan membaca artikel-artikel kita adalah pengunjung yang sedang mencari-cari jalan keluar untuk permasalahanya. Bukankah kita membuat artikel untuk menyelesaikan suatu permasalahan? Ya, benar kita membuat artikel itu untuk membantu menyelesaikan permasalahan orang banyak.

Jadi seperti yang sudah saya katakan tadi, Jika kita memasang artikel terkait horizontal pada blog. Maka Pengunjung blog tersebut akan mengunjungi artikel yang berhubungan dengan yang sedang di baca tersebut, untuk mempercepat membantu menyelesaikan permasalahanya. Kalau begitu saudara harus membuat artikel-artikel berkualitas yang berhubungan dan berkaitan dengan yang pengunjung cari-cari.

Lalu Bagaimana Membuat Artikel Terkait Pada Blog?

Sebenarnya artikel terkait pada blog ada yang bermacam-macam atau bervariasi. Kenapa sayang bilang begitu? karena yang saya tahu artikel terkait/Related Post itu biasanya ada di bawah postingan artikel dan  ada yang berbentuk Horizontal dan Vertikal yang biasanya di sertai dengan gambar atau Thumbnail. Namun tidak jarang juga ada artikel terkait sederhana yang biasanya di sertai Scrolling. Namun pada artikel saya kali ini saya akan Membuat Artikel terkait Horizontal dengan Gambar.

Membuat artikel terkait horizontal pada blog sangatlah mudah jika anda mengikuti langkah-langkah di bawah ini dengan baik dan benar :

• Login dengan akun blog saudara
• Pilih menu template, lalu klik tombol Edit HTML
• Cari Kode <data:post.body/>
• Arahkan pointer pada kolom HTML kemudian klik mouse, setelah itu tekan Ctrl + F atau F3 Untuk mempermudah pencarian kode.
• Simpan script di bawah ini tepat di bawah 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

• Kalau sudah, cari lagi kode </head>
• Copy kode berikut tepat di atas kode </head>

 <!--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 h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8BMBLDvMjSgj2UTGxNS2zkPrrYhuUEl_gHwb5OE3MQ-1Iv1JTPzdQMUXhj9k7qyVStyzQoapZdvdQXg3uM1rAc1pdHTZRRqgoSEDqmqjLH5R7qk8iIwxAdRXiR32yXkSrlsm1MDxT20/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Lainnya&quot;;
</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-->

• Klik simpan template dan lihat hasilnya

Keterangan Tutorial di Atas:

1. Kode berwarna Merah  ganti sesuai keinginan anda
2. Kode berwarna Biru adalah jumlah artikel yang ingin ditampilkan pada artikel terkaitnya nanti, silahkan ganti sesuai selera anda
3. Jika kode <data:post.body/> lebih dari satu, silahkan lanjut ke kode <data:post.body/> selanjutnya sampai artikel terkaitnya terlihat di bawah postingan artikel.

Hasilnya kurang lebih akan seperti ini:

Semoga dengan  memasang widget artikel terkait horizontal ini jumlah pageview blog anda meningkat dari sebelumnya.