Membuat Releated Post dengan Gambar

Dear My Best Frinds,,,

Dalam dunia Blogging hal yang paling sulit adalah membuat visitor dan pengunjung kita betah didalam Blog kita selama mungkin. Beberapa survey menyatakan bahwa pengunjung kebanyakan paling lama di dalam sebuah BLOG ataupun WEB hanya selama 5 menit. Dan kebanyakan dari mereka hanya melihat yang mereka perlukan saja tanpa mengetahui berapa banyak content ataupun article didalamnya. Dengan membuat Releated Post widget banyak Blogger berharap membuat mereka membaca beberapa article yang BLOG tersebut miliki. Tetapi ada lagi cara supaya mereka mau melihat segala macam content ataupun article yang kita miliki, yaitu membuat releated Post dengan gambar atau biasa disebut Thumbtail.



Caranya memang sedikit rumit tapi qu coba membuatnya mudah untuk kalian semua. Ikutilah langkah berikut :

1. Login ke akun blogger kalian
2. Klik Edit HTML dan beri centang Expand Widget Template, usahakan untuk selalu menyimpan template kalian sebelum merubah template.
3. Kemudian cari kode </head>
4. Diatas kode tersebut tambahkan kode berikut ini:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. kemudian Cari kode di bawah ini:

<div class='post-footer-line post-footer-line-1'>

atau kalau kode diatas tidak terdapat pada Edit HTML template anda, bentuknya bisa seperti ini:
<p class='post-footer-line post-footer-line-1'>

6. Letakan kode di bawah ini tepat di bawah salah satu kode di atas:

<!-- Related Posts with Thumbnails Code Start-->
<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>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Klik Save Template dan silahkan lihat hasilnya.

Keterangan:
Tulisan yang berwarna merah diatas adalah jumlah tampilan Related Post. Silahkan anda ganti angka 5 pada var maxresults=5; sesuai keinginan anda. Kita juga bisa merubah tulisan Related Posts pada var relatedpoststitle="Related Posts"; diatas dengan judul lainnya.

Dengan Releated Post yang memiliki gambar diharapkan pengunjung BLOG ataupun WEB kalian memiliki ketertarikan untuk membuka article ataupun Poting kalian lainnya. Memang cara ini sudah banyak yang mempraktekkan dan hasilnya bisa dilihat sendiri.

Ada cara lain yang nggak bakalan bikin kalian ribet dengan merubah ubah Template kalian dan bisa sedikit meringankan beban loading time BLOG ataupun WEB kalian yaitu dengan menggunakan LinkWith. Kalian bisa kunjungi situsnya dan daftar secara gratis agar mendapatkan widget tersebut.

Cukup sudah tutorial qu kali ini semoga kalian semua bisa mempraktekkannya. Banyak jalan menuju ke Roma tapi hanya ada satu jalan Ke BLOG qu…hehehe…nggak nyambung kaleee……Terima Kasih buat para Blogger dan Netter Indonesia, Salam Kenal dan Keep Blogging……..

Best Regard


Natha Lia

Artikel Lainnya :