Hallo semua, selamat datang di blog ini. Kali ini saya akan membahas mengenai membuat Widget "ARTIKEL LAINNYA" atau juga sering disebut "ARTIKEL TERKAIT". Mungkin sudah banyak blog lain yang membahas mengenai cara membuat widget ini. Mungkin ada yang menyarankan membuat widget ini menggunakan bantuan LinkWithin. Pada dasarnya menggunakan LinkWithin bisa saja, akan tetapi kekurangannya ialah pengunjung diarahkan untuk redirect terlebih dahulu sebelum diarahkan ke artikel kita yang lainnya. Memang ini menyebalkan dan terkesan ga praktis.. Ya gak bro?
- Cara pertama yang harus Login ke Blog kita dulu
- Buka Template > Edit HTML (Jangan lupa centang kolom Expand Template Widget)
- Cari kode <data:post.body/>, gunakan Ctrl+F untuk mempermudah pencarian.
- Copy kode berikut dibawah <data:post.body/>
Kode:
<!-- 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://ikubarunovryan.blogspot.com/'><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--> - Apabila sudah meng-copy kode tersebut, cari lagi kode </head>, lalu copy kode tersebut diatas </head>.
Kode: <!--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/AVvXsEhClL3Ck-UqV2NNhdzEutrunfKUjSMS4GY3SKVXQZrCyI3lc49KhQfwY27nkc6G_XGx2qJ2t3ASRIF6lhAVnSozvGilqF9B8WeR7k6E3-OdWiuArm1YAFRWz1llETFT7_81yTzyPqwixx4/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--> - Kemudian Simpan Template, dan ARTIKEL LAINNYA (Related Artcle) sudah terpasang di blog Anda
Mas, kalo mau copas cantumin sumbernya donk,
AntwoordVee uithttp://ikubarunovryan.blogspot.com/2013/02/hallo-semua-selamat-datang-di-blog-ini.html