Jumat, 08 November 2013

Browse » home» » » » » Artikel Terkait Gaya Blogbego

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 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/AVvXsEic5cXJaWlXOuYy9a0bPFSG8IOsUC8Jdw3NmwRO0SELqZrjDmS5HPhdgEE08GbWMF1__ixdk-kO2IW1HwqHHHr2njyGq0hyphenhyphenYF9ecg28S3pgLoyAIpVxmQLyuS1OdESa5oNTclRpLcIfPV0/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

Tidak ada komentar:

Posting Komentar