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.

---

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts