Cara Terbaru Menciptakan Artikel Terkait Bergambar Di Bab Bawah Blog

Hai... Akhirnya kembali lagi bersama saya Hendri Kusnadi si admin blog ini.

Pada kesempatan ini saya ingin menawarkan tips lagi mengenai mengelola blog anda dan kali pada khususnya saya akan memberi isu mengenai cara menambahkan artikel terkait yang disertakan gambar dibawah blog anda (kebetulan gue lagi buat ni, hehe), oh iya anda tau kenapa menambah artikel terkait itu penting bagi saya???, berdasarkan saya dikala kita sedang ingin mengetahui niscaya kita ingin mengetahuinya sejelas dan selengkapnya oleh dari itu kita pas baca ketemu artikel yang terkait dengan apa yang kita inginkan niscaya deh kita akan klik lagi dan lagi oleh dari itu dengan menambahkan artikel terkait pastinya akan meningkatkan traffic blog kita 

Untuk mempersingkat waktu anda yang lelah membaca kata-kata saya yang begitu indah ini saya akan pribadi memberi step-stepnya, ikutin ya!!
Berikut langkah-langkah menambah Artikel terkait di bab bawah blog kita
1.       Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2.       Klik dan masuk ke sajian Template dan pilih edit HTML
3.       Centang  EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger kini gak ada n perlu lagi jadi jikalau no 3 gak ada pribadi no 4 aja ya)
4.       Di kotak yang berisi kode-kode HTML itu klik Ctrl+f dan akan muncul kotak pencarian di pojok kanan atas itu dan cari </head> tekan enter dan lihat akan ada tanda di kata yang anda cari tadi
5. Dan selanjutnya copy isyarat dibawah ini sempurna diatas atau sebelum kata </head> tadi

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6.       Setelah selesai, cari kode <div class='post-footer'> seperti cara tadi (jika ada dua isyarat yang sama pilih aja yang kedua ya)
7.       Nah kalau sudah ketemu langkah selanjutnya ialah copy script berikut diatas <div class='post-footer'> yang pertama anda temukan tadi

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_EBHpfa8Jc3obdqs8nhTGbb1s8Qg2zmcUxF1-epZqn3JQGU8rR_pRsrvcLlbITa-p0iEWI-X36S8yYNkS_YaUUJSmsofZVGgma8T6657tpTMzVyHYxNwT1J_o76GW_WF106sWMDucztU/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Ket: ubah maxresult = 4 dengan jumlah artikel terkait maksimal yang ingin ditampilkan

8.       Ok, selesai, upsss belum.. jangan lupa klik simpan Template

Semoga berhasil ya gue juga agak galau nih.. hehe.. Jika anda balasan dan yang ingin tanyakan silahkan coment aj dibawah gue balas kok dan kita sama- sama berguru deh.. Terima Kasih

Update: isyarat html dan css sudah di tes bekerja dengan baik