How To Add Cute Social Bookmarking Widget For Blogger

Every blogger and webmaster knows very well about social bookmarking and its importance.To make perfect blog you must have atleast one social bookmarking widget. [TechEthix Property] made this beautiful social widget and it is known as "Cute Social bookmarking widget". Why the word Cute is used, because of its elegant and beautiful design that attracts every visitor. I have shared many social bookmarking widgets but this one is really outstanding as it is combined with CSS codes with premium thumbnails by DesignBolts.

What's Special In This Widget

1. Easy to install.
2. User Friendly
3. Customized with CSS codes.
4. Fast Loading (Doesn't take time to load).
5. Smooth Hovering Experience.

LIVE DEMO

How To Add Cute Social Bookmarking Widget For Blogger

1. Login to Blogger.com
2. Go To Dashboard.
3. Click on "Template Section".
4. Click on "Edit HTML"
5. Find ]]></b:skin> tag by pressing Ctrl+F
6. Paste the below code just above ]]></b:skin> tag.

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

7. Now find tag <data:post.body/> by pressing Ctrl+F.
8. After finding <data:post.body/> tag 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>

9. That's You are done. Save it

Note: This Widget is made by [TechEthix Property] . Don't delete or edit anything in this widget. If you removed or deleted something from widget there could be copyright violation complain against you.

If you are facing any problem please let me know.

Thanks, 
Enjoy Bookmarking!