In this tutorial i'm going to explain how to add ribbon style social media follow buttons with awesome effect,this widget have six social media profile sharing links using CSS and HTML for this gadget,it will add attractive look to your website or blog.
DEMO
1.Log in to blogger account.
2.Now select "Template".
3.Click EDIT HTML Button.
4.Find this code by using Ctrl+F ]]></b:skin>
5.Paste below code Before
<style>
/*---bloggersstand.blogspot.com 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/AVvXsEjgk3-UiHnOuVHQ7WvjeVHrHqC03auUXTE5wFONFeYR3DKG3auUjLSuG8-Jn-HoQLiVVfA6q_3vRuuN_Evx8sN-G1tisVUdexMNgnLFjrLAZA1Q4sa13oFa1hOtFIDGfX4OF5J5nqnzL8g/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;
}
</style>
6.Go to blogger and select Layout
7.Click Add Gadget and select 'HTML/Javascript"
8.Paste below code.
<div class="bt-wrapper">
<ul><a class="bt-gplus " href="https://plus.google.com/107955298793879607964"><span>Google Plus</span></a></ul>
<ul><a class="bt-twitter" href="http://twitthis.com/twit?url=http://www.bloggersstand.blogspot.com"><span>Twitter</span></a></ul>
<ul><a class="bt-pinterest" href="http://pinterest.com/username/"><span>Pinterest</span></a></ul>
<ul><a class="bt-facebook" href="http://www.facebook.com/sharer.php?u=http://www.bloggersstand.blogspot.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/bloggersstand"><span>Feeds</span></a></ul>
</div>
- Change bloggersstand with your Feedburner ID .
- Change http://www.bloggersstand.blogspot.com with your Facebook URL.
- Change http://www.bloggersstand.blogspot.com with your Twitter URL.
- Change URL with your Linkedin URL.
- Change 115587840274121878323 with your google plus id.
- Change Username with your pinterest username
9. Now save your 'HTML/Javascript'. Done !