Adding social bookmarking toolbar: How to add a social bookmarking toolbar to blogspot blog?

To increase your blog traffic, it's essential to use social bookmarking toolbar. It's very easy. In this hubpage, you will learn the ways to add a social bookmarking toolbar to your blogspot blog. All you have to add some CSS and some HTML code to your blogger template.

Steps to add a social bookmarking toolbar to blogspot blog

To add a social bookmarking toolbar to blogspot blog just follow the following steps:

Step 1: Accessing blogger's HTML code

  • Login to your blogger blog and go to Dashboard.
  • Access to Layout of the blog that you want to add the social bookmarking toolbar.
  • At last, click to Edit HTML to access the blog code.
  • Check Expand Widget Templates to see your whole blog template code.

Step 2: Adding/modifying CSS code of your blogger blog

  • Find ]]></b:skin> code from the code of your blog.
  • Copy the following code and paste it just before "]]></b:skin>".

CSS code of social bookmarking toolbar

div.my-bookmarks					{height:54px;	background:url('') no-repeat left top;	position:relative;	width:540px;}
div.my-bookmarks span.my-rightside	{width:17px;	height:54px;	background:url('') no-repeat right top; position:absolute;	right:-17px;}
div.my-bookmarks ul.socials			{margin:0 ;	padding:0 ;  position:absolute; bottom:0;	left:10px;}
div.my-bookmarks ul.socials li		{display:inline-block ; float:left ;	list-style-type:none ;	margin:0 ;	height:29px ;	width:48px ;	cursor:pointer ;	padding:0 ;}
div.my-bookmarks ul.socials a 		{display:block ; 	width:48px ; height:29px ;	font-size:0 ;	color:transparent ;}

.my-furl, .my-furl:hover, .my-digg, .my-digg:hover, .my-reddit, .my-reddit:hover, .my-stumble, .my-stumble:hover, .my-delicious, .my-delicious:hover, .my-yahoo, .my-yahoo:hover, .my-blinklist, .my-blinklist:hover, .my-technorati, .my-technorati:hover, .my-facebook, .my-facebook:hover, .my-twitter, .my-twitter:hover, .my-myspace, .my-myspace:hover, .my-mixx, .my-mixx:hover, .my-script-style, .my-script-style:hover, .my-designfloat, .my-designfloat:hover, .my-syndicate, .my-syndicate:hover, .my-email, .my-email:hover {
background:url('http://i31.tinypic.com/29ghhci.jpg') no-repeat ;
}

.my-furl 		{background-position:-300px top ;}
.my-furl:hover 	{background-position:-300px bottom ;}
.my-digg 		{background-position:-500px top ;}
.my-digg:hover 	{background-position:-500px bottom ;}
.my-reddit 		{background-position:-100px top ;}
.my-reddit:hover{background-position:-100px bottom ;}
.my-stumble 	{background-position:-50px top ;}
.my-stumble:hover{background-position:-50px bottom ;}
.my-delicious 	{background-position:left top ;}
.my-delicious:hover {background-position:left bottom ;}
.my-yahoo 		{background-position:-650px top ;}
.my-yahoo:hover {background-position:-650px bottom ;}
.my-blinklist 	{background-position:-600px top ;}
.my-blinklist:hover {background-position:-600px bottom ;}
.my-technorati 	{background-position:-700px top ;}
.my-technorati:hover {background-position:-700px bottom ;}
.my-myspace 	{background-position:-200px top ;}
.my-myspace:hover{background-position:-200px bottom ;}
.my-twitter 	{background-position:-350px top ;}
.my-twitter:hover{background-position:-350px bottom ;}
.my-facebook 	{background-position:-450px top ;}
.my-facebook:hover{background-position:-450px bottom ;}
.my-mixx 		{background-position:-250px top ;}
.my-mixx:hover 	{background-position:-250px bottom ;}
.my-script-style{background-position:-400px top ;}
.my-script-style:hover {background-position:-400px bottom ;}
.my-designfloat {background-position:-550px top ;}
.my-designfloat:hover {background-position:-550px bottom ;}
.my-syndicate 	{background-position:-150px top ;}
.my-syndicate:hover {background-position:-150px bottom ;}
.my-email 		{background-position:-753px top ;}
.my-email:hover {background-position:-753px bottom ;}

Step 3: Adding/modifying HTML code of your blogger blog

Click edit above to add content to this empty capsule.

  • Find <data:post.body/>code from the code of your blog.
  • Copy the following code and paste it just after "<data:post.body/>".

<b:if cond='data:blog.pageType == "item"'>

<br/>
<div class='my-bookmarks'>

<ul class='socials'>
	<li class='my-delicious'>	<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'/>																	</li>
	<li class='my-digg'>		<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Digg'/>																			</li>
	<li class='my-technorati'>	<a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Technorati'/>																</li>
	<li class='my-reddit'>		<a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'/>																	</li>
	<li class='my-stumble'>		<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'/>															</li>
	<li class='my-designfloat'>	<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Designfloat'/>														</li>
	<li class='my-facebook'>	<a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Facebook'/>																</li>
	<li class='my-twitter'>		<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://bigtweet.com/ext/bigt/bigt.js');document.body.appendChild(e)})())" /></li>
	<li class='my-furl'>		<a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Furl'/>																	</li>
	<li class='my-syndicate'>	<a href='http://feeds2.feedburner.com/webupd8' rel='nofollow' title='Subscribe to RSS'/></li>
	<li class='my-email'>		<a expr:href='" mailto:?subject=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Email this'/></li>
</ul>

<span class='my-rightside'/></div>

</b:if>

Step 4: Save all your work

This is the last step. You don't need to change or add any code. You just need to save your template code. Click on the button Save Template and that's all. Your blog template code is now saved.

In this way, you can add a social bookmarking toolbar to your blogger blog.

Live Demo: Live Demo of social bookmarking tutorial

One blog is implemented by using this tutorial code. This is the live demo. To see the live demo you may visit Adding Social Bookmarking blog.

© Written by rancidTaste

More by this Author


Comments 4 comments

Get Free Visitors 6 years ago

fine


kephrira profile image

kephrira 6 years ago from Birmingham

Very useful info. You can also add a social bookmarks toolbar to your browser for easily sharing links - http://www.socialbookmarks.media-toolbar.com/


birdy 6 years ago

It's what I was looking for. Thanks for sharing.


James 6 years ago

thanks for sharing man I m looking for it...

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working