- Buka Blogger
- Login akun Blogger
- Setelah berhasil masuk pilih bagian template
- Pada menu template pilih tombol "Edit HTML"
Tahap I Memasang Script
Cari kode </head> untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Copy kode di bawah ini dan paste 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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #424242;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#FFFFFF; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#00FF00;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://yourjavascript.com/3561196125/related-post-with-thumbnail.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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #424242;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#FFFFFF; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#00FF00;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://yourjavascript.com/3561196125/related-post-with-thumbnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Keterangan tambahan pada tahap I :
- Kode #eaeaea untuk mengganti warna garis dot pemisah antar artikel.
- Kode #424242 untuk mengganti efek warna saat kursor mouse mengenai artikel.
- Kode #FFFFFF untuk mengganti warna garis yang mengelilingi gambar artikel.
- Kode #00FF00 untuk mengganti warna judul artikel
Tahap II Meletakan Widget Related Post Pada Post Footer
Cari kode <div class='post-footer'> untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Pada tahap ini kita akan menemukan 2 kode <div class='post-footer'> dan kita berhenti pada kode yang kedua. Copy kode bercetak miring di bawah ini dan paste di atas kode <div class='post-footer'> yang kedua.
<!-- 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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Artikel Lainnya:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Artikel Lainnya:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Keterangan tambahan pada tahap II :
- Tulisan Artikel Lainnya: untuk mengganti judul widget
- Kode 8 untuk menentukan berapa artikel yang akan di tampilkan pada widget.
Tahap III Menampilkan Related Post Pada Mode Mobile View
Cari kode <div class='post-footer-line post-footer-line-2'> yang terletak di antara <b:includable id='mobile-post' var='post'> dan </b:includable> untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Copy kode bercetak miring di bawah ini dan paste dibawah kode <div class='post-footer-line post-footer-line-2'>
<!-- 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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Artikel Lainnya:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Artikel Lainnya:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Keterangan tambahan pada tahap III :
- Tulisan Artikel Lainnya: untuk mengganti judul widget
- Kode 8 untuk menentukan berapa artikel yang akan di tampilkan pada widget.
Terima Kasih semoga artikel "Cara Membuat Related Post Blogspot" dapat berguna bagi kita pemilik blog.
Sumber :
Script untuk widget related post
http://helplogger.blogspot.co.id/2012/03/how-to-add-related-posts-widget-to.html
Teknik memunculkan widget pada mode mobile view
http://risalahatiku46.blogspot.co.id/2013/01/membuat-related-post-untuk-versi-mobile.html
Comments
Post a Comment
1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link aktif.