How to Add Social Bookmark/Sharing Widget to your Blog

As the title says, every blog, website or posts needs a way, where users if they like your post to share it their friends! Now you cant expect every visitor to copy the URL of your blog and go to his/her own profile to post it. So we have a simple yet good looking widget that will solve all your problems!

How is the outcome?
sharingIscaring

So want the similar widget to your blog/website in just few steps?

Here it is,

Step 1:
Login to Blogger -> Go to Design -> Edit HTML
Tick Expand Widget Templates

Note: Before going further, Download the Full Template of your blog, if by chance you mess up with the code.

Step 2:
Find </head>
in the code.

Add the below part of code, above </head>.


<style type="text/css">
div.good-bookmarks {
height:54px;
background:url('http://bit.ly/sharingIScaring') no-repeat left top;
position:relative;
width:540px;
}

div.good-bookmarks span.good-rightside {
width:17px;
height:54px;
background:url('http://bit.ly/sharingIScaring') no-repeat right top;
position:absolute;
right:-17px;
}

div.good-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.good-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.good-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.good-furl, .good-furl:hover, .good-digg, .good-digg:hover, .good-reddit, .good-reddit:hover, .good-stumble, .good-stumble:hover, .good-delicious, .good-delicious:hover, .good-yahoo, .good-yahoo:hover, .good-blinklist, .good-blinklist:hover, .good-technorati, .good-technorati:hover, .good-facebook, .good-facebook:hover, .good-twitter, .good-twitter:hover, .good-myspace, .good-myspace:hover, .good-mixx, .good-mixx:hover, .good-script-style, .good-script-style:hover, .good-designfloat, .good-designfloat:hover, .good-syndicate, .good-syndicate:hover, .good-email, .good-email:hover {
background:url('http://bit.ly/kelvinBookmarks') no-repeat !important;
}

.good-furl {
background-position:-300px top !important;
}

.good-furl:hover {
background-position:-300px bottom !important;
}

.good-digg {
background-position:-500px top !important;
}

.good-digg:hover {
background-position:-500px bottom !important;
}

.good-reddit {
background-position:-100px top !important;
}

.good-reddit:hover {
background-position:-100px bottom !important;
}

.good-stumble {
background-position:-50px top !important;
}

.good-stumble:hover {
background-position:-50px bottom !important;
}

.good-delicious {
background-position:left top !important;
}

.good-delicious:hover {
background-position:left bottom !important;
}

.good-yahoo {
background-position:-650px top !important;
}

.good-yahoo:hover {
background-position:-650px bottom !important;
}

.good-blinklist {
background-position:-600px top !important;
}

.good-blinklist:hover {
background-position:-600px bottom !important;
}

.good-technorati {
background-position:-700px top !important;
}

.good-technorati:hover {
background-position:-700px bottom !important;
}

.good-myspace {
background-position:-200px top !important;
}

.good-myspace:hover {
background-position:-200px bottom !important;
}

.good-twitter {
background-position:-350px top !important;
}

.good-twitter:hover {
background-position:-350px bottom !important;
}

.good-facebook {
background-position:-450px top !important;
}

.good-facebook:hover {
background-position:-450px bottom !important;
}

.good-mixx {
background-position:-250px top !important;
}

.good-mixx:hover {
background-position:-250px bottom !important;
}

.good-script-style {
background-position:-400px top !important;
}

.good-script-style:hover {
background-position:-400px bottom !important;
}

.good-designfloat {
background-position:-550px top !important;
}

.good-designfloat:hover {
background-position:-550px bottom !important;
}

.good-syndicate {
background-position:-150px top !important;
}

.good-syndicate:hover {
background-position:-150px bottom !important;
}

.good-email {
background-position:-753px top !important;
}

.good-email:hover {
background-position:-753px bottom !important;
}
</style>

Now if you want ‘Sharing is Sexy’, instead ‘Sharing is Caring’, edit the code above in this fashion

Replace the highlighted code i.e., instead of left top and right top to left bottom and right bottom.

Step 3:
Now find, <data:post.body/>

Download this file from here, and paste the code above it.
Change @castelinokelvin to your twitter account you want to link to, else just remove that part.
Save the template and check if the code works

Thats it. So start writing some excellent posts that visitors wouldn’t stop themselves from bookmarking 🙂

Leave a Reply