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:

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-http://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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

167 comments

Write comments
Anonymous
May 13, 2009 11:25 PM delete

wow .. nice widget buddy .. its working .. :D

Reply
avatar
imran
May 14, 2009 2:19 AM delete

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

Reply
avatar
May 18, 2009 7:22 AM delete

Hei.. Thanks... This Widget Powerfull...

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

Reply
avatar
May 18, 2009 7:42 AM delete

Here's the tutorial you are looking for:

http://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...

Reply
avatar
May 21, 2009 3:26 AM delete

Cool... Works for me, ;)

Thanks for sharing!

Orange County web design

Reply
avatar
June 29, 2009 6:11 AM delete

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

www.azOOmer.blogspot.com

Reply
avatar
July 07, 2009 2:51 PM delete

thanks for the code it works for me.

Reply
avatar
July 12, 2009 3:04 AM delete

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

Reply
avatar
July 23, 2009 1:42 PM delete

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

Reply
avatar
Guest
August 19, 2009 2:20 PM delete

its not working on my site

Reply
avatar
Divya Sai
August 19, 2009 2:22 PM delete

Your blog link buddy !

Reply
avatar
sahil
August 24, 2009 6:16 AM delete

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

Reply
avatar
Divya Sai
August 24, 2009 6:37 AM delete

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

Reply
avatar
September 01, 2009 9:15 AM delete

This article is just great, can i post it to my blog, with your blog as the resource of course.. :D

Reply
avatar
September 01, 2009 9:31 AM delete

Of course Reza you can, but make sure it's NOT a word-to-word copy :)

Reply
avatar
September 02, 2009 9:40 AM delete This comment has been removed by the author.
avatar
September 02, 2009 9:45 AM delete

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..?

Reply
avatar
September 23, 2009 10:11 AM delete

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.

Reply
avatar
September 23, 2009 12:09 PM delete

Hello Emanuel,

If you have used the same code as in the post above, then the buttons should neither appear in the homepage nor in the search results.
The buttons are supposed to appear only below the posts.

If you want to show buttons in the front page too, then delete these two lines from the code above (STEP 3):

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

and

</b:if>

Reply
avatar
September 30, 2009 10:25 AM delete

juz wanna try this emoticon :))

Reply
avatar
October 02, 2009 6:01 AM delete

hey it dosent work ????
:((

Reply
avatar
October 05, 2009 11:20 PM delete

i used inkstain template, by templatelite.com. i have used another share widget, but i want to change it to your nice widget. but it can't work. i can't find "data:post.body" in template that i used. can you give solution where i supose add the code?

thanks, very much.

Reply
avatar
October 05, 2009 11:23 PM delete

ups, my blog at www.neno09.co.cc

thanks

Reply
avatar
October 06, 2009 2:10 PM delete

@neno

click on the small radio button "Expand Widget Templates", in the Layout -> Edit HTML page.

Reply
avatar
bt
October 16, 2009 11:37 AM delete

nice tutorial but it not work on my blog

Reply
avatar
Anonymous
October 21, 2009 11:42 AM delete

:)) nice article

Reply
avatar
November 08, 2009 7:11 AM delete

Hi Divya Sai, great tutorial indeed. Thanx for sharing


Best Regards,
wmgeek from Freeware PPC

Reply
avatar
Jen
November 09, 2009 6:36 PM delete

This is a great post! I have been searching all day for something like this. I just have one question. Is there any way to make the social networking buttons a couple of line breaks after the last line of the post?

Reply
avatar
December 09, 2009 1:47 PM delete

Works great also as a social networking link on the sidebar.

Reply
avatar
December 09, 2009 1:55 PM delete

@jen, SVR and Earl
Thank you guys.

@Jen
Yes that is possible, simply place a <br/> between these lines:
<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>

so it will now become:

<b:if cond='data:blog.pageType == "item"'>
<br/>
<div class='beauty-bookmarks'>

Reply
avatar
January 01, 2010 3:18 PM delete

Its not working for me.pls check my blog.
http://knownrandomness.blogspot.com

Reply
avatar
January 01, 2010 3:31 PM delete

Hey there, when I checked your blogs source code, this particular code wasn't there.
First follow Steps #1 and #2, then tell me and I'll check the code, and then proceed with step #3.

Reply
avatar
January 01, 2010 3:46 PM delete

@divya
Done all 3 steps
pls check now

Reply
avatar
January 01, 2010 4:09 PM delete

Hi Ankit,
I have just checked two of your posts and found the widget working perfectly, are you still finding any problem in it?

Reply
avatar
January 01, 2010 4:44 PM delete

@divya
sorry i didn't check it the second time around.It's working.
thanks.
One more question though:
i read the article on loading speed on your site.does my blog have too many java scripts?
And is the 'read more' hack going to help with it or ,being a java script itself, increase the loading time even more?
Current loading time of my page is 2.7 s which is slow i guess.

Reply
avatar
January 02, 2010 5:30 AM delete

Nah 2.7 is not all bad. Site speed will be an important factor, but remember that it'll be ONE of those important SEO factors. Overall ranking 'll depend on a lot of other factors too. And 2,7 is a bit slow only if consider all websites+blogs, so if you consider only blogs and then further narrow down to only your biche of blogs, then 2.7 is rather quite good. If possble lower the no. of images, and use alt tags for all the images on your blog. And focus more on your content.
Read more will not help you in SEO, rather it will add some scripts to your blog as you have mentioned. SEs cannot read/understand scripts but they do note the time it takes to load those files. But ofcourse read more 'll help your readers to load your blog faster (as their browsers can understand scripts) and that is also good for blog.

Reply
avatar
January 02, 2010 6:20 AM delete

thanks for the detailed reply

Reply
avatar
January 02, 2010 1:09 PM delete

hi, I applied your given widget, presently not working ....i am removing this one in my blog.

please provide another diffrent one for us.

Thank you.

Reply
avatar
January 02, 2010 1:20 PM delete

Do not remove the code until I check it. Anyways try these bouncing social bookmarking icons

Reply
avatar
January 13, 2010 4:54 PM delete

(my blog is edible-moments.blogspot.com btw :P)

Reply
avatar
January 14, 2010 12:59 AM delete

Hey Zahra,

Lovely blog. Great pictures and recipes.

BTW I checked the source-code of your blog, and found the first code (till step #2)
but not the code of Step #3. Please add it too and tell me if that worked.

Reply
avatar
January 14, 2010 7:49 PM delete

Hi! I was pretty sure I had added it.....but now when i go to edit layout...I cant find Data.post part in the text!! :(

Reply
avatar
January 14, 2010 8:01 PM delete

oh! I clicked on expand widget check box and it was suddenly visible...so I copy pasted ...but it still isnt working :/

Reply
avatar
January 15, 2010 7:06 AM delete

Hey Zahra,

Checked your blog again, but couldn't find that particular code (step #3)

BTW I have suggestion for you, as pictures are an important part of your blog-posts, I'm sure many people definitely click them too. So you can try this new drag to share bookmarking widget. If you use it, then your visitors can easily bookmark your posts through your pictures.
Moreover at the end of all your posts, place a picture of a muffin or a pie etc. which can be dragged and shared.

Reply
avatar
January 15, 2010 10:04 AM delete

Gud nite Dsai..
I'm trying this widget now in my blog, but i can't find the way to reduce the background width (it's going across the border). And how to make it centered, because i remove some of the button.

Thx,

Yusuf.

Reply
avatar
January 15, 2010 10:14 AM delete

Hey Yusuf,

You have to change the width and the position, i.e.
from this

position:relative;
width:540px;

to this

position:center;
width:NEW_WIDTHpx;

you'll have to change position to center at two more places.
Gud nite :)

Reply
avatar
January 15, 2010 3:10 PM delete

Not working on my website. Can you take a look and let me know how to fix it? Thanks,

- Greymarch
http://www.greymarch.com

Reply
avatar
January 15, 2010 4:38 PM delete

Opps! Nevermind, I fixed it. A previous comment gave me the tip I need. Thanks!

- Greymarch
http://www.greymarch.com

Reply
avatar
January 16, 2010 11:25 AM delete

@Divya Sai , Excellent Tutorial.I wanted to add Sharing is [CARING] rather than Sharing is [SEXY] as shown in the above post , Please can you help me on this issue.

Thanks .

http://indialivetimes.blogspot.com

Reply
avatar
January 16, 2010 11:40 AM delete

Hi Aryan,

In the code above (first two code blocks), instead of left bottom and right bottom use left top and right top

Reply
avatar
January 16, 2010 1:26 PM delete

Hi Divya ,

Thanks so Much for your Help . I will try now as you have instructed. I was searching for the whole process for last 15 days and now I feel really excited .

Thanks a Lot Again

Reply
avatar
January 17, 2010 8:16 AM delete

Hello Divya ,

Thanks for your Excellent Support , I have been Able to add the Sharing and Caring Button to my Blog . Great Work By You.

Thanks.

Reply
avatar
January 17, 2010 11:49 AM delete

You are most welcome Aryan, I'm glad I could help you :)

Reply
avatar
January 18, 2010 5:08 PM delete

HEY! THANKS!!

Great post & looks great on my new blog! ;)
Im new to this so I been searching for while for one that looks cool. *thumbs up*


www .twitter.com/townissnatty

Reply
avatar
January 23, 2010 2:03 PM delete

Hi,
I've added the widget, but when I did, it stretched into my sidebar and covered up info. Now, I've changed the width and it goes into two lines, but the "sharing is sexy" is covered up? Any help would be appreciated!

Reply
avatar
January 24, 2010 4:07 AM delete

@Bunny, remove three buttons from that list.
If you want to fit them all, then send your template to me at bloggerstop.net [at] gmail [dot] com

Reply
avatar
January 24, 2010 4:08 PM delete

Thanks, I got rid of three links and that seemed to correct it!

Reply
avatar
January 27, 2010 2:21 AM delete

Hey there. I don't think its working on my blog. :/
It doesn't even appear after my post. Could you help me?

http://amahleestory.blogspot.com/

Reply
avatar
January 27, 2010 7:54 AM delete

Hi Amah,

I have just visited your blog and found the widget working perfectly.
Here's the screenshot: http://i49.tinypic.com/333lfe0.png

Reply
avatar
January 27, 2010 8:21 AM delete

Hmmm.. this is weird cause I can't see it myself.

Reply
avatar
January 27, 2010 8:26 AM delete

hmmm..yeah may be some problem with the browser you are using. Try some other browser like firefox/opera instead of chrome.
You may also ask any of your friends, if they can see it too.

BTW a suggestion for you: Remove any one button from the widget. As it is slightly going out of post-text region.

Reply
avatar
Anonymous
January 30, 2010 8:21 AM delete

DEAR BLOGGERSTOP IT APPEARED FOR ONES BUT IT IS NOT SHOWING NOW PLEASE TELL ME WHY

www.free-mobile-sms-messages.blogspot.com

Reply
avatar
mGm
February 18, 2010 11:41 AM delete

this is very good and I wanted to try it

Reply
avatar
February 26, 2010 6:07 AM delete

Very interesting and thanks. I will test this out on my site.

David
Malaysia Asia

Reply
avatar
March 04, 2010 7:04 PM delete

The Twitter one does not work on my blog, is there a way to fix this?

Reply
avatar
March 08, 2010 12:56 AM delete

Thanks for that.
Love it.

http://albumsyouprobablydontown.blogspot.com/

Reply
avatar
March 08, 2010 4:57 AM delete

Actually - twitter button not working.
gets an error message "Firefox has detected that the server is redirecting the request for this address in a way that will never complete."

script problem?

Reply
avatar
March 08, 2010 9:24 AM delete

I have just now updated the post (twitter code), let me know if that solves your problem.

Reply
avatar
March 14, 2010 1:21 PM delete

hey dis is not working now plz update the code asap

Reply
avatar
March 14, 2010 1:30 PM delete

Hey Nihar....chk out the comments by Dark Horse above, see his blog. It is working perfectly. No need to update the code!

Reply
avatar
March 14, 2010 3:42 PM delete

great tutorial ! works best for me and the easiest way I found yet !
keep posting such nice posts !

Reply
avatar
March 18, 2010 9:22 AM delete

Thanks Divya the cod is nice
you can see the code in my blog

http://nicetimplates.blogspot.com

Reply
avatar
March 21, 2010 4:33 PM delete

you are the best man i ever meet!!! thank you so much!!!!!!!!!!!

Reply
avatar
March 23, 2010 10:40 AM delete

Thank you for the compliments...Mary :)

Reply
avatar
March 25, 2010 4:39 PM delete

This is fabulous! It worked for me. I was wondering if I can take the Sharing is Sexy off or change the word sexy. The word sexy doesn't fit with my blog. Thanks!

Reply
avatar
March 25, 2010 11:17 PM delete

Hi Heidi,

Yes that is possible to replace "sharing is sexy" with "sharing is caring" phrase.

Read my reply to aryan (comment #54 in this page)

Reply
avatar
March 26, 2010 12:16 PM delete

THANK YOU SO MUCH! I must have missed that comment. It worked perfectly.

Reply
avatar
March 26, 2010 12:21 PM delete

So I have another question. When I make a post the icons show up at the bottom of my post. But when I hit home so I can view all posts the icons disapear altogether.

Reply
avatar
March 26, 2010 12:53 PM delete

Heidi, that's certainly possible to show these buttons in the homepage, but that is something I won't suggest.
Because first of all, posts aren't usually shared directly from the homepage, as reading a post completely is necessary before you share it. Secondly, these buttons may increase the loading time of your homepage...which is not SEO friendly.

But still if you think that showing the buttons in your homepage is necessary, then delete the first and last of code in step #3, viz.

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

and

</b:if>

Reply
avatar
March 26, 2010 1:13 PM delete

Thanks for the quick response. I appreciate your advice too. I did try to remove those codes from another one of your comments and it didn't work for me. I will just leave it the way it is. That way I won't have any SEO or loading issues. Again, thank you!

Reply
avatar
March 26, 2010 1:17 PM delete

Ohk, although it should have worked, but anyways "all is well that ends well" :)
Happy for you. BTW, if you don't mind, would you like to share your blog with me and my readers?

Reply
avatar
April 05, 2010 12:22 PM delete This comment has been removed by a blog administrator.
avatar
April 06, 2010 11:44 AM delete This comment has been removed by the author.
avatar
April 09, 2010 4:55 AM delete

wow its working thx alot

Reply
avatar
April 11, 2010 12:08 AM delete

Thank you very much. I tried this for my previous template and it didn't work. And I tried it again with my new template and its working :P:P:P

Thank you thank you.... Now I have to try adding the smilies too

Hunter4u.com

Reply
avatar
April 14, 2010 11:33 AM delete

It's not working for me. http://adhdmomma.blogspot.com

Reply
avatar
April 14, 2010 1:55 PM delete

Hey there....
Just checked your blog, the widget is working fine.
But remove at least one button (I suggest you to remove the designfloat button), to align it properly within your post-area.

Reply
avatar
April 14, 2010 3:51 PM delete

I see it working on the posts now and was able to go back to other comments above and get it to work on the posts on the home page too. I also removed one of the buttons and re-ordered them based on my readership. Thanks so much for sharing this!

Reply
avatar
April 24, 2010 5:42 PM delete

wow! You are really kind and caring to everyone on this site! You have infinite patience! I am hoping that you can help me out? I tried to load this from other sites and now from yours but I just can't get it to show up for some reason. I have been trying for a few hours now how to figure this out and I am just fed up (it's late)I am using Windows 8, could that be the problem? If it isn't too much trouble, could you please have a look and let me know if there's something I am missing or needing in order to view this. I am not even seeing any icons at all.
Thank you so much for your help
http://www.thewritingwomb.com

Reply
avatar
April 24, 2010 7:40 PM delete

well, I changed my Browser over, just in case and still nothing...I am usually really good at figuring these things out ;o( I can't sleep until I figure this out!

Reply
avatar
April 25, 2010 1:12 AM delete

Hi Patricia,

Yeah, that's strange, the background image is loading and the links are working too, but the icons aren't loading. First of all try to remove any 2 icons which are not required in your blog, as the widget is going out of the post-area.
If the icons are still not showing up, then you may try this widget:
http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html

Reply
avatar
April 25, 2010 2:32 AM delete

Thanks for the help! How do I remove the icons?

Reply
avatar
April 25, 2010 3:29 PM delete

In step #3,

every <li... starts a new button, and </li> ends the button, so delete any of that pairs.
In between the opening li and closing /li, read the code to find out which button is that, like stumbleupon, twitter etc.

Reply
avatar
May 04, 2010 11:10 AM delete

I added the code but don't see it on my screen. Can you help me?

http://livingthehomelife.blogspot.com/

Reply
avatar
May 04, 2010 11:20 AM delete

Nevermind! I figured it out. Thanks for sharing!

Reply
avatar
May 05, 2010 9:22 PM delete

I LOVE this too much for words! The only problem is, you don't see the link unless you are viewing the direct link to one particular post. Have I done something wrong?

http://msrandomsramblings.blogspot.com/2010/05/post-it-note-tuesday-dear.html (Can see...)

http://msrandomsramblings.blogspot.com/ (Can't see...)

Thanks!

Reply
avatar
May 05, 2010 9:37 PM delete

Hi there!

Actually I have intentionally made these links hide in the homepage, as according to me people generally do not share posts from the hompage (i.e. they usually share posts once they read them completely). So, loading the widget in the homepage is not necessary.
Anyways, if you want to show these links in the homepage too, then delete the first and the last lines of code in STEP #3, viz.

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

Reply
avatar
May 05, 2010 9:59 PM delete

@Ms. Random

Just went through your latest two posts....they are awesome, especially the idea of putting up post-it notes in a post ..you have a lovely blog :)

Reply
avatar
Anonymous
May 21, 2010 11:23 AM delete

Hi
I tries the above to get it to show on my home page but it still isnt showing up. What else can I DO?

Reply
avatar
May 27, 2010 3:18 AM delete

Very Impressive, Thanks a lot !

Reply
avatar
June 26, 2010 1:48 PM delete

I have tried getting this to work and it wont. I saved each step as I did it, but step 3 is giving me this error:XML error message: The element type "div" must be terminated by the matching end-tag "
Ok so what happened, is it my templete?
I copied the code twice to be sure of not leaving anything out. Please help I love this widget!!
My blog:http://bikin-testing.blogspot.com/

Reply
avatar
July 09, 2010 10:15 AM delete

Wondering where I went wrong :-/

And to think, I code blogs for a living. Hmph

Thanks for the tutorial anyway! :)

Reply
avatar
July 09, 2010 10:30 AM delete

You are welcome...
& ...Wow...your blogs designs are really cool. Keep up the good work.

Reply
avatar
July 09, 2010 10:42 AM delete

Thanks a lot! I've put the code in again and it still isn't working. Would it be too much trouble when you have time for you to view my code and see what happened. I totally understand if it would. This is just driving me a bit mad. LOL

Reply
avatar
July 09, 2010 10:48 AM delete

I have checked your blog, and the widget is working too. Here's a screenshot:
http://imgur.com/aIdu2.png

Have you tried viewing your blog in any other Internet browser?

Reply
avatar
July 09, 2010 10:54 AM delete

And presently you are using all the buttons (from "delicious" to "email"), but as your post-area is limited to eight buttons only, so please use only any 8 of them, which you think are important for your blog.

Reply
avatar
July 14, 2010 2:13 PM delete

Thanks for the guide of this sexy gadget :-*

Reply
avatar
July 15, 2010 7:14 AM delete

Hi Divya Sai. Your tuts are great :D
I tried this at my blog and it isn't working. Could you fix what's wrong?

http://ursorusso.blogspot.com/

Reply
avatar
July 15, 2010 9:50 AM delete

@Roman,

The widget is working in your blog, here's the screenshot:
http://i26.tinypic.com/5z4dba.png
(Mouse hovered over StumbleUpon)

Reply
avatar
Anonymous
July 21, 2010 5:41 AM delete

Hello me again! I left comment here in reference to hiding them from static pages) http://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html), but I am also interested in these bookmarks as well...trying to figure out which style would work best, and also hiding them from appearing on static pages.

just and fyi:
-furl is no longer valid, I think diigo bought them if I'm not mistaking.
-mixx, myspace, yahoo, and blink list icons are missing.

Do you happen to have an updated tutorial and with more options to choose from?

Again, thank you for all of your sharing...and patience!

Have a great day!!!

Reply
avatar
August 06, 2010 1:44 AM delete

Hi,
Very nice article.
Thanks for sharing this.
Really "Sharing is Caring"

Thanks Again
Addy :D

Reply
avatar
August 06, 2010 6:19 AM delete

Help! It's not working for me,I tried it on Google Chrome and it gave an error ahref needs < or />. I tried doing it on IE and no error but still not working. I love your tutorials and really need this to work. Here's the blog I tried it on http://ellaandizzieloviedove.blogspot.com/

Reply
avatar
August 13, 2010 11:31 PM delete This comment has been removed by the author.
avatar
August 19, 2010 3:54 AM delete

thanks. it works and looks really nice.

Reply
avatar
September 23, 2010 4:37 AM delete

Thanks a lot! Sexy widget!

Reply
avatar
September 26, 2010 5:14 PM delete

Thanks super widget, it works super.

Reply
avatar
September 27, 2010 4:44 AM delete

Sir i already did the 3 steps, but i cant get it to appear on my blog. can you help me please? am i missing something? http://myonlineptcsiteptc.blogspot.com/

Reply
avatar
Anonymous
September 30, 2010 2:34 PM delete

i couldn't help fail but notice how you put you own URL in the code meaning that it will be in our templates, google will index it, you will get credit for it and we will know nothing about it. Well done!

Reply
avatar
September 30, 2010 2:39 PM delete

That's inside an HTML comment, not a hyperlink (so no benefit in Google indexing). I have kept it only so that in case in future if you ppl face any problem in the widget, you can come back to this blog to solve your problems.

Reply
avatar
Anonymous
October 11, 2010 1:19 AM delete

Sai,, Are you gettting any complaints with this is not working?
I recently/finally got it installed on my blog and now its not working. So I did a test blog on the code,,, and where the icons should be,,it says that the tiny pic has been moved or deleted,, and shows little pic of tinypic.
here is the test blog url:http://testingbikin.blogspot.com/2010/10/blog-post.html
Let me know what you come up with
thanks so much

Reply
avatar
October 13, 2010 1:36 AM delete

Yeah the problem was there, the website of the designer of this widget is down and I think the images uploaded by him/her are also therefore not available. Anyways I have rectified the problem, and UPDATED the code in the post above. Please use the new code (you just have to replace the code highlighted in RED)
And thank you for mentioning the problem here.

Reply
avatar
October 17, 2010 11:44 AM delete

@Sai,, Ok I redid the code and put it in my blog:
http://sharingforsavings.blogspot.com/ its working,,
But how come it only shows up when I post cuz I dont see it in older post?
And is there a way to change "Sharing is Caring" too "Sharing for Savings"?
Thanks for helping me,, I love your site and stay "tuned in" always.

Reply
avatar
November 06, 2010 2:42 PM delete

@ndy
You are welcome :)

@Bikin
Sorry for replying so late. But I can see the widget working even in your older posts.
And to change the text, you will have to manually edit the picture (highlighted in RED in the tutorial above) and replace the first two links (highlighted in RED - Step #2) in the code above.
This is the image to edit and change:
http://i52.tinypic.com/sxd4e8.jpg

Reply
avatar
November 15, 2010 4:10 PM delete

Sai,,,Hi again,, This is Bikin,, Im replying to your last reply to me..Ok so I have done the change manually and edited the links in red, but only for the first step.
You say "first two links (highlighted in Red-Step #2) in the code. I can't see but one highlighted in Red in second step and thats the feed. So can you specify which lines for me...would be sweet of you...Be back soon,,, hey do you have a RSS feed for your post??

Reply
avatar
November 21, 2010 1:52 PM delete

not working, dude..

the icons was hiding..

Reply
avatar
December 09, 2010 3:47 PM delete

Nice Widget, Thanks for sharing
I will try this

Reply
avatar
December 23, 2010 5:05 AM delete

it's workig 100% http://paulsantosh.blogspot.com/

Reply
avatar
January 04, 2011 11:51 AM delete

Its not working and it would be helpful if u provide code for the sharing widget you have encoded for your site. thank you..

Reply
avatar
January 09, 2011 1:23 PM delete

thanks it working http://asiandefence.blogspot.com/

Reply
avatar
January 25, 2011 4:54 AM delete

hi sai, just want to let you know that the background pictures hosted in tinypic are already expired. Can you put another pics. thnx!

Reply
avatar
January 25, 2011 8:57 AM delete

Thanks for informing me buddy, I'll update the links.
i HATE tinypic.

Reply
avatar
January 27, 2011 9:26 AM delete

hahaha! what a codes XD when i save it i was expecting that i would receive an error but then i didn't. now when i view my blog OMG! it's not working on me ;] haha!

Reply
avatar
January 27, 2011 3:11 PM delete

Code updated with new links....I hope it will work for everyone now....

Reply
avatar
February 14, 2011 11:23 PM delete

nice sharing, but the link to view the live demo is unavailable anymore.

Reply
avatar
March 09, 2011 5:01 PM delete

Hm not working for me something is messed up in my template about social buttons :(

Reply
avatar
Anonymous
March 15, 2011 10:58 AM delete

dude what should i say. i think you need to host them somewhere else these crappy bliss not working

Reply
avatar
May 07, 2011 3:02 PM delete

Hey ya ! DS please ve a look at my Blog and tell me what should i do more in it. Its My Pleasure to receive any comment from you on my site. :)

Thanks :)

Reply
avatar
May 07, 2011 3:07 PM delete

I want to know how can i put an Additional sidebar. Because for now i am using a custom template not from Default, and i wish to add an another sidebar like yours,
i already add a footer bar.
Thanks for any help from you in future.
Waiting for your quick response.

Thanks :)

Reply
avatar
May 20, 2011 11:53 AM delete

Hey I installed the code, it works great, but I have one question, this blog is mainly videos from youtube, I've embedded the videos, but when I click on the FB icon, it just gives me a link not an actual smaller verson of the video to post on FB. Any way to solve this? I'm code illiterate by the way..lol
my site is www.thatnastydunk.com

Thanks!

Reply
avatar
May 24, 2011 3:25 PM delete

It works! This one was the 3rd code I tried on my template and finally worked. Thank you.

Reply
avatar
June 20, 2011 11:20 AM delete

Hello Sai,

Thanks for the code, it works great!

http://rawfoodfortruth.blogspot.com/

Is there a way to change the "Sharing is Sexy" to something other than "Sharing is Caring"? Thank you!

Reply
avatar
July 23, 2011 10:10 AM delete

cool site thanks.
www.17bloggers.co.cc

Reply
avatar
July 23, 2011 2:57 PM delete

Cool!! Thanks.
dhekarief.blogspot.com

Reply
avatar
July 25, 2011 8:23 AM delete

not working... :(

www.gamespanky.com

Reply
avatar
July 26, 2011 7:48 PM delete

This is great! BUT it's only showing up on my blog if someone is actually on the blog post itself ?? make sense?

It's only showing up if you click the blog post. Not from the front page.

http://www.theperfectpaletteblog.com

Please help!

xo, chrissy.

Reply
avatar
September 20, 2011 3:58 AM delete

Hi,
Its true stock trading is not everyone’s cup of tea however one should try it to see if they have potential to earn money from the stock market or not.
Stock trading can only be rewarding if share trading is done with proper research. Those who believe in speculation will not sustain for long in stock market. Have fait on research tools and grab some stock market knowledge and see how much you can earn via just stock trading.
Regards
SHARETIPSINFO TEAM

Reply
avatar
October 24, 2011 4:21 AM delete

Not working in my blog.

www.appforpc.tk/

;)

Reply
avatar
October 30, 2011 6:02 AM delete

Thanks buddy. My site now looks cool with this widget ;)

Reply
avatar
November 24, 2011 1:43 AM delete

Thanks For This Helpful Info. Working On My Site.
http://katrinakaifbf.blogspot.com/

Reply
avatar
December 12, 2011 2:27 AM delete This comment has been removed by the author.
avatar
February 22, 2012 4:21 PM delete

Really nice. How can I include a Google Plus button. Thanks for sharing!

Reply
avatar
April 22, 2012 10:47 AM delete

Hi this doesn't work on my blog. Can you help? awashwithwonder.com

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon