Related Post adalah sebuah link dimana link tersebut menuju ke artikel yang telah dibuat sebelum artikel yang tampil dibuat. Kebanyakan Related Post yang ada hanya menampilkan judul artikelnya saja, tetapi untuk related post yang akan kita bahas kali ini adalah related post yang menyertakan tumbnails dari artikel yang ada.
Tutorial ini saya dapatkan dari guru besar saya (walaupun gak di angkat jadi murid, tapi dialah inspiratoku) O-om dot com. Sebagai contoh related post with tumbnails lihat gambar berikut :
Bagus kan??? hehhe… Jumlah artikel yang tampil bisa kita atur sesuai space yang tersedia. baiklaih dari pada saya terus basa-basi, mending langsung ke tutorialnya :
- Login Blogger
- Tata Letak
- Edit HTML
- beri centang pada : "Expand Template Widget”
- Cari Kode </head> lalu copas kode berikut sebelum kode </head>
| <!--Related Posts with thumbnails Scripts and Styles Start-->
<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>
<!--Related Posts with thumbnails Scripts and Styles End--> |
- Selanjutnya, cari kode berikut : <div class='post-footer-line post-footer-line-1'> atau seperti <p class='post-footer-line post-footer-line-1'> dan kemudian copas kode berikut setelah kode tersebut :
| <!-- Related Posts with Thumbnails Code Start-->
<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>
<!-- Related Posts with Thumbnails Code End--> |
- Setelah penempatan kode selesai, silahkan simpan template dan lihat hasilnya
Untuk melakukan setting pada jumlah artikel yang muncul dan judul dari Widget tersebut, konsentrasi pada kode yang saya beri warna MERAH.
No comments:
Post a Comment