Social media is always is a very helpful to every blogger , even it increase your traffic as soon through share and like services by their social media. you should have to serve that your visitors social media and follow us button by which they can help to connect with your blogger blog. If you make a good sharing social media widget for blog then user love and share a blog which helps to generate a traffic also, In this post i will provide you to a very attractive and nice social media widget follow us button with css3 tool tips effect.
Add this widget To your blog
Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed
Now within the template search for ]]></b:skin> and 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/AVvXsEiOF6WApC4iNPimxpR6ipzHoX-JKFIV8nJwlD97Qxw8rq7prAvfYB5Sg6fWb4Mn20XxCjIyabBzQo47Db0nGoJeQfVnwAjeplNa5XEuiUisb8y7h3zx_ESrZofeLGkHT7KD66fxCC6K-6j8/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 you have to need paste the following code where you want . For Example Layout >> Add a Gadget >> Edit HTML/JavaScript.
<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 url code. you have done it.
