Add Sharing is Caring in Blogger Posts

At the time when I was searching online for some information, I visited number of blogspot blogs. And I found that most of those blogs used "Sharing is Caring" social bookmark widgets below every posts. From that moment on, I also wanted to add it in my blog that I have done already.

Besides different social bookmarking widgets found on the internet, "Sharing is Caring" is probably the most attractive and best one. As you know, bookmarking and sharing your blog posts by your readers allows you to achieve more traffic as well as rank higher in the search engines. Therefore, it is better to add social bookmarking widget in your every blogger posts.

This tutorial will help you to add "Sharing is Caring" widget below every blogger posts.

Sharing is Caring
This widget can submit your post to some of the most popular social networking and bookmarking sites like Delicious, Digg, Technorati, StumbleUpon, Reddit, Twitter and Facebook. In addition, it also includes 'Subscribe to RSS' and 'Email to Friends' buttons.

To begin adding this widget, follow the step-by-step instructions.

Step 1
Login to your blogger account. Click Layout>Edit HTML. It is recommended to backup your template by clicking on "Download Full Template" in case if anything goes wrong. Now, expand the template by clicking on the check box of "Expand Widget Templates".

Step 2
Press Ctrl+F and find the code </head>.

Now, add the following code just before the above code.

<!-- Sharing is caring -->

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;http://img714.imageshack.us/img714/57/sharing.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

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-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-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;
}

</style>

<!-- /Sharing is caring -->

Step 3
Again, find the code <data:post.body/> and add the following code just after it.

<!-- 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' title='Delicious'/></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' title='Digg'/></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' title='Technorati'/></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' title='Reddit'/></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' title='StumbleUpon'/></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' title='Facebook'/></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' title='Twitter'/></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' title='Furl'/></li>

<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/MainSeoTips' target='_blank' 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' title='Email To Friends'/></li>
</ul></div>
<!-- /Sharing is caring -->

Step 4
Replace "http://feeds.feedburner.com/MainSeoTips" in the above code with RSS feed url of your blog.

Lastly, save the template.

After all the above steps are completed, view your blog and you can see "Sharing is Caring" social bookmarking widget in your every posts.

2 comments:

  1. I found this tutorial very helpful and linked a post to it on my blog here:
    http://raisingfutureleaders.blogspot.com/2010/07/how-to-add-sharing-is-caring-widget-to.html

    I just noticed today that it's no longer working. Only the "Sharing is caring!" part shows, but not the social media icons Where did they go? It was working fine before.

    ReplyDelete
  2. Hello,

    Nice Post shared here with lots of good information. i did enjoyed reading your this post and did get lots of good information from here. it would be nice if you can share some information related to directory submissions here in your future posts..

    Thanks,

    ReplyDelete