Related Post Degan Icon Blogger

Memasang Related Post Dengan Icon Di Blogger.Sahabat Hacker Baturaja, pernahkah kamu berpikir bagaimana cara membuat related post dengan mudah atau dengan sedikit kode? ya benar sekali pada umumnya untuk penyususan kode ini sedikit panjang sehingga sedikit membingungkan untuk kita.



 1. Login Blogger > Rancangan (Design) > Edit HTML > Centang Pada Tulisan Expand Template Widget
2. Kemudian pasang kode berikut di bawah tag </head>

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqhguceEgcZxn8QZqAKLC5Wfx7KATo3LCSqT6R8td9eUdcpYkh5mYCUh7ed9VWZGy51QvlNDRqrtoVbZuWXzHTPBO9PsVtbe7hCZmtPx4cm6fI0H1K_0QAmXckVJgzAQG523cdjJiKdtc/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

3. Jika sudah, cari <data:post.body/> (gunakan ctrl + F) lalu pasang kode berikut di bawahnya, jika ditemukan 2 buah kode, simpan di bawah kod yang ke 2

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

4. Save template dan lihatlah hasilnya

Keterangan:

• pada tulisan warna merah di atas adalah warna tulisan dari widget ini.
• pada tulisan warna orange di atas adalah warna garis 

Mudah sekali bakan? Semoga Cara Memasang Related Post Dengan Icon ini bermenfaat, selamat mecoba..

Related Post