Membuat Widget Artikel Terkait Dengan Icon Dan Scrol dibawah postingan Untuk Blogger

Hermanbagus lagi gak punya ide buat berkata kata, hehe

jadi langsung ke TKP aja.

1.Login Akun blog sobat

2.Pilih Template

3.Edit Html

4.Centang Expand Template Widget

5.Cari Kode Berikut ini : </head>

Copy Kode dibawah ini, dan paste diatas kode : </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("http://hermanbagus.mywapblog.com/files/panah-hermanbagus.png") 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 #222222; } </style> <script src='http://hermanbagus.googlecode.com/files/Hermanbagus%20artikel%20terkait.js' type='text/javascript'/>

Kemudian Cari kode ini :

<b:if cond='data:blog.pageType == "item"'><data:post.body/>

Setelah ketemu copy dan paste kode berikut ini dibawah kode :

<b:if cond='data:blog.pageType == "item"'><data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div style='margin:0; padding:5px;height:150px;overflow:auto;border:1px solid #53cc1e;background-color:#111111'> <font color='#53cc1e'>Artikel Terkait: </font><div id="related-posts"> <font color='#53cc1e'><b:loop values='data:post.labels' var='label'><data:label.name/><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> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div> </div> </b:if>

Simpan Template Sobat.
Selesai.
Semoga bermanfaat kawan.