Membuat Related Post with Thumbnail

Posted by Abdul Roqib | Friday, January 8, 2010 24 comments
Cara membuat related post with thumbnail. Seperti halnya posting sebelumnya yang telah dibahas yaitu cara membuat related post by categories (artikel yang berkaitan melakui kategories), posting kali ini tidak jauh beda, letak perbedaan yang signifikan pada cara membuat related post with thumbnail adalah gambar. Related post yang ini artinya di lengkapi dengan gambar sehingga akan mempercantik tampilan posting sobat. Untuk lebih jelasnya sebaiknya langsung ke TKP yuk.

Langkah-langkah pasang related post with thumbnail:
1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"

2. Cari kode </head> dan ganti dengan kode di bawah 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/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. Kemudian cari kode

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

jika tidak ditemukan coba cari kode di bawah ini

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

Sekarang tinggal meletakkan kode di bawah ini sesudahnya

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

4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.

var maxresults=5;

5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini

var relatedpoststitle="Related Posts";

Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok. Selamat mencoba...

24 comments: to "Membuat Related Post with Thumbnail"

Lowongan Kerja Bank Of America said...

Nice Info Gan . . . :D

Festival Museum Nusantara said...

thanks langsung di bookmark bro

decals said...

Berarti gambarnya terletak pada javascript ini ya :http://blogergadgets.googlecode.com/files/relatedthumbs21.js

aktual said...

Perlu di coba nih, biar lebih menarik perhatian.Trims info nya

LiLy said...


Langsung copast...
hho..
thx bagi-baginya
^^

YM Invisible Detector said...

Mantap tuh tutorialnya bro,, :)

Inilah Alasan Kenapa Anda Harus Bergabung dengan Oriflame said...

Wah keren euy....ternyata bukan cuma wordpress yang bisa....Blogspot juga bisa

Inilah Alasan Kenapa Anda Harus Bergabung dengan Oriflame said...

Sangat bermanfaat banget infonya sob

gorfy said...

hebatt kk

rahasia sulap said...

mantab teman..
sangat bermanfaat bagi saya yang masih pemula..

bowo said...

izin praktek bozz :)

digital camera said...

mantap langsung praktek ah :)

NusaTV.com said...

keknya perlu dicoba

rheyx said...

langsung coba gan :D manteb dah

Yudh said...

Tak coba dulu gan

sung said...

mantepp lah..

My Family's Album said...

Terima kasih banyak gan,...Sudah saya praktekkan!!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif

bangkit said...

mantap gan tutorialnya, ada yang lebih mudah bagi yang males otak atik html yaitu dengan menggunakan linkwith

obat herbal darah tinggi said...

mantap juga postingnya,,,,mau juga nyoba,,,sangat menarik,,makasih banyak,,

solusi mengobati diabetes mellitus said...

keep blogging moga jadi ilmu yang berguna,,

web said...

bagaimana cara ganti warna teks nya bro? disini kan hitam, saya mau ganti warna putih.

yobento said...

mengagumkan

Hajsmy Al Jihad said...

mkasih sob,, kunjungi juga
http://www.hajsmy.co.cc

Asmara Susanto said...

nice info gan, thanks yah visitback klik disni

Post a Comment

What's your comment about Membuat Related Post with Thumbnail, type in the comment form below. Please Don't Spam.!!!