Memasang Related Post Dengan Icon

Memasang Related Post Dengan Icon Di Blogger.Sahabat DoroINC, 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 1/2 tahun yang lalu kang salman pernah mengulas tutorial ini serupa, dan ini yang kali ke 3 mudah-mudahan akan lebih mudah dari versi-versi sebelumnya :

1. Cara Memasang Artikel Berkaitan di Bawah Posting
2. Cara Memodifikasi Related Post / Artikel Terkait Sehingga Memiliki Fungsi Scroll  

Dan versi sekarang adalah Memasang Related Post Dengan Icon di Blogger atau How To Related Post With Icon for Blogger dalam bahasa inggrisnya. LIHAT DEMO
Oke langsung saja kita mulai
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/AVvXsEhrzp7kjuEBlHA4gGfw47hbvoxUdeVWM5oW9vmx5Nmcg1OFcio7V8whb4xsig7s8lveEvqXlKbWuDMO-QYwcFk-ZquIlxFTJ0FYATbzev1CWyifV8KDLxiRw4wu6TejycMMVVovvXAVpPI/&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..

Tweet

Subscribe via Email