Membuat Artikel Terkait Dengan Icon

Buat sobat blogger yang ingin membuat artikel terkait dengan icon, berikut Blog Tutorial ingin berbagi sedikit Tutorial bagaimana cara pasang artikel terkait dengan icon...
Silahkan sobat simak dibawah ini langkah-langkah penerapannya:

• Login ke blogger dengan ID sobat.
• Pilih Rancangan.
• Pilih Edit HTML jangan lupa centang Expand Template Widget
• Cari kode </head> untuk mempermudah pencarian tekan Ctrl+F3.
• Lalu copy code di bawah ini dan paste di atas </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/AVvXsEjgjLJiCAk5VggZT0DiVVHqXwagsoavGRq4Ll-e8HBwfpJbvdXGt_gHB-YH0qUJD0B0UlDeqLCUpAjgd0lNvanuiw2ecHBPCfCqgo37r-YLqb7qmf3Ar_AxN8pwjg6pW_sJsM3z0soFR3M/

.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 #cccccc; } </style> 
<script src='http://belajarblogging.googlecode.com/files/relpost.js' 
type='text/javascript'/> 

• Kalau sudah, lalu cari kode <data:post.body/>
• Kemudian copas kode di bawah ini setelah kode <data:post.body/> tersebut

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

• Terakhir save template anda

Keterangan:
 Kalau gambarnya ingin sesuai selera anda, tinggal ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjLJiCAk5VggZT0DiVVHqXwagsoavGRq4Ll-e8HBwfpJbvdXGt_gHB-YH0qUJD0B0UlDeqLCUpAjgd0lNvanuiw2ecHBPCfCqgo37r-YLqb7qmf3Ar_AxN8pwjg6pW_sJsM3z0soFR3M/.png
dengan url image yang kamu inginkan, sedangkan  kode max-results=5 di atas menunjukkan jumlah post maksimal atau artikel berkaitan yang akan tampil pada setiap halamannya, sesuaikan saja dengan selera anda.