Thứ Năm, 10 tháng 12, 2009

Related Posts with Thumbnails for Blogger

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for therelated posts when they are presented attractively with thumbnails.
This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.
For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps
1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {

#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{
#related-posts a:hover{

#related-posts a:hover {
<script src='' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->
3.Now Find

<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>
Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- 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 cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop><a href='' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle="Related Posts";
</div><div style='clear:both'/>
<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=6;
5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";
To change the colors and all you will have to modify the CSS

If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out.

If you like to give me any suggestions on how to improve this widget,then it would be really great.

If you need a demo just check the related post thumbnails below this post. If you liked this widget,please do retweet and spread the news. :). UPDATE: Fixed the chrome Issue.So if you installed the widget before seeing this,then please update the widget.. :)

0 nhận xét:

Đăng nhận xét

Bạn có ý kiến hay thắc mắc về bài viết --> Hãy để lại nhận xét bên dưới !

Phản hồi của bạn luôn được đánh giá cao. Tôi sẽ cố gắng trả lời sớm nhất có thể.
Nhắc bạn:
1. Vui lòng đừng Spam ! Tôi sẽ xóa ngay lập tức nếu phát hiện.
2. Các bài comment phải nghiêm túc, không dung tục.
3. Nội dung phải liên quan tới chủ đề bài viết.
4. Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
5.Đối với những thắc mắc không liên quan đến bài viết này, bạn vui lòng để lại câu hỏi ở đây --> PC Help

Thân chào,

  Sản phẩm mới của KNC