Cara membuat Artikel Terkait dengan Icon gambar Sendiri - Keren

Pada hari ini saya akan posting tentang bagaimana  Cara membuat Artikel Terkait dengan Icon gambar Sendiri. Yang sebelumnya saya sudah postingkan kepada kalian,, yaitu cara membuat Artikel terkait dengan Gambar,,, hmm, tapi kalau menurut saya lebih bagus & simpel menggunakan yang ini. artikel terkait dengan gambar/icon kita sendiri jadi lebih keren,
Yang hasilnya nanti seperti ini :

Caranya cukup mudah, ikuti langkah berikut ;

• Masuk ke menu 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(&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpqVj3Yx8u7AgCZitcZDe7J4wcD3QRFsubIeECIS_j715Ul2MJazaXanPLbONtzITjODdHJwTL8lla8WPlyJhniUZXXscvcaXYB-WtrqkrViZRllOrqg8rBe5Lo1ZnQyjT4Rxxlmko5k/s1600/Untitled-1+copy.png&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://rel-post-seo-art.googlecode.com/files/relatedpost.js'/>

• Kemudian, cari kode  <data:post.body/> , anda akan menemukan lebih dari satu kode tersebut, gunakan kode yang kedua, jika nanti pada hasilnya tidak muncul, maka gunakan kode yang pertama, 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 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 != &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>

• Untuk memodifikasi Icon/gambarnya, silahkan ganti URL yang berwana merah 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!