Social Media is very Helpful to increase traffic and share your post so that your post reach to the maximum people. but one question is arise how to put button in blog with attractive style. If your Social Sharing button is attractive then People surely follow you. In this post I will provide you a very attractive social media widget follow us button with css3 tooltips effect.How to Add this Widget to Blogger ?
- Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
- Find
Ctrl +F for the code below
]]></b:skin>
- Just above it paste the following CSS Code.
.tt-wrapper{
padding: 0;
width: 435px;
height: 70px;
margin: 80px auto 30px auto;
}
.tt-wrapper li{
float: left;
}
.tt-wrapper li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimewGYa27UQ1rYxCF3NY94DqGpBx1qwd19evYTNER1_laM7aiOAdkT81-F_EP-py8xKCQOrK6zAUHQvCy_NsDxnl78rrsIXOcdJ56JvZPJQ_uaoGMdy2YW5D15biBDpHStwsr6Kjjm5J1i/s1600/growcase_the_social_gunman_icons.png) no-repeat top left;
text-indent: -9000px;
}
.tt-wrapper li .tt-gplus{
background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
background-position: -340px 0px;
}
.tt-wrapper li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -55px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #fff;
background: rgba(255,255,255,0.5);
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 50%;
bottom: -40px;
opacity: 0;
box-shadow: 0px 3px 8px rgba(0,0,0,0.1);
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2);
-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;
}
.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
- Now another Part is add HTML Code where you want to show this button in your blog. You Can put also in Widget or in Templates.
- Now go to Blogger Dashboard > Layout
- Click on Add a Gadget (below header)
- Select HTML/JavaScript
- Copy below code and paste inside it.
<div class="Sainibutton">
<ul class="tt-wrapper">
<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
<li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
<li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
<li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>
</div>
- Now Replace # with your Social id.
I hope you like this beautiful social widget for blogger, If you still have any problem please share it by using a comment, Thanks.
0 comments:
Post a Comment