How to Add Popular Posts Widget to Blogger

Show the popular stories and articles of your blog in your sidebar. Give your visitors a reason to stay on your blog. Add popular posts widget in Blogger. It work on the total number of comments a post gets. So we can also call it as 'Most Commented Widget'.

Many of you have expressed an interest in this widget, so I thought to give you the tutorial on it. 

You can get this widget form PostRank and Feedjit. Just register your blog and get the widget.

Otherwise there is also a JavaScript available for the popular posts widget for Blogger.

Go to Blogger's Design > Page elements tab and click “Add a Gadget” and select “HTML/JavaScript” and copy paste the following code:

<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://simplebloggertutorials.blogspot.com/";
</script>
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/popularpost/popularpostblogger-min.js' type='text/javascript'></script>

Now for a tutorial to how to customize this widget:
1. Change the link of home_page to your homepage name.
2. numposts is the number of posts you got.
3. maxshowresult is the maximum result that will be shown.
Change this accordingly.

You can also download the script and put it on your server or free JavaScript hosts:

• http://sites.google.com/site/abufarhansite/home/popularpostblogger-min.txt
• http://www.hotlinkfiles.com/files/2709999_xqhsi/popularpostblogger-min.js
• http://dl.getdropbox.com/u/708209/scriptabufarhan/popularpost/popularpostblogger-min.js

Read More

Related Posts Widget with Image Thumbnail for Blogger

Related posts widget is demanding for Blogger users as this help your blog readers to know about your older posts. While there are many widgets available on different blogs, there aren’t many which are more customizable than this one which I will be sharing with you.

Why more customizable? It’s because you will get both Related Posts and Recent Postswidget which can be a link list, link list with image thumbnail or with only thumbnail with popup title, transition effects and above all, it’s fast. This is one of the best widget for Blogger ever made and found on the web.

Mike More of More Tech Tips made this widget by using the awesome feature of jQuery. The installation is also very easy. Let’s start with it.

So first you have to visit easy setup page and choose the options you like to have. To start with live examples, you can visit demo 1, demo 2, demo 3 or demo 4. After selecting the correct options click “Update Demo and Code”.

After generating you will find required scripts and codes under the Code section. There are two parts. First is the jQuery library, jQuery plugin, which will run the related post widget and the CSS. Second is therequired HTML part. Here is an example image, click to enlarge:

Click to view large image

To add the first part to Blogger, follow the steps below:

Step 1: Go to Dashboard > Page Elements > Edit HTML tab.

Step 2: Find ]]></b:skin> tag and below it add the jQuery library and the plugin, which is required, and the CSS files, if needed. Example:

<!-- CSS (required if needed) -->
<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />

<!-- jQuery Library (required only once) -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/>

<!-- jQuery Plugin (required) -->
<script type='text/javascript' src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js'/>

If you have previously added the jQuery library then you need not to add another one, just check if it’s latest or not (marked in red) and if not the latest, then you can replace it.

If you have selected Widget Loading option to “jQuery method call”, some extra script code will appear in the Code section under Calling widget, example: 

<!--~~~~~~~~ Calling widget --> 
<script type="text/javascript"> 
//<![CDATA[ 

$(document).ready(function(){ 
$('#related-posts-widget').relatedPostsWidget(); 
}); 
//]]> 
</script> 
<!--~~~~~~~~~~~~~~~~~~~~~~~~-->

This should be added just before closing </head> tag.

Step 3: Save your template.

Step 4: Adding the second part is easy. You can add it anywhere you like. You can add it to sidebar or within and below post.

1. If you want it to add to sidebar then go to Dashboard > Page Elements tab and add therequired HTML by adding a HTML/JavaScript gadget.
2. If you want it below post then go to Edit HTML tab and check “Expand Template Widget”. Find<data:post.body/> and below it and the required HTML. Example:

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --> 
<div class="related-posts-widget"> 

<!-- { 
thumb_size:'s104-c' 
,titles:0 
,max_posts:12 
,tags:[] 
,show_n:4 
,animate:'width' 
} --> 
loading.. 
</div> 
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

If you have selected Post Pages Only option to No then put the generated required HTML code intoconditional tags.

<b:if cond='data:blog.pageType == "item"'>
Generated required HTML
</b:if>

This ensures that it picks up correct related posts.

Step 5: Save your template.

Notes:

To have the thumbnails for your widget, your post images should be hosted on Picasa Web. For Bloggers who don’t know, when you write your post in Post Editor and add images from there, the image gets automatically uploaded to Picasa Web.

You can find more detailed options in:

• Project
• Plugin Options

If you are having any problem with this related post widget then ask Mr. More on his original post to get better answer.

Read More

Add Floating Share Buttons Like Mashable to Blogger

You must have seen in many Wordpress blogs including Mashable that they use floating share buttons. Now it’s time for Blogger to add a floating share buttons widget. In this tutorial I will tell you the method that can be used to implement this widget to Blogger by using the features of jQuery. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

Step 1. Go to Design > Edit HTML tab and check “Expand Widget Templates”. Find<data:post.body/> and before this snippet add:

<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='wdt'> Tweet Button </div>
<div class='wdt'> Facebook Share </div>
<div class='wdt'> StumbleUpon </div>
<div class='wdt'> Digg </div>
<div class='wdt'> The bookmarking button you want to add next </div>
</div>
</b:if>

Add your share buttons scripts between “<div class=’wdt’>add the share button code</div>”. You can get script codes from the bookmarking sites that you may like to add or you can also see my blog posts labeled as Button Counter or in the demo itself or in the normal floating share buttons. Here is an example to how to add the codes:

<div class='wdt'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

Step 2. Add the latest jQuery library immediately after ]]></b:skin>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>

If you have previously added it, then you need not to add another one, just check whether it’s the latest or not and then replace it.

Step 3. Next is to add the JavaScript which will make the share box to float like Mashable that I have find out from CSS Tricks and modified a little by adding “.ready()” function. Find </head> and before it add:

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

Step 4. Now is the CSS part. Add the below styling properties above ]]></b:skin>:

#sharebox {
float: left;
margin-left: -80px;
background: #992211;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

If you want the share box widget to float further left to your post body section, then increase the margin-left pixel value (marked in red) and if you want it to float closer then decrease it.

Step 5. Save your template.

If you are good with CSS then you can get different styles with it and give the floating share box a new look.

Read More

Add Floating Share Buttons Like Mashable to Blogger

You must have seen in many Wordpress blogs including Mashable that they use floating share buttons. Now it’s time for Blogger to add a floating share buttons widget. In this tutorial I will tell you the method that can be used to implement this widget to Blogger by using the features of jQuery. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

Step 1. Go to Design > Edit HTML tab and check “Expand Widget Templates”. Find<data:post.body/> and before this snippet add:

<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='wdt'> Tweet Button </div>
<div class='wdt'> Facebook Share </div>
<div class='wdt'> StumbleUpon </div>
<div class='wdt'> Digg </div>
<div class='wdt'> The bookmarking button you want to add next </div>
</div>
</b:if>

Add your share buttons scripts between “<div class=’wdt’>add the share button code</div>”. You can get script codes from the bookmarking sites that you may like to add or you can also see my blog posts labeled as Button Counter or in the demo itself or in the normal floating share buttons. Here is an example to how to add the codes:

<div class='wdt'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

Step 2. Add the latest jQuery library immediately after ]]></b:skin>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>

If you have previously added it, then you need not to add another one, just check whether it’s the latest or not and then replace it.

Step 3. Next is to add the JavaScript which will make the share box to float like Mashable that I have find out from CSS Tricks and modified a little by adding “.ready()” function. Find </head> and before it add:

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

Step 4. Now is the CSS part. Add the below styling properties above ]]></b:skin>:

#sharebox {
float: left;
margin-left: -80px;
background: #992211;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

If you want the share box widget to float further left to your post body section, then increase the margin-left pixel value (marked in red) and if you want it to float closer then decrease it.

Step 5. Save your template.

If you are good with CSS then you can get different styles with it and give the floating share box a new look.

Read More