May 13, 2009

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


167 comments:

AB said...

Not working !!

Anonymous said...

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

imran said...

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

ID-Bloggers said...

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

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

Divya Sai said...

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

Richard said...

Cool... Works for me, ;)

Thanks for sharing!

Orange County web design

widgetblogger.co.cc said...

Nice post

REKHILESH said...

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

www.azOOmer.blogspot.com

Kothapally Arun said...

thanks for the code it works for me.

blogging for extreme beginners said...

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

Ali Qayyum said...

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

Guest said...

its not working on my site

Divya Sai said...

Your blog link buddy !

sahil said...

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

Divya Sai said...

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

Reza said...

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

Divya Sai said...

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

Reza said...
This comment has been removed by the author.
Reza said...

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

ProfessionalLab beta 2009 said...

Thanks a lot. You rocks! ;)

emanuel said...

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.

Divya Sai said...

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>

Tyco Blogger said...

juz wanna try this emoticon :))

krishna said...

hey it dosent work ????
:((

neno said...

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.

neno said...

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

thanks

Divya Sai said...

@neno

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

bt said...

nice tutorial but it not work on my blog

Anonymous said...

:)) nice article

WMgeek said...

Hi Divya Sai, great tutorial indeed. Thanx for sharing


Best Regards,
wmgeek from Freeware PPC

Divya Sai said...

Welcome buddy!

Jen said...

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?

SVR Top Blog Admin said...

this worked perfectly

Earl said...

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

Divya Sai said...

@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'>

My Space said...

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

Divya Sai said...

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.

Ankit said...

@divya
Done all 3 steps
pls check now

Divya Sai said...

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

ankit said...

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

Sai @ Blogger Help said...

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.

Ankit said...

thanks for the detailed reply

Animals Zoo Park said...

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.

Divya Sai said...

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

Zahra said...

ITS NOT WORKING

Zahra said...

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

Divya Sai said...

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.

Zahra said...

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!! :(

Zahra said...

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

Divya Sai said...

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.

yusuf said...

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.

Sai @ Blogger Help said...

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 :)

Greymarch said...

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

- Greymarch
http://www.greymarch.com

Greymarch said...

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

- Greymarch
http://www.greymarch.com

Aryan said...

@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

Divya Sai said...

Hi Aryan,

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

Aryan said...

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

Aryan said...

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.

Sai @ Blogger Help said...

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

Arc-IT-Studio Architecture said...

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

Bunny said...

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!

Divya Sai said...

@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

Bunny said...

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

April. said...

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/

Sai @ Blogger Help said...

Hi Amah,

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

April. said...

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

Sai @ Blogger Widgets said...

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.

Anonymous said...

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

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

mGm said...

this is very good and I wanted to try it

David Jr said...

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

David
Malaysia Asia

RonyDean said...

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

Dark Horse said...

Thanks for that.
Love it.

http://albumsyouprobablydontown.blogspot.com/

Dark Horse said...

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?

Sai - Blogger Help said...

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

Nihaar Gujjar said...

hey dis is not working now plz update the code asap

Sai - BloggerStop.Net said...

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

Santosh Sadani said...

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

Ayoub said...

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

http://nicetimplates.blogspot.com

mary said...

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

Divya Sai said...

Thank you for the compliments...Mary :)

Heidi said...

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!

Sai - BloggerStop.Net said...

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)

Heidi said...

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

Heidi said...

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.

Sai - Blogger Widgets said...

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>

Heidi said...

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!

Divya Sai said...

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?

james said...
This comment has been removed by a blog administrator.
Am Not He said...
This comment has been removed by the author.
Roy Oon said...

wow its working thx alot

hunter4u.com said...

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

Penny Williams said...

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

Sai - Blogger Widgets said...

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.

Penny Williams said...

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!

زكريا البوهالي said...

:D

The Naked Writer said...

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

The Naked Writer said...

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!

Sai - Blogger Help said...

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

The Naked Writer said...

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

Divya Sai said...

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.

Live the Home Life said...

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

http://livingthehomelife.blogspot.com/

Live the Home Life said...

Nevermind! I figured it out. Thanks for sharing!

Ms. Random said...

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!

Sai - Blogger Widgets said...

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>

Sai - Blogger Help said...

@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 :)

Anonymous said...

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?

无奇不有 said...

Very Impressive, Thanks a lot !

Bikin said...

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/

Irtiza104 said...

works great. thanks.

Simplee Stated Designs said...

Wondering where I went wrong :-/

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

Thanks for the tutorial anyway! :)

Divya Sai said...

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

Simplee Stated Designs said...

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

Divya Sai said...

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?

Divya Sai said...

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.

Evolution World said...

Thanks for the guide of this sexy gadget :-*

Roman said...

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/

Divya Sai said...

@Roman,

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

Anonymous said...

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!!!

Addy said...

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

Thanks Again
Addy :D

witchycrazymommy said...

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/

Heather said...
This comment has been removed by the author.
How to Quit Smoking said...

Thanks alot. It worked for me.

amansoor said...

thanks. it works and looks really nice.

IAnn said...

Thanks a lot! Sexy widget!

ntagas said...

Thanks super widget, it works super.

ptcsiteptc.online said...

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/

Anonymous said...

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!

Sai - BloggerStop.net said...

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.

Anonymous said...

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

Sai - BloggerStop.net said...

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.

Bikin said...

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

ndy said...

goog job....thanks.

Sai - Blogger Widgets said...

@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

Sharing For Savings said...

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

Johnny Wirjosandjojo said...

not working, dude..

the icons was hiding..

Priya said...

Nice Widget, Thanks for sharing
I will try this

Paul santosh said...

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

Paul santosh said...

x{

Srikanth Rao said...

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

Army Optimizer said...

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

kses said...

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

Sai - Blogger Widgets said...

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

dhodong said...

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!

Sai - BloggerStop.Net said...

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

myself-corp said...

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

Dejaviewer said...

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

Anonymous said...

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

John said...

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 :)

John said...

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 :)

Joel said...

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!

Josh said...

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

Dita said...

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!

Ezza said...

Hay....thank ! nice post

Thank you!

mrshravan c said...

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

Admin Info Jogjaku said...

Cool!! Thanks.
dhekarief.blogspot.com

Games panky said...

not working... :(

www.gamespanky.com

{The Perfect Palette} said...

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.

SHARETIPSINFO said...

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

info,tips and trick said...

thanks :)

Reaz said...

Not working in my blog.

www.appforpc.tk/

;)

Arun said...

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

online said...

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

daven said...
This comment has been removed by the author.
Olgun sohbet Odaları said...

lez sohbet odaları
lez sohbet
cinsel sohbet odaları
cinsel sohbet

türkiye sohbet
çet odaları

chat
yetiskin sohbet
denizli sohbet
chat
good

Abdul Moiz Farooq said...

Thanks It worked For me !

Arthur Kummer said...

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

Shannon said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy