0 cara membuat artikel terkait

Kemaren buat template baru yang bersih dari modifikasinya dari aslinya, ya saya tambahin aja tentang artikel terkait, dapat nyari jalan-jalan dari mbah google eh dapat script dari tetangga sebelah bagaimana Cara Membuat Widget artikel terkait dengan Gambar.
contohnya gambar :

Dan setelah sekian lama, akhirnya sayapun berhasil menemukannya bagaimana cara mari kita lihat tutorial caranya di bawah ini untuk tampilan blogger yang berbahasa indonesia:
 

1. Pertama masuk ke Akun Blogger anda

2. Masuk Template kemudian edit HTML,

Langsung mengedit HTML dapat memengaruhi cara kerja fitur dan hanya direkomendasikan untuk pengguna tingkat lanjut. Mengedit template HTML secara tak terduga dapat memengaruhi fitur Blogger lainnya. Kami merekomendasikan menggunakan Perancang Template terlebih dahulu, di mana Anda dapat Tambahkan CSS di bawah bagian Lanjutan. 

dan klik lanjutkan maka akan tampil halaman edit html.

3. Centang kotak kecil di kiri atas Expand Template Widget

4. Untuk menghindari kesalahan sebaiknya download template anda dulu dengan backupnya pada halaman kanan atas dan cadangkan template.

Nb.untuk lebih cepatnya dalam pencarian code htl silahkan tekan Ctrl + F secara bersamaan dan masukan kata kunci yang ingin di cari pada tampilan pencarian dan akan muncul kata yang sesuai dengan pencarian atau kata yang di cari banyak klik selanjutnya atau sebaliknya.

5. Setelah itu letakkan kode di bawah ini di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kalau sudah, cari kode berikut

<div class='post-footer'>

Dan letakkan kode di bawah ini di atas kode di atas, Atau bagi sobat yang pandai ngutak-atik pasang code yang seperti ini silahkan taruh dimana saja yang berdekatan dengan code diatas post-footer tersebut agar dalam menata tampilan halman yang sesuai kemauan anda sobat, ya seperti blog m-fahrin.com ini saya taru ditempat berbeda untuk tampilannya sedikit posisinya lebih baik,he

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Nb_untuk perlu diketahui tanda dari code ( Var maxresults=8 ) adalah jumlah artikel terkait yang muncul berpa banyak yang akan tampil, silahkan di sesuaikan, Anda bisa mengganti warna tulisan sesuka anda dengan mengganti code warna ( color:#FFFFCC;) dan untuk mengganti warna tampilan halaman artikel terkait ketika mau di klik dan warnanya berubah sesuai warna ini( background-color:#d4eaf2;) background anda. Untuk warna hitam code warnany ( #000000 ).

6. Simpan Template dan lihat Hasilnya bisa klik Pratinjau atau langsung buka halaman blog anda.

Sekian Sobat Tentang Bagaimana Cara Membuat Widget artikel terkait dengan Gambar, 

Semoga Berhasil dan Bermanfaat . . .