Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

As already discussed here in this blog, social networking buttons widget is a must for blogs and moreover you must be very creative while adding these buttons.
To make your work easier, here’s an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.
Screen-Shot:

Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

So have a look on this widget, designed by Eight7Teen [Live Demo]

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the “Expand Widget Templates” box.

Step 2:
Now find (CTRL+F) this in the code:

</head>

And immediately BEFORE/ABOVE it, paste this code:

<!–HIDDEN-BOOKMARKS-STARTS–>
<style type=’text/css’>
div.beauty-bookmarks {
height:54px;
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png’) no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png’) no-repeat right bottom;
position:absolute;
right:-17px;
}

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

div.beauty-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.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url(‘http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sexysprite.png’) no-repeat !important;
}

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

</style>
<!–HIDDEN-BOOKMARKS-STOPS-https://bloggerstop.net–>

NOTE: To show the phrase “Sharing Is Caring” instead of “Sharing Is Sexy“, edit the above code like this:
Replace the text highlighted in BLUE color, i.e. instead of left bottom and right bottom use left top and right top.

Step 3:
Now find this in the code:

<data:post.body/>

And BELOW/AFTER that, paste this code:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’beauty-bookmarks’>
<ul class=’socials’>
<li class=’beauty-delicious’><a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-digg’><a expr:href=’&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-technorati’><a expr:href=’&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-reddit’><a expr:href=’&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-stumble’><a expr:href=’&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-designfloat’><a expr:href=’&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-facebook’><a expr:href=’&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-twitter’><a expr:href=’&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’/></li>
<li class=’beauty-furl’><a expr:href=’&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’beauty-syndicate’><a href=’http://feeds.feedburner.com/bloggerstopnet’ title=’Subscribe to RSS’/></li>
<li class=’beauty-email’><a expr:href=’&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
</ul>
<span class=’beauty-rightside’/></div>
</b:if>

You may of course remove any button code, if you do not want to show it.

Now save the template.

That’s it. Now just write some good posts worth bookmarking πŸ˜‰

via CssReflex

Leave a Reply

162 Comments on "Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
AB
Guest

Not working !!

View Comment
Anonymous
Guest

wow .. nice widget buddy .. its working .. πŸ˜€

View Comment
imran
Guest

wow!!its coooooooooooool!!
thx fr sharing!!

View Comment
ID-Bloggers
Guest

Hei.. Thanks… This Widget Powerfull…

Can you Make Tutorial how to make widgetn tweet this?? Beside your title post…

View Comment
Divya Sai
Guest

Here’s the tutorial you are looking for:

https://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html

But anyways, I think I should write another tutorial on this topic….as I have found another button from the same service(tweetmeme), but better than the previous one…

View Comment
Richard
Guest

Cool… Works for me, πŸ˜‰

Thanks for sharing!

Orange County web design

View Comment
widgetblogger.co.cc
Guest

Nice post

View Comment
REKHILESH
Guest

Ya realy thanks…But its not suitable for mY azOOmer template.

http://www.azOOmer.blogspot.com

View Comment
Kothapally Arun
Guest

thanks for the code it works for me.

View Comment
blogging for extreme beginners
Guest

Every template will have different coding.so we need to adjest the setting based on that.

Thanks for sharing with us.

Your best friend.R.ramesh

View Comment
Ali Qayyum
Guest

r u jin? no! you are ginus brother
thanks for the cool post. i had been searching this code since 4 months

View Comment
Guest
Guest

its not working on my site

View Comment
Divya Sai
Guest

Your blog link buddy !

View Comment
sahil
Guest

i cant find the text which is given in step 3.
i have the hot orange t template
http://sahilkhatter.blogspot.com/

View Comment
Divya Sai
Guest

Hello Sahil,Β 
Β 
<span>Mark the "<span>Expand <span>Widget</span> Templates</span>" box in the "Edit HTML" page, and you'll see that code.Β 
</span>Β 
Β 
RegardsΒ 
Sai

View Comment
Reza
Guest

This article is just great, can i post it to my blog, with your blog as the resource of course.. πŸ˜€

View Comment
Divya Sai
Guest

Of course Reza you can, but make sure it's NOT a word-to-word copy πŸ™‚

View Comment
Reza
Guest

Ok Divya, thanx for the tips..
Btw, blogger did't allow me to post any HTML code, can you help me to solve this problem..?

View Comment
ProfessionalLab beta 2009
Guest

Thanks a lot. You rocks! πŸ˜‰

View Comment
emanuel
Guest

Why is it showing in the search pages and not in the front page? Explain that! For some reason I am getting the buttons in the older postings and not the front page.

View Comment
wpDiscuz