Friday, 13 September 2013

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:



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(http://2.bp.blogspot.com/-05soRH2FN0M/URs3FjSpiBI/AAAAAAAABYc/UjN-swK_7yc/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!

About the Author

AmiT Kadam

Author & Editor

Amit is the passionate Blogger, Designer and Inovators.. Who can visualize and develop breathtaking graphics and Websites and writes on it! He use to code HTML, HTML5, CSS, CSS3, JavaScript, JQuery, AJAX and Laravel.

1 Reactions:

  1. I do consider all the ideas you have introduced for your post.They’re really convincing and can definitely work. Thanks for the post.
    website design

    ReplyDelete

Post your valuable comments here..
We are waiting for it...

 

BYBITZ © 2015 - Designed by Templateism.com, Plugins By MyBloggerLab.com