Artikel Yang Paling Populer

Tuesday, September 01, 2009

Cara Membuat related Post Dengan Thumbnails

| Tuesday, September 01, 2009 | 21 comments

Menambahkan related post atau artikel yang terkait pada setiap postingan dapat meningkatkan trafik kunjungan blog anda.Pengunjung akan mudah menemukan dan membaca artikel-artikel terkait pada blog anda.Lebh menariknya lagi related post ini disertai dengan gambar.Cara membuat related post dengan thumbnails adalah sebagai berikut.

1.Login pada blogger.
2.Klik Layout pada Dasboard.
3.Klik Edit HTML pada Layout dan jangan lupa centang Expand Widget Template
4.Cari kode

</head>

5.Dan ganti kode tersebut 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://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

6.Selanjutnya temukan kode

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

atau bila tidak ditemukan, cari kode seperti dibawah ini

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

7.Letakkan kode berikut setelah kode pada langkah 6

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

8.Untuk menampilkan jumlah post dapat diedit dengan mengganti angka pada
var maxresults=5;.
9.Untuk mengganti nama "Related Post" dengan "Artikel Yang Terkait" dapat diganti pada
var relatedpoststitle="Related Posts";

21 comments:

Fitri Alifah - kenali dan kunjungi objek wisata di pandeglang said...

contoh tampilannya seperti apa mas? kayaknya keren nih..pake thumnails :)...owh setelah tak scroll ke atas...contohnya kayak di sidebar postingan terbaru itu ya mas

Kenali dan Kunjungi Objek Wisata di Pandeglang

Zippy said...

Kayak'x keren juga nih...
Ntar kapan2 tak coba, sekarang masih setia aja tanpa "related post" :D

hill said...

kerennn tipsnya :)blog sy lebih cantik kyknya klo pake ini...thnxs kawan :)

Franky said...

@fitri alifah,kalau yang ini akan muncul dibawah postingan.Tapi kalau yang seperti pada postingan terbaru lain lagi caranya.Anda bisa lihat pada postingan lainnya pada blog ini yang membahas hal tersebut.
@zippy, penambahan related post dapat meningkatkan trafik.Pengunjung akan mudah menemukan postingan lainnya.
@hill,silakan dicoba pasti keren abis sobat

Anonymous said...

bos, berlaku gak buat wordpress (berharap mode on)
makasih..
salam rimba raya lestari..

oRiDo™ said...

saya coba aaahhh di blogspot saya..
:)

Belajar membuat website said...

Sudah dicoba tapi ngak mau keluar mas related postnya.scriptnya yang asli lagi dari http://bloggerplugin.org.

Unknown said...

siiip....biar baru nemu akhirnya aku temukan jodohku hehehe...setelah mencoba berbagai tips inilah yang paling tokcer, thx ya n lam kenal

Franky said...

@dedenia, untuk wordpress tidak berlaku.
@belajar membuat website, coba perhatikan penempatannya apakah sudah benar.Setelah diinstall, biasanya browser harus direfresh.
@my blog, salam kenal balik

mbah cyber said...

Makasih atas infonya,its a nice blog

Franky said...

Mbah cyber, terima kasih mas

†¤ ルディ ¤† said...

misi.... ijin nyobain tips'na......
tqx

†¤ ルディ ¤† said...

eh... mau nanya nich... barusan aq nyobain bwt related post.... berhasil

yg aq mau nanyain toe, related post ini toe munculin artikel yang terkait sesuai label ya?

reyhan fauzan said...

mw nanya nehh..aq udah nyoba n ternyata memang berhasil..tapi background blog aku kan warna hitam..kok tulisan artikel yang terkaitnya jadi gk keliatan..mohon pencerahannya

Masda said...

Thanks gan infonya, langsung olah TKP...

Unknown said...

Thanks..
http://handzmentallist.blogspot.com

kavie said...

dah nyoba tapi kok ga bisa y maz..??

Unknown said...

waduh,gimana caranya ya? aku pasang bolak balik tapi gagal wae,
salam kenal......

Kang Salman said...

Hallo salam kenal, kayaknya banyak yang mengalami masalah ya, oiya aku nitip artikel "cara
Memasang Artikel Berkaitan Memiliki Fungsi Scrool "

Anime Lovers said...

sama gagal juga ~x(

review said...

nice...
Like this so much...
:x







free live streaming sport channels

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Followers

 
© Copyright 2010. yourblogname.com . All rights reserved | yourblogname.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com