Membuat Related Post Dengan Thumbnails

Kali ini PawankCrew Version akan posting tentang "Membuat Related Post Dengan Thumbnails". Dimana Related Post tersebut berbeda dengan Related Post yang dibahas pada artikel ini. Related Post pada artikel sebelumnya hanya menampilkan link judul posting dibawah artikel yang berhubungan dengan artikel yang sedang dibaca, sedangkan related post dengan thumbnails akan menampilkan link judul beserta gambar.

Berikut adalah lagkah-langkah yang harus dilakukan untuk membuat Related Post Dengan Thumbnails :

1. Login ke account blogger anda

2. Masuk ke halaman Edit Html dan jangan lupa beri tanda centang pada "Expand Widget Templates"

3. Cari dan temukan kode </head>

4. Gantilah kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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>

</head>

5. Cari dan temukan lagi kode dibawah ini pada halaman Edit HTML Template blog anda

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

6. Letakkan kode dibawah ini persis dibawah kode diatas

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

7. Simpan Template

Apabila langkah-langkah diatas di lakukan dengan benar coba lihat hasilnya pada blog anda, maka related post dengan thumbnails muncul pada halaman posting.

Semoga bermanfaat.

Mohon Komentar di form dibawah ini, karena komentar anda sangat bermanfaat untuk kemajuan blog saya
Jika ada Pertanyaan atau kritik dan saran : dapat dikirim ke E-mail/Fb : alex_jombang@yahoo.com or sms ke : 087754283779

Pages

PawankCrew Version

ads

Friday, January 27, 2012