ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on June 25, 2011

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

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Get Free Visitors 7 years ago

      fine

    • kephrira profile image

      kephrira 7 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/

    • profile image

      birdy 7 years ago

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

    • profile image

      James 7 years ago

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

    Click to Rate This Article