LED Lights Social Share Buttons For Blogs

Hey Readers, I am sure, all of you know the importance of having social share buttons at your blog. As lot of people are active at these sites, once your post is shared on a social networking site, huge mass of people start visiting your blog if your post is worth reading. Therefore share buttons are essential for every blog. At the same time, having a unique and cool share widget also encourages the readers to share your post at their favourite bookmarking sites. So, Today, I have designed a unique and nice looking sharing widgets for you.

Lets first have a look at the demo of the sharing widget that I have designed…

Demo LED Sharing Widget

Nice?  Want to have it in your blog ? Then follow the steps below…

1. Login To your Blogger dashboard. Go To Design>>Edit HTML.
2. Click on ‘Expand Widget Templates’.
3. Now Find ]]></b:skin>
4. Copy the code from the box below and paste it just above ]]></b:skin>.

   /* -----EB's Social Bookmarking Widget -----*/
   .sharewidget{display:inline;}
   .sprites{display:inline-block;
   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlyaYr_ybx1bGqoeLfszJBqMKs7qxDqsXo0QYQF6nxFXdElbXr14gc_-icrR28L-gMYxOmv1p3cPEDy-PecK5EEU0OAvBjmMehJfpJLHamBrT59Rs20K6dPKDRUoLhi7FHsQdSFZDIQ7Hi/s1600/result.png);
   background-color:transparent;background-repeat:no-repeat;}
   a#technorati{height:80px;width:80px;background-position: 0px -666px; border:0}
   a#technorati:hover{background-position: 0px -592px;}
   a#stumble{height:80px;width:80px;background-position: 0px -518px; border:0}
   a#stumble:hover{background-position: 0px -444px;}
   a#fb{height:80px;width:80px;background-position: 0px -370px;border:0}
   a#fb:hover{background-position: 0px -296px;}
   a#tweet{height:80px;width:80px;background-position: 0px -814px;border:0}
   a#tweet:hover{background-position: 0px -740px;}
   a#delicious{height:80px;width:80px;background-position: 0px -74px;border:0}
   a#delicious:hover{background-position: 0px 0px;}

5. Then find <data:post.body/>. If you can not find it then search for this  <p><data:post.body/></p>
6. Copy the following code and paste it just below <data:post.body/> OR <p><data:post.body/></p>

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='share-widget'>
   <center>
   <div style='color: #408DD2;'>Kindly Bookmark and Share The Knowledge!</div>
   <a class='sprites' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot;   + data:post.title' id='technorati' rel='external nofollow' target='_blank'/>
   <a class='sprites' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url +   &quot;&amp;title=&quot; + data:post.title' id='stumble' rel='external nofollow' target='_blank'/>
   <a class='sprites' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url +   &quot;&amp;title=&quot; + data:post.title' id='fb' rel='external nofollow' target='_blank'/>
   <a class='sprites' expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; +   data:post.title' id='tweet' rel='external nofollow' target='_blank'/>
   <a class='sprites' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='delicious' rel='external nofollow' target='_blank'/>
   </center>
   </div>
   </b:if>

7. You can Replace #408DD2 with any Hexadecimal color code that you like…
8. Finally, Save the template.
9. View your blog and enjoy the new look of the beautiful bookmarking widget below all your posts.

Compitable with: Mozilla Firefox 2.0 and above, Google Chrome, Internet Explorer,Safari, Opera, and all other major browsers…

I hope you liked the buttons…Do Send in your suggestions or doubts through the comment form below…

Get Free Updates of Enhance Blogger : *Do Activate Email Subscription To Enhance Blogger By Clicking the Confirm Link Sent To You