468x60 Ads

Artikel Terkait Gaya Blogbego

Unknown | 17:00 | , ,
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 seperti : ada yang hanya Judulnya saja, ada yang berisi Thumbnail dibawah Judulnya maupun yang bisa ditampilkan pada 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/AVvXsEhHU1Ihm131cSaQs8Sth1ncN2676RWYFiy_b_qp5md3GA7ffWC61AqChtDMWoRZKJjeyQiQ5O1BFX6Zk67MYxHv27UA9zCIQQKQXCYO_mg2VEjuZQgVSrlG-jbi1njHp7CL0asJLaIgxBc/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

0 Kommentare:

Kommentar veröffentlichen