Bounce & Share - Social Bookmarking Widget !

Here's a cool new social bookmarking widget for your blog, with on-hover animation effect. The icons will bounce up as soon as you place your mouse cursor over these icons.



Check out the live demo here: Bouncing Icons

Instructions to add these buttons:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
</head>
And immediately ABOVE/BEFORE it, paste this code:
<!--BOUNCING-ICONS-START-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>
<!--BOUNCING-ICONS-STOP-Help-http://bloggerstop.net-->

STEP #2:
Now find this code in the template:
<data:post.body/>
And immediately BELOW/AFTER it, paste this code:
<!--SOCIAL-BOOKMARKING-BUTTONS--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><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='button-color-3'><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='button-color-4'><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='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></ul></center>
<a href="http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>
</b:if>
<!--SOCIAL-BOOKMARKING-BUTTONS-http://bloggerstop.net-->

Now SAVE the template. And let your visitors share your articles.


NOTE: Although the required css and js files are already uploaded and linked by me in STEP #1, but as a backup you can download and save them on your PC:

BackUp - STEP #1
Download these files:
Screen2.css
execute.js

from Ziddu as a zipped file

BackUp - STEP #2
Upload those two files to MyDataNest (Registration required)
and copy the DIRECT LINKS to these two files.



This section of the post is ONLY FOR THOSE readers, who are not happy with the above icons or they want to use their own icons or if they want to remove/include any other bookmarking icon.
(This is a little bit difficult part. Actually not difficult, but will certainly take some time.)

This is complicated not only because of the additional coding, but also because you have to work with Adobe Photoshop (but don't worry as more than half of the work is already done for you).

Download all the circular icons (including Yahoo, Technorati etc.) from here:
BlogPerfume.

Then contact me, for the .PSD image (Icons.psd) containing all icons used in the above tutorial.

In the .PSD image, replace the icons with the new icons you got from BlogPerfume. Save the image as icons-new.png
Upload this new file to TinyPic.com and get the Direct Link to this file.
Then in the Screen2.css file, replace this link (http://i38.tinypic.com/ojpky0.jpg) with the new DIRECT LINK you just obtained from tinypic.com

Finally, in the STEP #4, change the code, depending on the network icon selected by you. [code to add other social networking icons]


*Update: You may download and use these icons too:

Red and White Pearl Social Icons by WebTreat


Silver Glossy Icons by WebTreat


Glossy Orange White Icons by WebTreat


Glossy Blue White Icons by WebTreat


Credits: Bounce & Share widget by BloggerStop. This tutorial is based on Realistic Hover Effect With jQuery by Adrian. Icons used in the widget are free-to-use icons created by BlogPerfume.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

43 comments

Write comments
October 18, 2009 1:25 PM delete

Woowwwwww......... This one is really cool!

Reply
avatar
Anonymous
October 19, 2009 7:05 AM delete

I think there is an error.I deleted "center" code and I added "/b:if" before "!..Social Bookmarking...." code and now it worked

Reply
avatar
October 19, 2009 7:21 AM delete

Thanks buddy, just updated the code with the closing center and b:if tags. It will work perfectly now. Thanks again.

Reply
avatar
October 19, 2009 10:18 AM delete

very nice bookmarking widget ;)
I like it...

Reply
avatar
Anonymous
October 19, 2009 6:53 PM delete

The element type "b:if" must be terminated by the matching end-tag "".

Reply
avatar
October 19, 2009 10:19 PM delete

Hi
I cannot find data:post.body in my HTML layout, can u help?

Reply
avatar
October 20, 2009 1:02 AM delete

that trick can not work properly in my blog, can you tell me why???

Reply
avatar
October 20, 2009 7:38 AM delete

@Al Humam,

Mark the tick-box "Expand Widget Templates", and you'll find that code!

Reply
avatar
October 21, 2009 11:12 AM delete

dude can you help me add these icons in wordpress?

Reply
avatar
October 21, 2009 11:24 AM delete

Never tried...but lets see!
You have got access to the template right ?
so simply add the code from step #3 into your templates head region (i.e. just before the tag </head>).

Reply
avatar
October 21, 2009 11:46 AM delete

followed the instructions but got some error

i added the code in step 3 to my header.php just before the head

also added the codes in step 4 to my single post.php and got some error

any fix for these?

thank you

Reply
avatar
October 21, 2009 12:07 PM delete

In step #4,
delete these two lines, and then try to save it:

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

Reply
avatar
October 21, 2009 12:14 PM delete

still get some errors....
the whole data cant be seen...

Reply
avatar
October 21, 2009 12:23 PM delete

What's the error?
and what's your blog address?, let me check the code of step 3

Reply
avatar
October 21, 2009 12:31 PM delete

all my posts were gone...
check it here http://fodgeeboi.com

Reply
avatar
October 21, 2009 12:47 PM delete

Im also getting ""b:if" must be terminated by the matching end-tag " cant figure out what's wrong...~x(

Reply
avatar
October 21, 2009 12:53 PM delete

I think this error is due to the code from step 3, have you tried pasting the code in a text widget?

Reply
avatar
October 21, 2009 12:54 PM delete This comment has been removed by the author.
avatar
October 21, 2009 1:03 PM delete

tried it, the icons were there but i guess it has some issues with the theme? right?

Reply
avatar
October 21, 2009 1:09 PM delete

@Linseypop
Just now I have changed the position of the closing b:if tag, plz try it now (Step #4).

@apol
you'll not find a plugin for WP, because this is a customized widget I have made, as mentioned in the credits. I do have installed wp on one of my sub-domains but never tried creating a plugin for wp

Reply
avatar
October 21, 2009 1:23 PM delete

ok, maybe i'll just revert it back to the conventional one...
but anyways thanks for the time...:-/

Reply
avatar
October 26, 2009 4:57 PM delete

Me again...you have a lot of great things here which I want to ad to my blog, but I'm having trouble...

I can't find just data:post.body in my html even with Expand Widget Templates checked. Instead, I find it with a p on either side of it in three different places.


Where should I paste your code?

Thanks again!

Reply
avatar
Misty
October 27, 2009 12:56 AM delete

Nevermind, I figured it out!

Reply
avatar
October 29, 2009 2:22 PM delete

When I installed this the first time it worked fine for about an hour or so. I made an adjust by including
before the codes so that it wont overlap with images and videos I may have on some blog posts. It still worked fine after adding the breaks but after being satisfied after for a couple of hours, the share icons are not bouncing anymore!!! LOL

Can you tell me what's wrong with it? My blog adress is in my comment above here.

Reply
avatar
October 29, 2009 2:52 PM delete

never mind. I figured it out by myself. I was running a wibiya toolbar before I started using your widget. Both worked for some time together but after a while both had problems running. Your icons dont bounce anymore then my wibiya widget disappeared too. Good thing I backed up my template. I just re-installed my back-up and got my wibiya toolbar back. Thanks.

Reply
avatar
November 20, 2009 5:18 AM delete

Nice collection of widgets and thanks for sharing here

Reply
avatar
Robin
January 14, 2010 3:16 PM delete

Hi, this is great! Can you make one bouncing button for the AddToAny drop-down widget using the "open source" share icon?

Reply
avatar
January 15, 2010 7:57 AM delete

Hey Robin, couldn't get you. Can you please explain in detail what exactly you want?

Reply
avatar
February 20, 2010 11:46 AM delete

Great bookmarking widget... thatz cool... thanks anyways :)
Katrina

Reply
avatar
April 06, 2010 7:15 PM delete

hey plz help me i realy want this widget in my blog i have implemented this code in blog but never worked!!neither gave me any error but there is no widget on the page plz check it out http://faizypuri.blogspot.com and help me out!!
I would realy appreciate ur help!!

Reply
avatar
May 14, 2010 2:26 AM delete

THis very cool but i am not able to implement in my blog
http://arena-of-professionals.blogspot.com/

Reply
avatar
May 18, 2010 10:53 AM delete

I have added Bounce & Share - Social Bookmarking Widget, to my blog but it`s not working! Can someone help me with this please ~x(

Regards From Michel.J

Reply
avatar
October 07, 2010 1:01 PM delete

I will add this to my blogger blog really looking kool.

Reply
avatar
November 20, 2010 8:50 AM delete

Haha, useful information, thank you!

Reply
avatar
January 25, 2011 4:37 PM delete

Didn't work at all, nothing changed.

Reply
avatar
February 04, 2011 1:50 AM delete

wow..your post is great.it help me alot.thx man...

Reply
avatar
March 28, 2011 12:09 PM delete

How can I add this to a website which is not linked to blogger? To the HTML or PHP code directly?

Reply
avatar
September 28, 2011 9:28 AM delete

Hi.... am a total duh at html / css coding but managed to play my way around for my blog template. Now the problem is I have done away with the 'posts' part so itz a one-pager template now. How can I get this Bookmarking Widget to show on my home page since the is no where to be found even after expanding the widgets :(

Plzzzzzz help me out someone :(

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon