Cara Membuat Artikel Terkait dengan Icon Gambar Milik Sendiri

Pada kesempatan kali ini saya akan posting tentang bagaimana Cara Membuat Artikel Terkait dengan Icon gambar Milik Sendiri. Dengan menggunakan icon gambar sendiri akan membuat kita lebih kreatif, Selain itu artikel terkait dengan gambar/icon kita sendiri akan jadi lebih keren,

Yang hasilnya nanti seperti ini :

Caranya cukup mudah, ikuti langkah berikut ini :

• Masuk ke menu Template, pilih Edit HTML 

• Klik expand template widget

• Cari kode </head>, gunakan ctrl+f untuk mempermudah pencarian. 

• Selanjutnya, copy & paste markah 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(" 

<span style="color: red; font-size: small;">

http://i1336.photobucket.com/albums/o649/flady1/d_zpse2a39422.png</span>") 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://rel-post-seo-art.googlecode.com/files/relatedpost.js'/>

• Kemudian, cari kode  <data:post.body/> , jika anda akan menemukan lebih dari satu kode tersebut, gunakan kedua kode tersebut, tenang saja, template anda tidak akan error selama anda mengikuti dengan cermat tutorial yang saya berikan.

• Setelah anda menemukan <data:post.body/> , paste kode berikut tepat di bawah <data:post.body/>

<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 != "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=5"' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div>

</b:if>

• Untuk memodifikasi Icon atau gambarnya, silahkan ganti URLhttp://i1336.photobucket.com/albums/o649/flady1/d_zpse2a39422.png diatas dengan URL Icon/gambar kalian dengan ukuran 16 x 16 pixel. Jika tidak diganti juga tidak apa-apa! Keren Kok!

• Selanjutnya, Simpan Template dan Lihat Hasilnya !!

Referensi : perilian