Social Sharing Widget With Tool Tip Effect For Blogger Blog Or Website

Posted by Vikram Rajpurohit 0 comments
Another Social Sharing Media widget with tool tip Effect.This CSS3 social sharing widget with tool tip effect will attract visitors and let them share your  blog or WordPress site on their social networking sites like Facebook,Google+,Twitter,LinkedIn etc.This widget will give a funky look to your blog.

tooltip-social-sharing-widget-for-blogger-website

How to Add this Social Sharing Widget in blogger blog :


1.Go to Blogger Dashboard > Template > Edit HTML > Proceed
2.Now search for ]]></b:skin> and paste the below CSS code above it .


.gc-tooltip{
padding: 0;
width: 435px;
height: 70px;
margin: 80px auto 30px auto;
}
.gc-tooltip li{
float: left;
}
.gc-tooltip li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
background: transparent url(http://3.bp.blogspot.com/-2tVAff2IojA/UU6idC80o6I/AAAAAAAABis/qm5vAKG7-zE/s1600/tooltip-social-sharing-widget-for-blogger-blog.png) no-repeat top left;
text-indent: -9000px;
}
.gc-tooltip li .tt-gplus{
background-position: 0px 0px;
}
.gc-tooltip li .tt-twitter{
background-position: -68px 0px;
}

.gc-tooltip li .tt-facebook{
background-position: -204px 0px;
}
.gc-tooltip li .tt-linkedin{
background-position: -272px 0px;
}

.gc-tooltip 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;
}
.gc-tooltip 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);
}



3.Now Go To Blogger > Layout > Select HTML/JavaScript widget. Paste the code below inside it .


<div class="genuinecontent">
<ul class="gc-tooltip">
<li><a class="tt-facebook" href="FB_URL"><span>Facebook</span></a></li>
<li><a class="tt-linkedin" href="LN_URL"><span>LinkedIn</span></a></li>
<li><a class="tt-gplus" href="G+URL"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="TW_URL"><span>Twitter</span></a></li>
</ul>
</div>

Note: In the above highlighted red text enter your social networking URLs.

Click on save and you are done:)