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.
Widget Related post with thumbnails ni, akan menggunakan image yang korang upload ke dalam post menggunakan "blogger image uploader" (daripada post editor)
Tutorial Requested By Porah
Related Posts Widget with Thumbnails Untuk Blogger
Sila ikut langkah ini untuk memasukkan widget related posts with thumbnailske dalam blog korang.
(Jangan lupa untuk back up template korang)
1. Log in ke Blogger dashboard > Layout > Edit HTML dan check pada "Expand Widget Templates" check box
2. Kemudian Cari
</head>
3. Seterusnya, 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 == "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/AVvXsEiMm_5uQhyp19yd5LzFQm3PQkiIppda8OPOex2yF3LR0PLq9oMzwcPkcdNBywA1cnMgA5nZdipWCbUongB7Qn_EyYbspvoV2KWE-ZAHc0r2_1c3epquZrewPEr0A0aw5GtvoOinprmxV9g/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'>
Apa? tak jumpa juga? Hmm.. Kalau gitu cari kod ni pula.
<data:post.body>
Kalau masih tak jumpa, ertinya template korang ada problem.
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 == "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-->
<!-- 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-->
Customization
6. Tukarkan nilai pada var maxresults=5; untuk mengubah jumlah post berkaitan yang korang nak letak. Kod ni Boleh didapati dalam Step No 3.
5. Tukarkan Related Posts Untuk mangubah tajuk widget,
var relatedpoststitle="Related Posts";
7. Untuk menetapkan gambar default sekiranya post korang tidak mempunyai gambar, boleh ubah line ini
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMm_5uQhyp19yd5LzFQm3PQkiIppda8OPOex2yF3LR0PLq9oMzwcPkcdNBywA1cnMgA5nZdipWCbUongB7Qn_EyYbspvoV2KWE-ZAHc0r2_1c3epquZrewPEr0A0aw5GtvoOinprmxV9g/s400/noimage.png";
8. Untuk ubah warna cari kod yang ada "Color" dan tukarkan kod warna (cth: #000000) kepada kod warna yang korang nak
Apa yang menjadikan widget ini lebih baik daripada widget LinkWithin? Kita mudah untuk customize mengikut design blog, terutama sekali pada warna dan hanya mengunakan internal link. Ini bermaksud, loading pada related post adalah lebih laju.
Full color customization will be updated soon** sekarang ni bz sikit sorry >.<
Tags : Related Post With Thumbnails Untuk Blogger, Link Within Post, Related Post
Sumber : BloggerPlugins
No comments:
Post a Comment
Don't forget to drop your comment.. Thanks ya!