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 + "&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 + "&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 + "&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 + "&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 + "&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 + "&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 + "&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 + "&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 + "&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
