How to create Related Posts Widget with Thumbnails for Blogger?

Display related posts on an blog post is a effective way to increase your blog pageviews. Today, I will guide you how to create a Related Post Widget with Thumbnails for your blog. It will show the related articles with a thumbnails in the same label or category. Following the steps bellow to complete this task. It worked for me.



Step 1: Go to your DashBoard ->Template->Edit HTML and check "Expand Widget Templates" check box.
Step 2: Search for </head> tab.
Step 3: Add the following code just before the </head> tab:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWuEhazjMKNoW3hVq2v6epY9qCtOQaP6uyVc4fRoWEaOk-9nTwdnRbI4QzlbRn01atBcqij0X7Qf71_HYsicQlRk_9OwfG6LKHOE_6yPpIPdvtZjxa4TqyBQ0_C_1lQ9ISe0pKMtnITpE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 4: Then search for

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

or

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

Step 5: Add the following code beneath the above line

<!-- Related Posts with Thumbnails Code Start-->
<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'/>
<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-->

Step 6: You can adjust the maximum number of related posts being displayed by editing this line in the code in the step 3
      var maxresults=5


Step 7: Click Save Template

Hope this helps!

Read more »

How to apply an XML template for blogspot?

Appearance of a blog is one of the most important factors that help us to attract more visitor to our blog. In this post, I will show you how to apply an XML template for your blog spot.
You can get blogger templates from btemplates.com, this is a website that has a huge source of templates for blogger.
Step 1: go to btemplates.com and select a template, then save it to your local machine

Step 2: Go to blogger.com, if you are using the new blogger interface, switch to the Old Blogger Interface

Step 3: On old blogger interface, click on Design tab

Step 4: Then, click on the Edit HTML tab in the top left conner

Step 5: On Edit HTML page, click on browse and find template you'd downloaded before on your local machine, then click Upload

Finish!

Hope this help!

Read more »

Create Alexa toolbar for your website/blog easily

Is there a simple way to create a toolbar for our website/blog that includes our own content and branding? The answer is yes and I will introduce to you the easiest way.
The Alexa Toolbar Creator help you to build a toolbar to helps you to connect with your visitor in order to increase traffic for your website/blog.
The Alexa Toolbar includes the following components:

• Your Logo which links to your website
• Site Search Field Button which helps your visitor to search content on your website
• RSS Button which adds dynamic headlines from your blog or other RSS feed to your toolbar.
• Menu Button which provides your users with direct links to the most important pages on your site, or anywhere online.
• Social networking Buttons such as Facebook, Twitter etc. which taking your user toolbar direct to your company Facebook or Twitter page

The following video will guide you how to build an Alexa Toolbar:







Alexa Toolbar is an excellent  way for you to connect with your customers, it will notify the users the latest content on your website and increase it traffic. Let's take it!
Create now
Hope this helps!

Read more »