Related Posts bersama Thumbnails (LinkWithin Version 2)

Adakah anda pernah memasang widget related posts dari Linkwithin? Yang ini lain sikit ia akan bergerak .Memang sesuai untuk blog anda.

Bagi sesiapa yang berminat sila ikut tutorial dibawah ini.

Langkah 1

1) Login ke blogger -> Pergi Design -> Tick "Expand Widget Templates"

2)Cari kode ini </head>

3) Kemudian gantikan kode diatas ini dengan dibawah ini

<!--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: black; font-family: Georgia, &#8220;Times New Roman&#8221;, 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> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>

Langkah 2

Sekarang cari lagi kode dibawah


<div class='post-footer-line post-footer-line-1'>

Jika tidak jumpa kode diatas diatas, cuba cari kode dibawah ini.

<p class='post-footer-line post-footer-line-1'>



Jika sudah jumpa,masukkan semua kode dibawah ini di salah bawah salah satu kode diatas.




<!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->




Akhir sekali Save dan lihat hasilnya.
Info:-
Untuk menampilkan berapa banyak jumlah related posts boleh edit kode dibawah ini:
var maxresults=5;

Untuk mengganti tajuk, boleh edit kode ini:
var relatedpoststitle="Related Posts";

Untuk tukar default thumbnail, anda boleh edit kode ini
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eqKC6V_z6lFdLpsDzliHfu_43bzvMKjm0Wu5GUwrw80Wt3tizB3IRVzuSHeD9zvK7ctMTG37wsqYvLfi-PrxJfDFUoX7mzJFJ-kc_7GSSFRtxCwelROy2OIaiqRZo7t_5IewR4EPzfg/s400/noimage.png";

Untuk tukar warna Splitter Line , anda boleh edit dibawah ini
var splitter;


Selamat Mencuba.