Artikel Terkait Gaya Blogbego

Sekarang saya akan berbagi dengan kawan tentang Artikel Terkait Gaya Blogbego :z; Apa itu Artikel Terkait atau Artikel yang Berhubungan atau apalah namanya dan yang lazim dikenal pada dunia Blogger disebutkan dengan nama Relatif Post :y;  Artikel Terkait banyak macamnya yang saya posting pada Blog lainnya seperti : Cara Membuat Artikel Terkait, Artikel Terkait berisi Thumbnail dan Cara Membuat Artikel Terkait di Sidebar :r; tapi yang ini hasil comot sana comot sini ditambahin bumbu-bumbu biar enak dan sedap dipandang mata [tentunya bagi saya pribadi lho] :w; sebagai contoh tampilannya seperti yang saya pakai di Blog ini atau seperti image berikut :

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Beri tanda  check disamping Expand Template Widget 
• Copas Script berikut dibawah <data:post.body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float : left;
width : 98%;
margin: 0;
padding: 5px;
font : 13px Arial Narrow, Verdana;
border: 1px solid #000;
background: #FFF;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
}
#related-posts ul {
margin : 1px;
padding : 5px;
background :
}
#related-posts ul li {
float:left;
width: 44%; _44%; /* for IE dont delete */
display : block;
background : #D4E3EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih4dUiYYTKFouN20DU7zbo-vYBpPBxAfQVPVfMOjdDyv6_v41f0a7UioKTi_X_ifyLH9pQdDncQkg-TmjhWlAdPMS9YRRi0kMNhRCMrrrf1ILy8kbmhRTt2VbZ1cSVtDgQOY1SW58hf4s/s1600/feed-icon-1.gif) no-repeat left center;
margin: 0 3px 0;
padding : 0 0 1px 25px;
line-height : 2em;
border:1px dotted #FFF;
}
#related-posts ul li:hover {
background-color: #95CAFF;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
border-bottom:1px dotted #000;
}
</style><script src='https://sites.google.com/site/blogbegocreation/javascript/relatif-post.js' type='text/javascript'/>
 <div id='related-posts'>
<div style='width: 96%; height: 25px; margin:0 auto 0; padding:10px; color: #FFF; font-family: Segoe Print; text-shadow: 3px 3px 3px #000; font-size:16px; font-weight:normal;background:#699AB8;'>Artikel Terkait Menarik Lainnya : </div>
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
 <br/>
</b:if>

• Simpan Template kawan
• Kalau hasilnya agak rapat dibawahnya, kawan bisa menambahkan  <div style='clear: both;'/> dibawah </b:if> 
• Simpan kembali Template kawan

Posted by Unknown

Kalau ada yang kurang jelas pada Artikel
Artikel Terkait Gaya Blogbego
» Ratting : 4.5
dan seandainya ada Artikel atau Link yang rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---