Sliding Social Share Buttons Widget With Rounded Corner For Blogger Blog

Social share buttons plays important roll on blog. It is very important to have social button widget on a blog that visitors can share blog posts on social networking sites. That the blog post or content will be delivered to many peoples on social networking sites . Such as Facebook, Twitter as well as Pinterest.



I have designed a Sliding Social Share Buttons Widget for blogger blog.
This widget is designed with CSS and you can add it to your blog.

Preview Of  The Widget:

• Follow us on Facebook
• Follow us on Twitter
• Follow us on Google+
• Follow us on Pinterest
• Subscribe with RSS

How To Add Sliding Social Share Buttons Widget To Your Blog:

1. Login to your Blogger Dashboard
2. Go to the blog that you want to add this widget on blog
3. Navigate to Layout Menu
4. Select Area to add this widget may be at sidebar or at bottom.
5. Select Add Widget
6. Select HTML/Javascript Code
7. Now Copy and paste following code into content area.

Code:

<style type="text/css">
#bybitz{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#bybitz a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#bybitz li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#bybitz .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2zgUE-fF0kuqK4aV5nQWXnWxgfwgXmeAx7FyJQsuKOSKOSOGljaD_yDcLYLxDK3jVLvDY28EmtdHFPOWQYcrNQNXnoBUCaLCzdgBxYoAa4fh4AZhgsrFw4YxWcC64h4jRrw_sBnrUsut/s320/sprites.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 .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#bybitz li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#bybitz .icon{overflow:hidden; color:#fafafa;}
#bybitz .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#bybitz .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#bybitz .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#bybitz .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#bybitz .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#bybitz li:hover .icon,
.touch #bybitz li .icon{width:220px;}
.touch #bybitz li .facebook, #bybitz li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #bybitz li .twitter, #bybitz li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #bybitz li .googleplus, #bybitz li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #bybitz li .pinterest, #bybitz li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #bybitz li .rss, #bybitz li:hover .rss{background-color:rgba(255,102,0,1);}
</style>


<ul id="bybitz">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/bybitz">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/
bybitz">Follow us on Twitter</a></li><li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/bybitz">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/bybitz">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/bybitz">Subscribe with RSS</a></li>
</ul>

Before saving replace brown colored bybitz to your own username.

And finally save it. And you have done it!
Stay tuned for more interesting blog widgets!