Menunggu...

Membuat Related Post Mirip Widget LinkWithin

Sahabat blogger pemula yang baik hatinya, sepertinya sobat tidak asing lagi dengan widget related post dari linkwithin, dimana wiget ini menampilkan artikel terkait di bawah postingan lengkap dengan thumbnailsnya. Berikut screenshot widget linkwithin yang biasa kita gunakan :


Nah sahabat blogger pemula kali ini saya akan share cara membuat artikel terkait mirip dengan widget linkwithin, untuk mempersingkat waktu mari kita mulai pembahasanya..
  • Login ke akun blogger sobat
  • Masuk ke pengaturan Template
  • Klik Edit Template
  • Cari kode </head> dan letakkan kode berikut tepat di atasnya
<!--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-->
  • Langkah selanjutnya adalah cari kode  <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'> 
  • Letakkan kode berikut 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-->
  • Simpan template
Catatan :
Perhatikan tulisan yang berwarna biru :
  1. var maxresults=5; ganti angka 5 untuk menambah atau mengurangi jumlah artikel terkait yang ingin di tampilkan
  2. var relatedpoststitle="Related Posts"; ganti atau sesuaikan dengan titel yang sobat kehendaki
Selamat dan semoga berhasil
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 14 komentar:

avatar

bikin loding berat nggak sob ? :)

avatar

Kalau sudah berhadapan yang begini saya tambah mumet
nyimak aja ya

avatar

Terimakasih mas adji sharingnya, langsung di coba :D
Salam sukses !

avatar

Ilmunya sangat bermanfaat mas :)

avatar

kelihatan bagus ya mas, mau pasang ah kapan kapan x-)

avatar

widget related post yang satu ini memang keren,,,
thnx sob udha share..

avatar

tapi kayanya kerenan widget MKR thems yang dipake kang Heri deh :)

avatar

saya cukup melihat dari luar saja mas, belum ada niat untuk menerapkannya.
semoga banyak yang nyari deh mas

avatar

punya ane kok ga muncul2 ya,,,,

avatar

sepertinya related post blog desa perlu dipasangi yang model gini nih...tuh liat azh ngga ada related post nya masa blog desa mah...unik atau katrok ya kalo gituh...?

avatar

keren juga nih, tapi template saya untungnya udah otomatis mas, jadi tak perlu diubah-ubah lagi hehe

Makasih udah berbagi

avatar

Pengen nyoba nanti,,,makasih gan

avatar

gk muncul knapa ya

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda