Trik Memasang Artikel Terkait / Related Posts dengan Gambar

Sebenarnya kita telah membahas tentang bagaimana Cara Memasang Artikel Terkait atau Related Posts ini, pada artikel Trik Memasang Artikel Terkait / Related Posts kali ini hanya akan memberikan pilihan atau variasi pilihan tentang artikel terkait / related posts karena akan dilengkapi dengan gambar. Selain enak dipandang mata, dengan memakai gambar artikel terkait / related posts yang kita sajikan akan mudah dipahami atau dimengerti oleh pengunjung blog. Langsung saja kita mulai pembahasan kita kali ini.

Trik Memasang Artikel Terkait / Related Posts dengan Gambar 

• Langkah pertama silahkan login Blogger 
• Setelah itu pilih menu Template 
• Kemudian pilih Edit HTML
• Cari kode </head> 
• Copy kode script berikut dan letakkan tepat diatas kode </head>

<!--Start Related Posts--> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:90%; min-height:90%; padding-top:0px; padding-left:8px; } #related-posts h2{ font-size: 1.0em; font-weight: bold; color: white; font-family: Rockwell,Georgia,Serif; margin-bottom: 0.8em; margin-top:0em; padding-bottom:0em; } #related-posts a{ color:white; } #related-posts a:hover{ color:white; } #related-posts a:hover { background-color:#080; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14JTpetwQzembMWSYAfULG3wuDovEHvTzmruC4coeipKjS19eo2atf_9eeu6dnS6yzyeZwjyxZSZJ4Xv3JVE_hn9vPwqKop7ZBA_koTWqZiHdQ0KdtSCuvK3s1RYfORpQ3kySpIhG19S8/s1600/No+Image.jpg"; var maxresults=7; var splittercolor="#000000"; var relatedpoststitle="Related Posts:"; </script> <script src='https://googledrive.com/host/0B0gPfP3O6xFIRlVuVzFIMFlwSFE/Related Post Thumbnail.txt' type='text/javascript'/> </b:if> <!--End Related Post-->

• Selanjutnya cari kode berikut <data:post.body/> (mungkin ada lebih dari satu kode tersebut, disarankan mulai dari yang paling bawah)
• Copy kode script berikut dan letakkan tepat di bawah kode <data:post.body/>

<!-- Start Related Posts--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> </b:if> <!-- End Related Posts-->

• Simpan Template

Keterangan:

Ganti kode yang berwarna merah sesuai dengan kebutuhan

max-results=7 adalah jumlah artikel terkait yang muncul

var relatedpoststitle=&quot;Related Posts:&quot adalah Judul artikel terkait

var splittercolor=&quot;#000000&quot adalah warna tulisan

Begitulah Trik Memasang Artikel Terkait / Related Posts dengan Gambar, selamat mencoba dan semoga berhasil.