Jun 2, 2010

How to Add Sharing Is Caring Widget For Blogger

Buzz this
Related Posts with Thumbnails This tutorial shows you how to add the animated 3D social bookmark set 'Sharing Is Caring' to your blog.A very popular post i wrote last November was how to add the 'Sharing Is Sexy' bookmark buttons to your blog.That set of bookmark icons is awesome and the post is still one of the most popular on Spice up your blog.I was contacted last week and asked can the social bookmarks be added without the sharing is sexy message or with a different message, as a reader felt sharing is sexy did not really fit the tone of their blog.
So not wanting to let anyone down today i will show you how to add the buttons but this time the cool message will be 'Sharing Is Caring'.

The buttons contained in the set for your readers to share your posts are for the most popular bookmarking websites :


The also contain a Rss feed link and an Email link.

Here is a screenshot :

(You can see i hovered over the twitter icon ant it has popped up)

Sharing is caring Bookmark
Before we look at adding the buttons to your blog if you would prefer the 'Sharing Is Sexy' buttons here is what they look like and you can Sharing Is Sexy Bookmarks For Blogger for that tutorial :

How to get sharing is sexy bookmarking buttons

Adding the icons to your blog

You need to add a nice chunk of code to your template so make sure to have your template backed up, click the link at the top of the post to see how.

Step 1 : Find (Ctrl+F) this code in your html.

Step 2 : Add the code below before the code above.Don't worry with wrapping. just copy & paste the below code.

<!-- Sharing is caring -->

<style type='text/css'>

div.sexy-bookmarks {


background:url(&#39;http://img714.imageshack.us/img714/57/sharing.png&#39;) no-repeat left bottom;




div.sexy-bookmarks span.sexy-rightside {



background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat right bottom;




div.sexy-bookmarks ul.socials {

margin:0 !important;

padding:0 !important;





div.sexy-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.sexy-bookmarks ul.socials a {

display:block !important;

width:48px !important;

height:29px !important;

font-size:0 !important;

color:transparent !important;


.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {

background:url(&#39; http://img688.imageshack.us/img688/3998/sexybookmarksbuttons.png&#39;) no-repeat !important;


.sexy-furl {

background-position:-300px top !important;


.sexy-furl:hover {

background-position:-300px bottom !important;


.sexy-digg {

background-position:-500px top !important;


.sexy-digg:hover {

background-position:-500px bottom !important;


.sexy-reddit {

background-position:-100px top !important;


.sexy-reddit:hover {

background-position:-100px bottom !important;


.sexy-stumble {

background-position:-50px top !important;


.sexy-stumble:hover {

background-position:-50px bottom !important;


.sexy-delicious {

background-position:left top !important;


.sexy-delicious:hover {

background-position:left bottom !important;


.sexy-yahoo {

background-position:-650px top !important;


.sexy-yahoo:hover {

background-position:-650px bottom !important;


.sexy-blinklist {

background-position:-600px top !important;


.sexy-blinklist:hover {

background-position:-600px bottom !important;


.sexy-technorati {

background-position:-700px top !important;


.sexy-technorati:hover {

background-position:-700px bottom !important;


.sexy-myspace {

background-position:-200px top !important;


.sexy-myspace:hover {

background-position:-200px bottom !important;


.sexy-twitter {

background-position:-350px top !important;


.sexy-twitter:hover {

background-position:-350px bottom !important;


.sexy-facebook {

background-position:-450px top !important;


.sexy-facebook:hover {

background-position:-450px bottom !important;


.sexy-mixx {

background-position:-250px top !important;


.sexy-mixx:hover {

background-position:-250px bottom !important;


.sexy-script-style {

background-position:-400px top !important;


.sexy-script-style:hover {

background-position:-400px bottom !important;


.sexy-designfloat {

background-position:-550px top !important;


.sexy-designfloat:hover {

background-position:-550px bottom !important;


.sexy-syndicate {

background-position:-150px top !important;


.sexy-syndicate:hover {

background-position:-150px bottom !important;


.sexy-email {

background-position:-753px top !important;


.sexy-email:hover {

background-position:-753px bottom !important;



<!-- /Sharing is caring -->
Step 3 : Now find the code below.

Step 4 : The add the code below after the code above.

<!-- Sharing is caring -->

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-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='sexy-syndicate'><a href='ADD YOUR FEEDBURNER FEED URL HERE' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>


<!-- /Sharing is caring -->
One last thing, replace ADD YOUR FEEDBURNER FEED URL HERE with your blog RSS feed url.

If you are using a read more feature in your blog, you may got <data:post.body/> twice in your blog. In that case, place the code after the second one. Or you may try and error each of them and see the result.

Final : Save your template.

Enjoy it and have a nice day..
About The Author
I'm Balaji Wishvam, an engineering student in Tamilnadu, India. I'm but interested in arts and animation a lot.I’m more interested in PHOTOGRAPHY a lot… I’ve shifting thoughts and got some interest in Technology too particularly in innovative gadgets, robotics, quantum physics, etc.
Share This
Subscribe Here





Submit your website to 20 Search Engines - FREE with ineedhits! Technology Top Blogs Bloglisting.net - The internets fastest growing blog directory Technology blogs Free web directory Technology and Web 2.0 Blogs Technology Blogs - Blog Rankings Free Link Exchange
TAMAZU: Computers Blogs

Map IP Address
Powered byIP2Location.com

Wish™ Blog Copyright © 2009 DarkfolioZ is Designed by Bie Blogger Template for Ipietoon