How to add facebook widget to blogger

As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:







Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)

1. Go to Design / Templates  >>  Edit Templates  >>  Tick the expand widget templates box
2. Find the tag </head>  (Press Ctrl + F to find it)
3. Place this code right above the tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

4. SAVE the templates

Step 2: Add Facebook widget code to blogger

1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
2. Place the code below into the content box

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZDFTSNRNDES_VFv-ND51gOHE5Q4iXwWL7KCdEknGYt8gsFsJIhSkjEdKO_HfWGSlkKHKXvVw5ISnmPbVGVWTwDfWBeFM9qZh2yGGFQIb6_dSidCswgUF1VwS8zDzmTq_3ITec8Lykjw7/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>/ <a href="http://www.blogonblogspot.com/">+Gadget</a></span></div></div>

3. SAVE

Read More

8:27 PM | 0 comments

Mashable Like Floating Social Bookmarking Widget For Blogger

Its been a while many got impressed with Mashable’s floating social bookmarking widget and many tried and came up with a wordpress plugin. But actually people forgot about creating a floating social bookmarking plugin for blogger. So here in this post, I am going to teach how to add floating social widget to your blogger/blogspot blogs.

Live Demo

Step 1: Navigate to Edit HTML from Blogger dashboard and check Edit Widget Template. Search for ]]></b:skin> and replace it with the below code

#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
]]></b:skin>

Step 2: This step involves inserting the widget functions into your template. Therefore, place the below code before <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
<a href='http://www.bloggermint.com/2010/06/mashable-like-floating-social-bookmarking-widget-for-blogger/'><font size='0.3'>Bloggermint</font></a>
</b:if>

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage. If you need any customization on this widget, drop in your comments and you can also leave your questions at Bloggermint Answers

Read More

8:27 PM | 0 comments

SEO plug-in for Blogger blogs

Confused? You shouldn’t be. You might have read about so many SEO plug-ins which are available for WordPress blogs. It’s a little sad that Blogger doesn’t provide built-in SEO plug-ins for Blogger blogs.
Did you ever hear about “SEO Blogger“? This is what I’m going to share in this post.
As the name suggests, SEO Blogger is a SEO plug-in for Blogger blogs which works with Google Chrome and Mozilla Firefox. After adding this plug-in, you can optimize your Blogger post for search engines just after you publish it. This plug-in will ask you to add description and keywords for your post just after you hit publish button (as in the image below).

What will SEO Blogger plug-in do?

SEO Blogger will add the ‘Description’ and ‘Keywords’ for the respective post in the blog template as we did it manually in one of my post (How to add meta-tags for individual blogger blog post?)

The code which will be added in the post will be same as in the above post but with this plug-in you can do it just after publishing your post.

When you’ll click on ‘Submit’ the code like in the following image, will be added to you template;

Get this Plug-in

To use this plug-in, you have to work with the old interface of Blogger. As I said above, this plug-in will work with Chrome and Firefox, so if you are using some other browser, then you have to switch to one of these browser in order to work with this plug-in.

Steps to get this plug-in;

1. Back-up your template (How and Why).
2. Install Grease Monkey Add-on (click here) , first. (only for Firefox users. Chrome has this script, already)
3. Now, click here to install SEO Blogger script.
4. Restart you browser.

That’s it, you are done. Now you can go to your post editor, write down your article and add the keywords and description of your article just after you hit publish.

Note: After you hit Submit button, you may have to wait for few seconds to let the plug-in do it’s work.

I hope it will help you to optimize your blog post for search engines, easily.

Do you know about any other SEO plug-in for Blogger or may be for WordPress?

Share with us.

Read More

8:21 PM | 0 comments