Wong Linglung

Tampilkan postingan dengan label blogbego. Tampilkan semua postingan

Jumat, 08 November 2013

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 == "item">
<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 != "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=10" 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