Beautiful Social Bookmarking Widget For Blogger

Blogging without social bookmarking is pretty hard to gain quality traffic and here I am going to teach you how to add a beautiful social bookmarking widget for blogger/blogspot blogs. This widget comes with essential bookmarking icons such as Tweetmeme button, Google Buzz, Facebook share, Digg and lots more. You also can add some more social bookmarking button to your needs. So lets get into the installation part on your blogger blogs. Before you could start the process, back your template.

Social bookmarking plugin for blogger

Live Demo

Step 1: Login in to your Blogger dashboard and navigate to Layout > Edit HTML and check on Expand Widget Templates.Search for the code  ]]></b:skin> and replace it with the below code

#share{
	/* The share box container */
        float:left;
	width:500px;
	background:#231f20;
	height:220px;
	margin:60px auto;
	overflow:hidden;

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

#share-label{
	/* The image on the right */
	background:url(http://i41.tinypic.com/90352u.jpg) no-repeat 50% 50%;
	float:left;
	height:220px;
	width:200px;
}

#sharebox{
	/* This is where the animation takes place */
	position:relative;

	border-right:1px solid #DDDDDD;
	width:290px;
	height:220px;
	background:#747474;
	float:left;

	border-bottom-left-radius:12px;
	border-top-left-radius:12px;

	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-topleft:12px;

	-webkit-border-bottom-left-radius:12px;
	-webkit-border-top-left-radius:12px;
}

.btn{
	/* This class is assigned to every share button */
	background-color:#747474;
	height:90px;
	left:0;
	top:0;
	width:60px;
	position:relative;
	margin:20px 0 0 10px;
	float:left;
}

.bcontent{
	/* Positioned inside the .btn container */
	position:absolute;
	top:auto;
	bottom:20px;
	left:0;
}

.thanksto{
	position:absolute;
	bottom:2px;
	right:4px;
	font-size:10px;
}

.thanksto a,.thanksto a:visited{
	color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
	display:block;
}

span.fb_share_count_top.fb_share_no_count {
	line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
	display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
	background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
	display:block;
}
]]></b:skin>

Step 2: Now at this step we will adding the share button within the CSS style. Search for the code <b:if cond='data:post.commentPagingRequired'> and replace it with the below code

<div id='share'>
<div id='sharebox'>

<div class='btn digg'><div class='bcontent'><a class='DiggThisButton'/><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div></div>
<div class='btn tweetmeme'><div class='bcontent'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div></div>
<div class='btn dzone'><div class='bcontent'><script language='javascript' src='http://widgets.dzone.com/links/widgets/zoneit.js'/></div></div>
<div class='btn reddit'><div class='bcontent'><script src='http://www.reddit.com/button.js?t=2' type='text/javascript'/></div></div>
<div class='btn facebook'><div class='bcontent'><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></div>
<div class='btn buzz'><div class='bcontent'><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' 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>
</div>

<div id='share-label'>
<!-- This is where the share some love image appears -->
</div>
</div>

Step 3: Save your template and check for changes. If you find any issues with installation, drop in your comments.

April 19, 2010. This entry was posted in Blogger, CSS, jQuery, Tutorials and tagged , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

7 Responses so far!

  1. Nice article, I was looking for this for a long time.

  2. U didn’t put StumbleUpon and Delicious Links in it?
    .-= Juhi´s last blog ..Lauta do mere College Ke Din =-.

  3. I didn’t see anything in the demo.

  4. hello, it’s a great tutorial but i feel some problem,

    it says “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.” after replacing …..any solution?

  5. great you tutorial :) i like this bookmarking widget :) thanks dude for you share…

  6. there is nothing on the demo

  7. Yes…,there is nothing on the demo.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>