Cara Membuat Related Post Ala Fansub

Kali ini Admin Keren mau berbagi trick cara mebuat
Related Post Ala Fansub, untuk penampakannya bisa dilihat dibawah ini


Untuk demonya bisa dilihat dibawah ini:

Goes To TKP Untuk Melihat Demonya


Langsung saja kita mulai tutornya:
Pertama cari kode ini </b:skin> kalau tidak ada cari kode </style>
lalu masukan kode CSS ini diatasnya:



/* CSS RELATED POST THEME
----------------------------------------------------------------- */
#related-iklan { float : right; width : 300px;margin-bottom:10px;font : 11px Open Sans;}
#related-posts { float : left; width : 345px;margin-bottom:10px;font : 11px Open Sans;}
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-posts h2 {
width:648px;
color: #000;
font-weight: 300;
padding: 4px 0px;
border-bottom: 2px solid #09F;
font-size: 15px;
text-transform: none;
margin: 0px;}
.related-title {
width:648px;
color: #000;
font-weight: 300;
padding: 4px 0px;
border-bottom: 2px solid #09F;
font-size: 15px;
text-transform: none;
margin: 0px;}
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { border : medium none; padding : 0; }
#related-posts ul li {
list-style: outside none none;
padding: 0px;
border-bottom: 1px dotted #F0F0F0;
line-height: 27px;
height: 27px;}



Kedua masukan kode html ini
diatas kode <data:post.body/> yang kedua




<br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-title'>Episode lainnya:</div>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'><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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
<div class='related-iklan'>
<script src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<ins class='adsbygoogle' data-ad-client='ca-pub-7245764215370079' data-ad-slot='4778200554' style='display:inline-block;width:300px;height:250px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></b:if>



Note:
Jika di blog kalian ada Tombol Sharenya letakan kode diatas
tepat dibawah kode tombol share kalian
Kalian bisa mengubah warna garisnya dengan cara mengganti kode ini #09F

No comments