Membuat Related Post Dengan Gambar Thumbnails di Blogger

Related Post (bahasa kerennya) atau Posting Yang Berkaitan (bahasa Indonesianya) berguna untuk memudahkan pengunjung blog / web untuk menemukan artikel / posting yang berkaitan dengan halaman yang sedang ditampilkan. Biasanya pada bagian related post menampilkan postingan lain pada sebuah blog / web berdasarkan label yang sama, tepatnya random posting dengan label yang sama. Kegunaan untuk pemilik blog sendiri adalah untuk meningkatkan page view. Karna dengan adanya related post tersebut, pengunjung diajak untuk melihat postingan lain yang berkaitan dengan postingan yang sedang dibaca pada saat itu, dan sebagian besar pengunjung pada sebuah blog / web tertarik untuk membuka dan membaca postingan yang tampil pada bagian related post.

Oke biar ga' kelamaan, langsung aja aku tulis langkah² untuk membuat related post pada blogger. Dan agar tampil menarik, related post yang dihasilkan akan dilengkapi dengan gambar thumbnails.

1. Buka LinkWithin sebagai langkah awal pembuatan related post.
2. Isikan data blog pada bagian yang udah disediain, kemudian klik tombol "Get Widget!".
   
   
   • Pada kolom Platform, pilih Blogger.
   • Kolom width untuk menampilkan jumlah link pada widget related post kamu nantinya. Semakin banyak link + gambar yang ditampilkan, akan semakin lebar widget related post kamu.
   • Centang "My blog has light text on a dark background" jika warna latar belakang blog kamu gelap.
3. Klik link "Install Widget" untuk menyematkan widget related post di blog.
   
   
4. Pada halaman selanjutnya, klik tombol "MENAMBAH WIDGET".
   
   
5. Kamu akan dibawah pada halaman "Rancangan - Elemen Laman". Seret widget related post pada tempat yang kamu inginkan, biasanya dibawah "Posting Blog". Kemudian klik tombol "SIMPAN".
   
   

Tapi langkah² di atas sepertinya akan sedikit merubah tampilan blog, jika pada blog kamu mengandung "Read More". Karna related post akan keluar tepat di bawah link read more pada halaman awal pertama blog kamu dibuka. Nah, biar related post hanya ditampilkan pada saat link read more di klik, caranya seperti ini.

1. Karna sebelomnya kamu udah punya widget related post, kamu tinggal mengcopy scriptnya. Buka halaman "Rancangan - Elemen Laman", klik "Edit" pada widget "LinkWithin". Copy semua script pada kolom "Konten". Kemudian klik tombol "Hapus".
   
   
   
   
   
2. Paste script yang dicopy tadi ke notepad. Tambahkan kode berikut tepat di atas script related post
   

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

   dan script di bawah ini tepat di bawah script related post.

   </div></b:if>

   Sehingga hasilnya akan tampak seperti di bawah ini.

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

   <script>

   var linkwithin_site_id = 1099541;

   </script>

   <script src="http://www.linkwithin.com/widget.js"></script>

   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a></div></b:if>

3. Masuk ke halaman "Rancangan - Edit HTML". Centang "Expand Template Widget".
4. Cari script di bawah ini.
   

   <data:post.body/>

   Untuk memudahkan pencarian gunakan fasilitas Find dengan perintah Ctrl+F kemudian ketik / copas script di atas pada kolom Find yang berada di bagian bawah browser kalo kamu pake Mozilla.
   
   
5. Paste script yang berada pada notepad dibawah script di atas. Hasilnya akan tampak seperti di bawah ini.
   

   <data:post.body/>

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

   <div class="linkwithin_div">

   <script>

   var linkwithin_site_id = 1099541;

   </script>

   <script src="http://www.linkwithin.com/widget.js"></script>

   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a></div></b:if>

6. Klik tombol "SIMPAN".
   
   

Widget related post udah selesai di buat dan ditambahkan ke blog kamu. Mungkin ada sedikit bagian yang pengen kamu edit. Seperti pada tulisan "You might also like :" yang terkesan kurang pas atau standart banget.

Oke kamu bisa menggantinya dengan cara seperti ini.

1. Tempatkan script di bawah ini tepat di bawah script <head>
   

   <script>linkwithin_text='TEKS DISINI:'</script>

2. Ganti tulisan berwarna biru dengan tulisan yang kamu inginkan, misalnya "Baca Artikel Lainnya :" tanpa tanda petik tentunya.
3. Kemudian klik tombol "SIMPAN".
4. Dan hasilnya akan tampak seperti pada gambar di bawah ini.
   
   

Oke sekarang blog kamu udah dilengkapi dengan widget related post. Selamat meningkatkan page view blog kamu.