Cara Terbaru Membuat artikel Terkait Bergambar di Bagian Bawah Blog

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

Pada kesempatan ini saya ingin memberikan tips lagi mengenai mengelola blog anda dan kali pada khususnya saya akan memberi informasi 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???, menurut saya ketika kita sedang ingin mengetahui pasti kita ingin mengetahuinya sejelas dan selengkapnya oleh dari itu kita pas baca ketemu artikel yang terkait dengan apa yang kita inginkan pasti 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 langsung memberi step-stepnya, ikutin ya!!
Berikut langkah-langkah menambah Artikel terkait di bagian bawah blog kita
1.       Pastinya masuk dulu ke akun Blogger kalian (pasti tau..)
2.       Klik dan masuk ke menu Template dan pilih edit HTML
3.       Centang  EXPAND TEMPLATE WIDGET ( tapi saya rasa blogger sekarang gak ada n perlu lagi jadi jika no 3 gak ada langsung 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 kode dibawah ini tepat 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 kode yang sama pilih aja yang kedua ya)
7.       Nah kalau sudah ketemu langkah selanjutnya adalah 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/AVvXsEhH2ZLdxs34_BXmfQ6rdRGc7srt9QDiMTUhsZOlYEIFfWQPXn_MFlWqPcpknN5PLNfHg8Y9IpXNpMKCB-7zLzukUYKt8qMiC8dO7SoUIvi9jsdvCyOpCU1HdxJmn-B6qbIIs-NxGgP8yk0y/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

yle="display: inline-block; height: 90px; width: 180px;"><

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

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