Wednesday, November 9, 2016
Cara memasang widget Related Post artikel terkait dengan thumbnail di blog
Cara memasang widget Related Post artikel terkait dengan thumbnail di blog
Sobat blogger bentar lagi kan lebaran saya punya tutorial baru nih tentang Widget "Artikel terkait" apa sih artikel terkait?.Artikel terkait adalah Daftar link yang berhubungan dengan sebuah artikel yang kita baca.Kalo masih bingung langsung aja praktekin,tapi sebelum itu kalian wajib follow blog saya dulu setelah itu kita mulai:
1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian centangExpand Template Widget
6.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
7.Letakkan kode berikut di atas kode </head>
7.Letakkan kode berikut di atas 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=https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js type=text/javascript/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<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=https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js type=text/javascript/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
8.Kemudian cari kode <div class=post-footer-line post-footer-line-1> kalo gak ketemu jangan panik bisa car kode seperti ini <p class=post-footer-line post-footer-line-1>
9.Kalo udah ketemu salah satu letakkan kode dibawah ini di bawah kode yang anda barusan temukan:
<!-- 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>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=clear:both/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<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>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=clear:both/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
10.Tinggal di Save deh
KETERANGAN:
-Ganti tulisan yang berwarna MERAH dengan kode wana sesuai kesukaanmu
-Ganti tulisan yang berwarna KUNING sesuai jumlah artikel terkait yang ingin anda munculkan
-Ganti tulisan yang berwarna CYAN dengan Tulisan yang ingin anda tampilkan (judul) di atas related post
Available link for download
