BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Cute Social Bookmarking Widget for Blogger


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.

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(""); }
ul.abt-social li.abt-twitter { background-image:url(""); }
ul.abt-social li.abt-googlebuzz { background-image:url(""); }
ul.abt-social li.abt-stumbleupon { background-image:url(""); }
ul.abt-social li.abt-digg { background-image:url(""); }
ul.abt-social li.abt-delicious { background-image:url(""); }
ul.abt-social li.abt-linkedin { background-image:url(""); }
ul.abt-social li.abt-reddit { background-image:url(""); }
ul.abt-social li.abt-technorati { background-image:url(""); }
#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="" rel="dofollow"></a>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong>Facebook</strong></a>
<li class='abt-twitter'>
<a expr:href='&quot;; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
<li class='abt-googlebuzz'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
<li class='abt-stumbleupon'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
<li class='abt-digg'>
<a expr:href='&quot;;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
<li class='abt-delicious'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
<li class='abt-linkedin'>
<a expr:href='&quot;;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 class='abt-reddit'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
<li class='abt-technorati'>
<a expr:href='&quot;; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
<br />
<div style="text-align: right;">
<span style="font-family: Times, Times New Roman, serif; font-size: 10px;"><a href="" rel="dofollow" target="_blank" title="Get This WIdget">Get</a></span></div></div>
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.


  1. This Widget is really cool thanks for providing us.
    this is also help to increase social traffic when ever someone share content on their wall.
    thanks for sharing this kind of widget.

    1. Thanks for being here Rizwan Saharan, I am so glad that you liked it.
      I hope you must have tried it on your blog. Stay Connected :)

  2. Creative widget ,Thanks for sharing the details.I had found out some other tools which can help you for social media promotions like Viral Content Buzz,Facebook Image Detection Tool by TechWyse,BuzzBundle.I had read the details at Moz Blog.

    1. Thanks for sharing your thoughts here Kim B. Padilla,
      I hope you would like to take tour on my blog :-)
      Stay Connected ;-)

  3. Thanks for sharing fabulous information. It' s my pleasure to read it.I have also bookmarked you for checking out new posts. by PSY 201 Week 8 Assignment

    1. Thanks Buddy, You can get here Awesome Tricks and Widgets for Blogger :)
      Stay connected and thanks for bookmarking :)


Powered by Blogger.