Sebelumnya di
blog ini telah dibahas mengenai cara
memasang widget artikel terkait di blog dan cara
memasang widget artikel terkait dengan scroll box. Namun widget
tersebut tanpa thumbnail, jadi hanya menampilkan judul-judul
artikelnya saja. Kali ini akan dibahas tentang cara memasang widget
artikel terkait denganthumbnail.
Widget artikel terkait dengan thumbnail ini cukup
menarik karena disertai dengan gambar. Gambar yang muncul diambil dari
salah satu gambar yang ada di artikel yang dimaksud. Widget artikel
terkait merupakan daftar link dari judul-judul artikel suatu blog yang
berlabel sama dengan artikel yang sedang dibaca.
1. Masuk ke akun Blogger Anda.
2.
Klik Rancangan > Edit HTML.
3.
Klik Download Template Lengkap untuk
membuat salinan template. Hal ini untuk mengantisipasi jika nanti
terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan
template ke seperti semula.
4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan
tekan Ctrl + F lalu masukkan kodenya.
5. Copy kode berikut letakkan dibawah kode tersebut.
<!--
Related Posts with Thumbnails Code Start-->
<!-- remove
--><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>
<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:loop>
<script
type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div
style='clear:both'/>
<!-- remove --></b:if>
<b:if
cond='data:blog.url == data:blog.homepageUrl'><b:if
cond='data:post.isFirstPost'>
<a
href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img
style="border: 0" alt="Related Posts Widget For Blogger with
Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png"
/></a><a href='http://bloggertemplates.bloggerplugins.org/'
><img style="border: 0" alt="Blogger Templates"
src="http://image.bloggerplugins.org/blogger-templates.png"
/></a>
</b:if></b:if>
<!-- Related Posts with
Thumbnails Code End-->
<!--Related Posts with thumbnails Scripts and Styles
Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js'
type='text/javascript'/>
<!--
remove --></b:if>
<!--Related
Posts with thumbnails Scripts and Styles End-->
6. SIMPAN
- Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
- Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
- Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
- Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2"; ( Untuk mengganti kode warna dengan selera anda klik sini )
0 nhận xét: