728x90 AdSpace

HEADLINE NEWS

28 Juli 2010

Pada tutorial sebelumnya saya pernah membahas bagaimana cara membuat related post tampil di sidebar, pada postingan kali ini saya akan membahas bagaimana cara membuat related post/artikel yang berhubungan dengan thumbnails/tampil dengan gambar. dulu ketika saya menggunakan trik ini masih default menggunakan linkwithin tapi kini dengan modifikasi kita sendiri kita dapat membuatnya, sedikit modifikasi namun hal itu berpengaruh buat blog sobat semua.
banyak artikel yang menerangkan mengenai trik ini, namun keinginan saya untuk berbagi tidaklah sekecil kemungkinan SEO blog ini masuk di urutan teratas google :D. saya sempat menggunakan juga related post yang tampil dibawah posting yang tanpa thumbnails tapi setelah dihapus dan memasang related post dengan thumbnails ternyata lebih menarik apalagi buat blog yang diperuntukan download software, design itu sangat diperlukan.
lalu, bagaimana cara membuatnya? mari kita ikuti tutorialnya.
Login ke account blog anda
Klik rancangan lalu klik edit html
Klik expand widget templates

Cari kode ini </head>

Kemudian ganti dengan kode dibawah 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://sites.google.com/site/asrizalofficialweb/javascript/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>
Sekarang cari lagi kode dibawah

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

Jika tidak menemukan kode diatas, coba cari kode seperti ini

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

Kalo sudah ketemu, tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.
<!-- 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-->
Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode dibawah ini:

var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts";

Selamat mencoba :)


Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

2 komentar:

  1. Wow asik juga nih bang tutorialnya jadi pengen nyoba nih...

    BalasHapus
  2. Thank's infonya kawan, cobain ah...

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Membuat Related Post + Thumbnails Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top