Dengan menggunakan links kepada Post korang yang berkaitan (Related Post) beserta dengan penggunaan Thumbnail (Image snippet) dapat membantu meningkatkan kadar page view per user..Pengunjung blog akan tertarik dan terdorong untuk 'Klik" pada post yang berkaitan kalau dihias dengan Thumbnail yang menarik..
Apa yang menjadikan widget ini lebih baik daripada widget LinkWithin? Blog lebih kemas, mudah untuk customize mengikut design blog, dan loading pada related post lebih laju..
1- Log in - Dashborad - Template - Edit Html
2- Kemudian Cari
<head>;3- Copy kod di bawah dan paste di atas kod yang korang cari tadi.
<!--Related Posts with thumbnails Scripts and Styles Start-->4. Selepas itu, cari pula kod di bawah
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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: #000000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoW49KHR29bpNwmkC7QPjF9vmOI98xyQ1TPJwV_QpgsnfkIwo9o6vdBbXq7hk0CNU-cKu-_Cq4Mg1kd4pdowSZe1GpoFtlcWa_oJ3ufikwUaa8Ch-UVlAnAFGRkpH2Rwq9LLu42w5SiQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<div class='post-footer-line post-footer-line-1'>Kalau korang tak jumpa, korang cari kod di bawah ni pula
<p class='post-footer-line post-footer-line-1'>tak jumpa juga? Kalau gitu cari kod ni pula..
<data:post.body>5- Dah jumpa kod tu? Ok, step seterusnya, korang copy kod di bawah dan paste di bawah mana-mana kod (yang korang jumpa) tadi..
<!-- Related Posts with Thumbnails Code Start-->6- Tukarkan nilai pada var maxresults=5; untuk mengubah jumlah post berkaitan yang korang nak letak..Kod ni Boleh didapati dalam Step No 3.
<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
7- Tukarkan Related Posts Untuk mangubah tajuk widget, var relatedpoststitle="Related Posts";
8- Untuk menetapkan gambar default sekiranya post korang tidak mempunyai gambar, boleh ubah line ini..
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoW49KHR29bpNwmkC7QPjF9vmOI98xyQ1TPJwV_QpgsnfkIwo9o6vdBbXq7hk0CNU-cKu-_Cq4Mg1kd4pdowSZe1GpoFtlcWa_oJ3ufikwUaa8Ch-UVlAnAFGRkpH2Rwq9LLu42w5SiQ/s400/noimage.png";
9- Untuk ubah warna cari kod yang ada "Color" dan tukarkan kod warna (cth: #000000) kepada kod warna yang korang nak..
0 Comments