Cute Social Bookmarking Widget for Blogger

Social Share Widgets are always been most important part of every blogger's blog. You must have atleast one social share widget on your blog to make your blog perfect. After spending couple of hours, finally I made this "Cute" widget for blogger blog. As we know social bookmarking tools / widgets are most important for any website / blog for building social media backlinks by which your blogger rank increases rapidly.
I have shared many Social Bookmarking or Social Sharing Widgets for Blogger but this one is totally outstanding as it is combined with CSS codes with premium thumbnails by DesignBolts. I hope you would like to install  this widget on your blog.

What's Special in This Widget?

1. Easy Installation.
2. Totally Customized with CSS Codes.
3. Fast Loading, doesn't affect blog page loading time.
4. User Friendly.
5. Smooth Hovering Experience.
You can check out the live demo of this widget. Click below button for Live Demo of this widget.

Live Demo

Do you like it? Well, its too easy to install this awesome cute social share widget in your blogger template. As I have already said, this widget is totally improved with css codes and have highly smoothened for best sharing experience. Want to try? Just follow these easy steps.

How To Install Cute Social Bookmarking Widget for Blogger?

1. Go to Blogger > Dashboard > Template.
2. Click Edit HTML.
3. Then find this code ]]></b:skin> by pressing CTRL+F
4. After finding the code ]]></b:skin> paste the following code just above it.

ul.abt-social { list-style:none; margin:15px auto;display:inline-block; }
ul.abt-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.abt-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.abt-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.abt-social li.abt-facebook { background-image:url("http://picoolio.net/images/2013/09/16/Facebook.png"); }
ul.abt-social li.abt-twitter { background-image:url("http://picoolio.net/images/2013/09/16/Twitter.png"); }
ul.abt-social li.abt-googlebuzz { background-image:url("http://picoolio.net/images/2013/09/16/Google-Plus.png"); }
ul.abt-social li.abt-stumbleupon { background-image:url("http://picoolio.net/images/2013/09/16/Stumble-Upon.png"); }
ul.abt-social li.abt-digg { background-image:url("http://picoolio.net/images/2013/09/16/Digg.png"); }
ul.abt-social li.abt-delicious { background-image:url("http://picoolio.net/images/2013/09/16/Delicious.png"); }
ul.abt-social li.abt-linkedin { background-image:url("http://picoolio.net/images/2013/09/16/Linkedin.png"); }
ul.abt-social li.abt-reddit { background-image:url("http://picoolio.net/images/2013/09/16/Reddit.png"); }
ul.abt-social li.abt-technorati { background-image:url("http://picoolio.net/images/2013/09/16/Technorati.png"); }
#abt-cssanime:hover li { opacity:0.2; }
#abt-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#abt-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#abt-cssanime li:hover { opacity:1; }
#abt-cssanime li:hover a strong { opacity:1; top:-10px; }

5. Now find the code <data:post.body/> by pressing CTRL+F
6. After Finding the code <data:post.body/> paste the following code just below it.

<b:if cond='data:blog.pageType == "item"'>
<div style="text-align: center;">
<span style="color: black; font-family: Trebuchet MS; font-size: 14px;"><b>If You Enjoyed This Take 5 Second to Share it.</b></span>
<a href="http://techethix.blogspot.com/" rel="dofollow"></a>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
</ul>
<br />
<div style="text-align: right;">
<span style="font-family: Times, Times New Roman, serif; font-size: 10px;"><a href="http://gg.gg/cshwfb" rel="dofollow" target="_blank" title="Get This WIdget">Get</a></span></div></div>
</b:if>

7. That's it ! You are done. now go to your blog and check it ! I hope you must have liked and willing to install this widget on your blogger blog.
Note : This widget is totally made by Us [TechEthix Property] Kindly don't remove the attribution link from this widget. If you removed it there could be copyright avoilation complaint against you. So don't edit anything in above widget.
Your comments are always appreciated and If you have any problem regarding this widget please let us know or simply drop them here. Stay Connected.