Ribbon Social Sharing Widget For Blogger

By : Follow Trends

On : 9/02/2015

In : Widget

0 comments

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.
    
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

/*---bloggertrix.com Animated Social  Widget ---*/
.bt-wrapper{
 padding: 0;
 width: 535px;
 height: 70px;
 margin: 80px auto 30px auto;
}
.bt-wrapper ul{
 float: left;
margin-left: -45px;
}
.bt-wrapper ul a{
 display: block;
 width: 68px;
 height: 110px;
 margin:  -10 -24 px;
 outline: none;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdXKd7cF_IBQOG6wNHkAOs5SUwa-riElK4MDgFoZZaz-820DRLeshzq3n1HvE50OPyENCWIBXxkIKFJuEmRZantVHtpM1o4EvMaDCWlIfg0KEg3gLFemnVrbOkRQzgS1mDV-qMixCqJp0/s1600/bloggertrix+-.png) no-repeat top left;
 text-indent: -9000px;
 position: relative;
}
.bt-wrapper ul .bt-gplus{
    background-position: 0px 0px;
}
.bt-wrapper ul .bt-twitter{
    background-position: -68px 0px;
}
.bt-wrapper ul .bt-pinterest{
    background-position: -136px 0px;
}
.bt-wrapper ul .bt-facebook{
    background-position: -204px 0px;
}
.bt-wrapper ul .bt-linkedin{
    background-position: -272px 0px;
}
.bt-wrapper ul .bt-rss{
    background-position: -340px 0px;
}
.bt-wrapper ul a span{
margin-bottom: 50px;
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-family: Shanti, Arial, Helvetica, sans-serif;
 font-weight: 400; 
 font-size: 14px;
 color: #2f6986;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #2f6986;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.bt-wrapper ul a span:before,
.bt-wrapper ul a span:after{
margin-top:20px;
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}
.bt-wrapper ul a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #2f6986;
}
.bt-wrapper ul a:hover span{
 opacity: 0.9;
 bottom: 70px;
}
   

4. Go to blogger and click Layout 

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<div class="bt-wrapper">
   <ul><a class="bt-gplus " href="https://plus.google.com/107955298793879607963"><span>Google Plus</span></a></ul>
    
   <ul><a class="bt-twitter" href="http://twitthis.com/twit?url=http://www.bloggertrix.com"><span>Twitter</span></a></ul>
    
   <ul><a class="bt-pinterest" href="http://pinterest.com/tiwcher/"><span>Pinterest</span></a></ul>
    
   <ul><a class="bt-facebook" href="http://www.facebook.com/sharer.php?u=http://www.tiwcher.com/"><span>Facebook</span></a></ul>

    
   <ul><a class="bt-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>
    
   <ul><a class="bt-rss" href="http://feeds.feedburner.com/tiwcher"><span>Feeds</span></a></ul>
   </div>
  
  

Replace with your site and usernames
7. Now save your HTML/Javascript'.
    You are done...