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.

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.