Dalam posting ini saya akan memberikan tiga gaya artiket terkait (Related Post) untuk blogger. Sebenarnya, Widget artikel terkait ikut meningkatkan trafic blog Anda.Banyak widget artikel terkait blogger terlihat membosankan. Saya, harap Anda menyukai tiga widget artiket terkait dibawah ini.JavaScript
Paste kode JavaScript dibawah ini diatas </head>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>
HTML
Sekarang temukan kode bawah
<div class="post-footer-line post-footer-line-1">
atau
<p class='post-footer-line post-footer-line-1'>
Sekarang paste kode ini di bawahnya
<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&max-results=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
CSS(Style 1)
Paste kode CSS di bawah ini tepat di atas </b:skin>
#related-posts {
clear: both;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #222;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
}
CSS(Style 2)
Paste kode di bawah ini tepat di atas </ b: skin>
/* Related Posts - By http://draftbloger.blogspot.com/.com
----------------------------------------------- */
#related-posts {
clear: both;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
background: #111;
}
CSS(Style3) (untuk latar belakang hitam dan gelap)
Paste kode di bawah ini tepat di atas </ b: skin>
/* Related Posts by http://draftbloger.blogspot.com
----------------------------------------------- */
#related-posts {
clear: both;
}
#related-posts h2{
color: #fff;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
background: #111;
}
Semoga anda suka dengan tutorial diatas, tolong beri komentar kalau memerlukan bantuan. Happy bloging!!
Tidak ada komentar:
Posting Komentar