How To Add Social Media Buttons With Css3 Effect To Blogger

Social Media is always helpful to blogger, even one like or share can drive traffic to your blog, you should serve your visitors social sharing and follow us button by which they can stay connected with your blog. If your social sharing option is attractive then user love to share your blog. In this post I will provide you attractive social media follow us button with css3 tooltip effect.

Adding This Widget To Blogger

The steps are extremely straightforward, and would merely take 5 minutes to complete the integration. Just follow the steps as mention below.

• Step 1: Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed
• Step 2: Now within the template search for ]]></b:skin> and just above it paste the following Style sheet CSS Code.

.nav-tt{
 padding: 50;
 width: 70%;
 height: 70px;
 margin: 80px auto 30px auto;
}
.nav-tt li{
 float: left;
 list-style: none;
}
.nav-tt li a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    outline: none;
 position: relative;
 z-index: 2;
    text-indent: -9000px;
    text-decoration: none;
}
.nav-tt li .gplus{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vqyM7ezMO6kAbC3ms4fEUVqPwX0iM8Qrlb5Yn5g8cLzozMT4O-S4Judu9KRsPDvHtQxHMnxPo0o-WYjfRqkQA_0ktrjLPWEI7dIK0guYbQQl1yH_hwhVCC58Ms2263Twp0NUfyOH_3z_/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSrpFfPXrYNW32guRteZ61Kz5DJdV-x8iWFsg-gUXqvysTF_zY7KJojdLm0NZe90oMEzlddarh62sWUYyoEPztD8KQXevUgzKhbt5gZc9VJCWsWQPHcPQpt9NsjA_pe9psNBx57EpJs7H/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXYuJLd_ttZQ5EYGAKryY9b0xPfkSW5Q2b9G6kyUfPgkIM6NJq0-Vn8FUvG50HIQZPee84d1gCEs9xxWDn33mtPm2tuad9KadQuwBeZbDKhRpL7AUSVBE8PFjihqmoKg2hbUEprVfZ_zSo/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJyCc4jYBahmelGEitSRmQt2QyuE6W6NDDhIXwynaef9bBzjcZ2vWsp9u1vQPKvCnDHsMFvrtEspA-GA91R5zMGAjlj9KbIY_HZYPlbknbI0564F_7IUE3087Op94gzMbFakd04onC2wai/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT26xhha9-JvozyVBtysqM7DdRA8nAXDpVM8GlII13ZUbydM2nS3oheEF7OK2kse7SQBgbTvewrxE2jWqgAXjIpn4GE6JG8bKR91njps23h6qfWuf6lp6rLEt-6QoUqXr9iy6Pfivr38is/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQciKfR9po2jCslezhafwhDzNcTeDR2dzMI6-Lm6LYGfVeT5dDbXXrj9WoDn7oK_qQDfAXURDrO1S-RLTzeN4vtLJNFVctNQSnveBzYVInVkFbFaV8O2RDpakzELukNtivSvp8SttYnMz/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCfwWl-Mv4XVLT1uIdPK-5aSwF6IGXoGeDbZcBBUCjWU3XudaXCN3bVXF_ICd_3wWuHK1Uem_4bRcfqiLRkG0cRUkxNaMmAnQOhT9wv85a5Lzy76SwN_1lWROvD3GfgVc4IYshxQCHWRa/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaF8L5KMYCSOfsUSkVBAujg_jhNrrhW9sd8cfQr8fQPD3GUanoPRTT7bJ14RmKJJXaOh1BUlMX9OnK21LW2JupcY4ha265AzktujA54eUtLJdwfvRugh5gxA-vKRTI3CmHdNDIINkzW5g/s32/email.png) no-repeat;
}
.nav-tt li .rss{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53P3hyphenhyphen4kwzJrg7adJa1AtLzOxs_dugNaSUFz82aJECZZuqmHIldBlrGNXkpajN9POpswjA8OMBU1k2egLW4UeD4g3nFKnK6mPnd3H_3pnhb8naCSq_CfH4TU004uvXhsPTAJNracgw3uX/s128/rss.png) no-repeat;
}
.nav-tt li a span{
 width: 80px;
 height: 80px;
 line-height: 80px;
 padding: 10px;
 left: 50%;
 margin-left: -60px;
 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 #ffffff;
 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 0px 10px 0px rgba(0,0,0,0.1);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -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;
}
.nav-tt li a span:before,
.nav-tt li a span:after{
 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: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
 bottom: -13px;
 margin-left: -10px;
 border-top: 10px solid #ffffff;
}
.nav-tt 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);
}

• Step 3: After Pasting Above Code Click On Save Button
• Step 4: Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript.

<div class="lordbuttons">
<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul></div>

• After Adding This Code Replace # with Social Media Page Or Profile Link.
• Finally After Customizing It Click on Save Button Enjoy!!