Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail
Kali ini saya akan posting
Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail
Ada banyak tutorial yang bisa anda termukan berkaitan dengan judul ini, namun yang saya post ini adalah yang sudah saya praktekkan dan berhasil. lihat demonya disini.Oke langsung saja...
1. Login ke blogger
2. Rancangan >> Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Letakkan kode berikut di bawah <data:post.body/>
<!-- 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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Jika anda bingung coba perhatikan contoh milik saya dibawah ini:
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<!-- 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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
</div>
</b:includable>
6. Kalau sudah cari lagi kode </head>
7. Tempelkan kode berikut tepat diatas kode </head>,
<!--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/AVvXsEhTtsbsd14XYxA1dYEqcIxjCC5iBXg7QTV-GSS89_I21bP8iV9roMRsq6PD7jICHj6Hsgkc-0Hp1n1WAg1xBn_1VIRxwf_3wGXwPqw5BeXfAm6lO0DZBjoLfW4jXwVMGQFxeDu79Es2bkY/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Lihat Produk 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:
Lihat Produk Lainnya (Judul pada widget, bisa diganti sesuai keinginan anda)
var maxresults=6: Jumlah artikel yang di tampilkan (juga bisa diganti)
Demikian tutorial singkat ini, semoga bermanfaat !!!
Sumber:http://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html
Artikel Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail ini Anda baca di webeson.blogspot.com
Jika Anda merasa artikel ini bermanfaat, jangan lupa kasih komentar.
Terimakasih atas kunjungan Anda. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Silahkan baca Posting Meranik Lainnya di bawah ini dan jangan lupa berkunjung kembali
Terimakasih atas kunjungan Anda. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Silahkan baca Posting Meranik Lainnya di bawah ini dan jangan lupa berkunjung kembali