Blogermie.com: Memasang Related Post Terbaru dengan Judul dan Thumbnail Gambar

06 November 2011

Memasang Related Post Terbaru dengan Judul dan Thumbnail Gambar

Bila Sobat Blogger mampir di blog ini,dan kebetulan membaca beberapa artikel yang saya buat, pasti banyak ditemukan sederetan judul tulisan lain yang menarik di sisi kanan sidebar, sampai anda bingung memilih mana yang mau dibaca duluan. Nah, itulah yang disebut dengan related post. Kita bisa artikan dengan tulisan yang berhubungan, posting terkait, artikel lain yang berhubungan, dan seterusnya.

Contohnya terlihat seperti Gambar di bawah ini:

Related Post Terbaru dengan Judul dan Gambar

Contoh 1 Merupakan Related Post tanpa gambar (Related Post With Title), dan hanya menggunakan Judul Posting Saja, Sedangkan Pada Contoh 2 adalah Related Post dengan Gambar (Related Post With Thumbnail Image). 1 Hal yang berhasil saya analisa terhadap 2 jenis thumbnail ini ternyata menggunakan Script yang sama, Yakni menggunakan Script Jason. Thumbnail image seperti ini sebenarnya bisa kita terapkan menggunakan Widget Link WIthin, Untuk lebih jelas cara memasang Widget LinkWithin,atau Sobat bloger bisa mengunjunginya di http://www.linkwithin.com/ untuk panduan

Nah, untuk membuat daftar Artikel Yang Saling Berhubungan, Cukup dengan satu kali pengaturan, maka setiap tulisan yang berhubungan akan muncul secara otomatis di setiap postingan. Dengan catatan sebelumnya anda sudah memasang widget label/kategori. Jika belum pasanglah widget tersebut terlebih dulu. Hanya saja jika Para sobat Blogger ingin memasang Keduanya, akan berdampak pada bug Artikel, dimana terdapat eror kode pada  widget Related Post with Title, yang bertuliskan undefined. Ini dikarenakan adanya kesalahan dalam kesamaan artikel tiap label. Terutama pada Format Judul, yang semestinya pada Widget Related Post With Thumbnail harus menampilkan Thumbnail Image saja,tidak menyertakan judul. Untuk menyiasati hal tersebut, lebih baik pasang widget related post satu diantaranya saja.

Nah, Jika belum tau cara memasang Widget Related Post With Title, bisa anda lihat di sini. Jika labelnya sudah dipasang anda bisa lanjut ke langkah berikut:

Related Post Dengan Judul Posting

Untuk membuat daftar Artikel Yang Saling Berhubungan, seperti itu kita tidak perlu melakukan secara manual satu persatu pada setiap posting. Cukup dengan satu kali pengaturan
Langkah I:
  • Masuklah ke halaman Dasbor blog anda lalu klik Design, Klik Edit HTML.
  • Kemudian masukan kode javascript dibawah ini diatas kode  </head> -> jangan lupa disimpan
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
  }
 }
 }
}
function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
}
function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}
function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
   r++;
  } else {
   r = 0;
  }
  i++;
 }
 document.write('</ul>');
}
//]]>
</script>
Kode diatas adalah struktur Script yang berhasil saya adopsi dari Hosting Googlecode.com. Adapun jika tidak ingin repot memasukkan kode diatas karena ribet, Sobat bisa menggantinya dengan Kode berikut:
<script src="http://blogermiescript.googlecode.com/files/Relatedposts.js" type="text/javascript">

Langkah II:
  • Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah 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 != "true"'>,</b:if>
          </b:loop>
        </b:if>
  • Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.
     <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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>
Ganti Kode yang berkedip untuk menampilkan Jumlah Postingan yang akan tampil pada sidebar
  • Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan
Langkah III:
  • Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.
<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>
Langkah IV:
  • Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
  • Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan  Artikel pada kategori yang sama, jika sudah ditemukan, kemudian sisipkan dua kode berwarna merah dibawah ini.
<b:widget id='HTML13' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.

Penulis dibalik Artikel Ini: http://www.o-om.com/ | Cara Menampilkan Posting yang berkaitan

Membuat Related Post With Thumbnail

  • Cari kode <div class='post-footer-line post-footer-line-1'> 
  • Setelah itu, Kopas Kode ini tepat dibawahnya :
<!-- 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.blogermie.com/2011/11/memasang-related-post-terbaru-dengan.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=&quot;a,Articles You May Like:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Ganti Kode yang berkedip untuk menampilkan Judul Postingan yang berbeda pada widget
Kekurangan widget Related Post With Thumbnail ialah, Keterbatasan Jumlah Posting. Jika pada Related Post With Title, kita bisa memasang 10 posting, bahkan lebih, di sini kita hanya diharuskan memajang 5 Posting sekaligus
Heru Prasetyo Blogermie.com Updated at: 11/06/2011 06:15:00 AM

11 komentar:

  1. wahhh pakai linkwithin ya? mantap nih:D ane suka stylenya

    BalasHapus
  2. Tolong hapus satu sob komennya, tadi error

    BalasHapus
  3. makasih sob atas berbagi tipsnya nih...

    BalasHapus
  4. Modelnya bagus sob artikel terkaitnya..abu follow sini

    BalasHapus
  5. @cardiacku: Terima kasih kembali :) trims kunjungannya
    @Abufarras: Langsung ke TKP

    BalasHapus
  6. Kira2 widget relate post dari linkwithin menghambat loading blog tidak ya ?
    Trims..

    BalasHapus
  7. @Rina: Kalau dari pengalaman saya pribadi lebih berat pakai widget linkwithin, karena secara acak, kita dialihkan terlebih dahulu kesitus pembuatnya, baru kemudian difilter dan dialihkan kembali ke alamt link artikel sebenarnya. Kekurangan yang lain adalah jika kita tidak sengaja menghapus konten/ artikel yang kita buat, link yang terhapus tsb akan tetap tercatat di situs Link within. Akibatnya bisa dianggap menjadi phising oleh Googlebot, alias eror kode 404. Selagi kita gak rutin mengeceknya dengan GOOGLE TOOL WEB MASTER

    BalasHapus
  8. Wah komplit sekali penjelasannya rinci bangetz, makasih ilmunya masbro :)

    BalasHapus