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.

Bounce & Share - Social Bookmarking Widget !

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:
Bounce & Share - Social Bookmarking Widget !
Red and White Pearl Social Icons by WebTreat

Bounce & Share - Social Bookmarking Widget !
Silver Glossy Icons by WebTreat

Bounce & Share - Social Bookmarking Widget !
Glossy Orange White Icons by WebTreat

Bounce & Share - Social Bookmarking Widget !
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.

Leave a Reply

42 Comments on "Bounce & Share – Social Bookmarking Widget !"

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

Woowwwwww……… This one is really cool!

View Comment
Anonymous
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
bolang
Guest

very nice bookmarking widget 😉
I like it…

View Comment
Anonymous
Guest

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

View Comment
AL Humam
Guest

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

View Comment
rudy
Guest

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

View Comment
Sai @ BloggerStop
Guest

Code updated, plz try again…

View Comment
Divya Sai
Guest

@Al Humam,

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

View Comment
apol
Guest

dude can you help me add these icons in wordpress?

View Comment
Divya Sai
Guest

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

View Comment
apol
Guest

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

View Comment
Divya Sai
Guest

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

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




</b:if>

View Comment
apol
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
apol
Guest

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

View Comment
Linseypop
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
apol
Guest

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

View Comment
Divya Sai
Guest

@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

View Comment
wpDiscuz