Sunday, 2 September 2012
21:56 |
Diposkan oleh
abi ukan

Membuat Artikel Terkait- Hampir semua blog sudah memasang widget artikel terkait dan juga hampir semuanya telah membahas tentang cara membuat artikel terkait. Kali ini, ane juga akan membahas cara membuat artikel terkait yang cukup unik yaitu artikel terkait dengan thumbnail seperti yang ada di blog ini.
Nah, langsung aja yuk kita bahas cara memasangnya. Disini kita perlu memainkan sedikit keahlian dalam memodifikasi HTML (macam ahli IT aja ya). Langkah-langkahnya :
- Login ke blog sobat.
- Masuk ke "Template" -> "Edit HTML"
- Centang "Expand Widget Template"
- Cari kode <data:post.body/> agar lebih mudah dan cepat, gunakan CTRL + F
- Copy dan pastekan kode berikut tepat di bawahnya.
- Kalau sudah cari lagi kode </head>
- Copy dan pastekan kode berikut tepat di atasnya
<!-- 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://tamaneja.blogspot.com/2012/09/membuat-artikel-terkait-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- 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://tamaneja.blogspot.com/2012/09/membuat-artikel-terkait-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></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 h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5P5Q37yMooOTMCkB0Z7LRbK1gbAsBteMi4eZZQspXEATs6aGXMJS1iDdHP2AVwSc9JJ7-kIWoOVm2voCJ_t_2KvoAlqXn0A-VGH1ALP2V_I9YRM9SvK9BtFr3C2ycDh7GX2QpvXVtv0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</script>
<script src='http://infonetmu.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-->
<!-- 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 h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5P5Q37yMooOTMCkB0Z7LRbK1gbAsBteMi4eZZQspXEATs6aGXMJS1iDdHP2AVwSc9JJ7-kIWoOVm2voCJ_t_2KvoAlqXn0A-VGH1ALP2V_I9YRM9SvK9BtFr3C2ycDh7GX2QpvXVtv0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Lainnya";
</script>
<script src='http://infonetmu.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-->
CATATAN : Kode di atas inilah yang mempengaruhi tampilan artikel terkai blog sobat, sobat bisa ganti sesuai keinginan.
Artikel Lainnya : Judul pada widget
var maxresults=6 : jumlah artikel yang ditampilkan
Demikian deh. Heheheh :D
Untuk mendapat informasi lainnya dari kami

Daftar Menu
Gabung Yuk!!
Ikuti Lewat Email Ya
Link Sobat
Link Sahabat