Rabu, 29 Mei 2013

Related Post With Thumbnails Untuk Blogger

Related Post With Thumbnails Untuk Blogger

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-->
<!-- remove --><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: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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-->
4. Selepas itu, cari pula kod di bawah
<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-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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-->
6- Tukarkan nilai pada var maxresults=5; untuk mengubah jumlah post berkaitan yang korang nak letak..Kod ni Boleh didapati dalam Step No 3.

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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

9- Untuk ubah warna cari kod yang ada "Color" dan tukarkan kod warna (cth: #000000) kepada kod warna yang korang nak..

Comments
0 Comments

Tiada ulasan :

Catat Ulasan