Related Posts Thumbnails - Dua Jalan, Sebuah Pilihan

Apakah Anda sudah tahu apa itu related posts? Related posts adalah daftar artikel yang berkaitan dengan konten. Penambahan related posts dianggap dapat menambah pageview suatu blog atau sekedar ajang promosi artikel lama. Dulu, kebanyakan blogger memasang related posts biasa di bawah postingan mereka. Sekarang dengan munculnya Related Posts diserati gambar, blogger berlomba-lomba memasangnya karena dianggap akan lebih mempercantik blog dan menarik perhatian. Jika blogger lain membahas bagaimana cara membuat related posts with thumbnails, saya memberikan lebih kepada Anda fenomena dibalik itu semua. Ada dua cara untuk membuatnya dan saya paparkan beberapa hal yang bisa Anda jadikan pertimbangan.

1. Related Posts Secara Manual
Cara ini adalah dengan menambahkan semua script secara manual termasuk css nya.

Kelebihan:
- Loading widget lebih cepat
- Anda bisa customisasi/edit sendiri dengan mudah sesuai keinginan, termasuk keterangan seperti, "Artikel Berkaitan", "Related Posts" dan lain-lain.

Kekurangan:
- Jika Anda perhatikan dengan script seperti di bawah ini (saya tidak tahu kalau ada yang punya script lebih mantap) penampilan artikel berkaitan kurang maksimal. Related posts yang ditampilkan cenderung hanya berputar-putar pada beberapa artikel yang 'paling' baru (tentunya dengan label yang sama). Sementara artikel lama jarang mendapatkan kesempatan tampil.

2. Related Posts Mudah Linkwithin
Pembuatan cara ini akan lebih simple karena Anda cukup mengikuti beberapa instruksi dan widget terinstall otomatis.

Kelebihan:
- Cara pembuatan simple
- Artikel yang muncul dalam related posts akan lebih acak, lebih memungkinkan artikel lama tampil.

Kekurangan:
- Sulit untuk customisasi, sehingga akan sulit bagi Anda mengubah , "You Might Also Like" (keterangan standart) menjadi sesuai keinginan Anda.
- Dibutuhkan load lebih lama

Cara Membuat Related Posts Manual
- Login ke blogger
- Tata Letak
- Edit HTML, centang Expad Widget Templates
- Cari kode </head>
- Letakkan kode berwarna biru di bawah ini di atas </head>

<!--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-->

- Cari kode <div class='post-footer-line post-footer-line-1'>
(jika tidak menemukan mungkin kodenya <p class='post-footer-line post-footer-line-1'>)
- Tambahkan script biru berikut di bawahnya

<!-- 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-->

- Yang berwarna merah bisa Anda ganti dengan jumlah related posts (5) dan judul/keterangannya (Related Posts)
- Simpan Template

Nah artikel erkaitan dengan gambar Anda telah jadi


Buat Related Posts Otomatis
- Buka http://www.linkwithin.com/learn
- Masukkan saja email Anda, URL blog Anda, jumlah related posts dan platform
- Kalau sudah klik Get Widget
- Akan muncul halaman baru, klik Instal Widget
- Muncul Jendela Penambahan Elemen, klik Menambah Widget

- Maka proses selesai... related posts sudah terpasang


Tips +: Jika Anda Ingin menampilkannya Setelah Readmore Saja...
- Linkwithin bisa memperlambat akses halaman blog, secara default akan tampil di bawah setiap judul posting. Nah, jika halaman utama Anda terdiri dari 3 judul dan maka akan terjadi load linkwithin 3 kali juga. Untuk mengakalinya kita gunakan trik gadget di bawah postingan. Pada halaman utama linkwithin tidak tampil, hanya tampil setelah pembaca klik salah satu artikel kita atau klik readmore...
Bagaimana cara membuat seperti itu?
- Pada saat muncul halaman Penambahan Elemen, klik Edit Content (jangan langsung di add widget, kita hanya akan mengambil scriptnya)
- Ambil script yang tertera disitu (copy di word atau yang lainnya)
- Tambahkan kode seperti di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/><em>
Masukkan script dari Edit Konten tadi disini
</em><br/></b:if>

- Nah selanjutnyakode dari edit content yang telah ditambahi kode berwarna tersebut, letakkan di bawah <div class='post-footer-line post-footer-line-1'>
- Simpan template
- Sementara jendela penambahan widget dari linkwith in tadi di close saja dan tidak usah dilanjutakan, kita hanya mengambil scriptnya :)

Semoga bermanfaat....