Animated CSS Style Social Subscription Widget for Blogger

Stylish and eye-catching Social Media Icons are part of a professional blog. It increases the sharing of posts and overall look of blog. It helps your reader to share your contents with their social networks and it will increase your page views and Google Page Rank. Lets check it out.

Live Demo


Recommended: Add Subscription box for blogger posts with social icons

 How to Add ??

• Go to your blogger account and login.
• Select Layout and then click on Add a widget.
• Now select Java/Html widget.
• Copy and paste the following code into widget.

<style>#htbssw{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;  } #htbssw a{text-decoration:none; font-family:trebuchet ms,sans-serif; font-weight:bold; border-radius:25px; border-style:solid; border-width:5px;  } #htbssw li{position:relative; height:45px; cursor:pointer; padding: 0 !important; border-bottom-style:solid; font-weight:bold; border-width:1px; border-radius:25px; margin-right:85px; } #htbssw .facebook, .googleplus, .pinterest, .rss, .twitter{ position:relative; z-index:5;  display:block;  float:none;  margin:10px 0 0 1;  width:210px;  height:38px;  border-radius:5px;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn3PgB4CSs-v_kJ3xRWH9PFJNGHO3OAvZT1KAqvPanTgi796ZaQJInRrM6ti80vtlcgNNa0b6yIN7J7papEe6Os1tG8nJyfZekpGNuCSNbhQNp9jmK9YnMrxrUwXGbGpYT6hjolKcZ/s158/howdoblog.com.png) no-repeat;   background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;   box-shadow:rgba(0,0,0,.28) 0 2px 3px;  color:#141414; text-align:left;  text-indent:50px;  text-shadow:#333 0 1px 0; white-space:nowrap;   line-height:32px;  -webkit-transition:width .35s ease-in-out,background-color .25s ease-in-out;  -moz-transition:width .35s ease-in-out,background-color .25s ease-in-out;  -ms-transition:width .35s ease-in-out,background-color .25s ease-in-out;  -o-transition:width .35s ease-in-out,background-color .25s ease-in-out;  transition:width .35s ease-in-out,background-color .25s ease-in-out;  -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px; } #htbssw li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px; } #htbssw .icon{overflow:hidden; color:#fafafa; } #htbssw .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0; border-radius:25px; border-style:solid; border-width:5px; } #htbssw .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #htbssw .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #htbssw .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #htbssw .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #htbssw li:hover .icon,  .touch #htbssw li .icon{width:210px;} .touch #htbssw li .facebook, #htbssw li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #htbssw li .twitter, #htbssw li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #htbssw li .googleplus, #htbssw li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #htbssw li .pinterest, #htbssw li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #htbssw li .rss, #htbssw li:hover .rss{background-color:rgba(255,102,0,1);} /*Social Buttons Widget By mybloggingtips.com */ </style>
 <!--Social Buttons Widget By mybloggingtips.com-->
 <ul id="htbssw"><li data-alt="Follow us on Facebook"><a class="icon facebook" href="www.facebook.com/blogsmasala">Follow us on Facebook</a></li><li data-alt="Follow us on Twitter"><a class="icon twitter" href="www.twitter.com/mybloggingtips1">Follow us on Twitter</a></li><li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/115690612975231043872">Follow us on Google+</a></li><li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="www.pinterest.com/mybloggingtips/mybloggingtips">Follow us on Pinterest</a></li><li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/mybloggingtips/nJeF">Subscribe with RSS</a></li></ul>

• Now save widgets and you are done.

 Customization

Replace Blue color text with your social networks links and feed url.

 Was It Helpful ?

I hope it will help you to get more sharing and subscribers. Please like and share it with your friends.