Agar lebih jelas perhatikan gambar dibawah ini.
Keren bukan? Cara ini bisa digunakan bersama dengan related post tanpa thumbnail. Bagi kawan yang tertarik memasang widget ini,, trus lanjutkan membaca.
Tapi bagi kawan yang tidak tertarik..!!! Trus lanjutkan membaca juga... HHheheh
Langsung saja kita ke KTP eehh TKP :P ..
1. Buka menu Design (Rancangan) -> Edit HTML
2. Centang "Expand Widgets Templates"
3. Letakkan kode dibaawh ini tepat diatas </head>
Note : gunakan Ctrl+F utk mempermudah pencarian.
<!--Related Posts with thumbnails Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWj7vE6vpOhtuixK9oJ1X8B8olSD78TStkmXXOA8mCHkS2-rN1tnAkDif0Zv0jOvoDp09-eEn9YFjNfgJ-mQl9TKC8OsOI9Jzl1T6seaHPTeyqEQtUSo6YdHfkmmys2PHNiDCidpKahhQ/"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="You might also like:"; </script> <script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails End-->
4. Lalu cari kode script <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line
6. Letakkan kode berikut ini tepat dibawahnya.
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><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=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->
Keterangan:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWj7vE6vpOhtuixK9oJ1X8B8olSD78TStkmXXOA8mCHkS2-rN1tnAkDif0Zv0jOvoDp09-eEn9YFjNfgJ-mQl9TKC8OsOI9Jzl1T6seaHPTeyqEQtUSo6YdHfkmmys2PHNiDCidpKahhQ/" menunjukkan gambar yang akan muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar yang anda sukai.
var maxresults=5 menunjukkan jumlah postingan yang akan muncul pada related post. Anda bisa mengaturnya sesuai jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.
var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.
Jika kawan merasa pusing atau kesulitan dengan cara yang saya berikan diatas,
anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:
1. Buka situs http://www.linkwithin.com
2. Isi data-data yang diperlukan pada form yang telah disediakan
Email: alamat email andaBeri centang pada kotak kecil jika anda menggunakan background template yang gelap
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan
3. Klik Get Widget
4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai
Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda.
7. Kalau sudah Save template anda.
Posting Komentar