Alhamdulillah sholat tarawih telah selesai dan akhirnya bisa posting juga di Blog Kampung Teknologi, dalam Membuat Artikel Terkait ini berguna untuk membantu para pengunjung untuk melihat artikel yang lain dari suatu Blog yang masih berkaitan dengan postingan yang sedang di baca, dan kali ini akan membuat Artikel Terkait yabg ada Gambarnya tidak seperti artikel terkait pada umumnya, Okelah kalau begitu langsung saja share Cara Mudah Membuat Artikel Terkait Bergambar di Blog.
 |
| Artikel Terkait Bergambar |
Langkah-langkahnya sebagai berikut :
1. Login Ke Blog Anda
2. Klik Rancangan
3. Untuk menghindari hal yang tidak diinginkan alangkah baiknya klik Download Lengkap Template dulu
4. Klik Edit HTML, Jangan lupa Mencentang Expand Template Widget
5. Cari Kode </head>
6. Masukan Kode dibawah ini tepat diatas 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-->
7. Cari lagi Kode <div class='post-footer-line post-footer-line-1'>
8. Masukkan kode dibawah ini tepat dibawah Kode <div class='post-footer-line post-footer-line-1'>
<!-- 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 tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
9. Simpan Template dan liat Hasilnya.
Keterangan :
Untuk angka yang berwarna merah adalah jumlah Atikel Terkait yang akan ditampilkan dan yang berwarna Hijau adalah judulnya
