Sliding Social Widget for Blog

L

ets Jump into another Sliding widget for Share your Post in Social Network.This Css3 Sliding will full custom and fully Easy implement in Blog . Try this ...widget..

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .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/AVvXsEgPvoxFwni9xJlDuDt9kE9jBRUdZv-V8qL90rLz3UYqsBnohvQC6OnxXwyjgLD6OPUXkYE6mZwUKYFUBIDVgklBCOB9grjhj8WPuiIS_aoJdYdS4xTJ0wQyQ3KH7snkkRUhCJcKWgucW8k/s800/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:#FFFFFF; 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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#FFFFFF; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:250px;} /*----to change the width of the sliding----*/
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

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

REplace your ID and USER name in High lighted area

10. Now save your HTML/Javascript'.

    You are done...