Cara Membuat Artikel Terkait Keren
an Blogspot kali ini kita akan membahas tentang bagaimana cara membuat artikel terkait dengan thumbnail.Yang dimaksud dengan artikel terkait dengan thumbnail
adalah artikel terkait yang menampilkan teks dan juga gambar.Mungkin
sobat sekalian pernah jalan-jalan ke blog orang lain dan menemukan
artikel terkait blog tersebut menampilkan teks dan juga gambar,nah itu
dia yang dimaksud dengan artikel terkait dengan thumbnail.Cara
membuatnya tidaklah terlalu sulit,sobat hanya membutuhkan beberapa menit
saja untuk membuatnya.Mau tahu caranya?.Ayo langsung saja kita mulai.Ikuti beberapa langkah berikut :
1.Login ke akun blogger sobat
2.Klik menu Template/Rancangan
3.Klik Edit HTML
4.Centang kotak Expand Template Widget
5.Cari kode </head>
biar lebih cepat mencarinya,gunakan Ctrl+F
6.Maukan kede di bawah ini tepat di atas 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 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDB-3S5nV_W8OMkVfOXSxcM1linZjAhLTGosqJfD6ZpKweztG0wQqTWLiz8ow0gTjFLXORfjFvCWhQv8HXY_o6K_2va8XNGI36NBmk-pIZse5MQtppDdwMZdfBWxEwLVsUv7eQk7c2DZM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.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 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDB-3S5nV_W8OMkVfOXSxcM1linZjAhLTGosqJfD6ZpKweztG0wQqTWLiz8ow0gTjFLXORfjFvCWhQv8HXY_o6K_2va8XNGI36NBmk-pIZse5MQtppDdwMZdfBWxEwLVsUv7eQk7c2DZM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7.Cari Kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
8,Jika sudah ketemu,masukan kode di bawah ini tepat di atas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
<!-- 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://www.andreykusanagi.com'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></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://www.andreykusanagi.com'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
9.Klik Simpan Template
Keterangan :
-Sobat dapat mengubah jumlah artikel yang ingin ditampilkan
dengan mengubah kode var maxresults=5;
-Untuk mengubah judul widget kodenya var relatedpoststitle
-Untuk mengubah warna dari splitter line kodenya var splittercolor
Coba sobat lihat hasilnya.Semoga postingan saya tentang Cara Membuat Artikel Terkait Dengan Thumbnail bisa bermanfaat.Sampai Jumpa di Panduan Blogspot berikutnya.
0 comments: