Menambahkan Thumbnail Gambar di Related Post

Untuk membuat related post dengan gambar seperti diatas ini  langkahnya sbb ;

Di halaman RANCANGAN, klik Tab EDIT HTML.

Kasih tanda "cheklist" pada kotak kecil yang berada di samping Expand template widget,di bawah tulisan tersebut membentang sempit sebuah kotak yang berisi banyak kode html template blog.

Cari kode</head> pada kotak HTML tersebut. Lakukan pencarian cepat dengan menggunakan tombol CTRL + huruf F pada keyboard kamu lalu tekan ENTER yang akan menampilkan kotak FIND pada sudut kiri bawah browser kamu. Selanjutnya ketik</head> pada kotak tersebut. Sudah dapat kodenya ?

Copy kode HTML dibawah ini :

<!--Related Posts with thumbnails Scripts and Styles Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <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: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style><br /> <script src='https://sites.google.com/site/bloggerbugis/js/relatedthumbsbloggerbugis4U.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Letakkan/Paste di atas kode</head> template blog kamu.

Selanjutnya cari kode<div class='post-footer-line post-footer-line-1'>pada kode template blog kamu. Kalau kamu tidak menemukan kode tersebut pada template blog kamu,kamu bisa cari kode ini<p class='post-footer-line post-footer-line-1'>Letakkan/Copas kode di bawah ini,di bawah salah satu kode tersebut di atas. Berikut kodenya :

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

Simpan Template kamu

Kemudian lihat hasilnya...