Cool Social Icons with Tooltip Hover Effect

Dhiraj Barnwal Tuesday, 16 July 2013 6 comments


Social Icons Blogger
Today I am going to teach you how you can add yet another social icons to your blogger blog. These social icons are a bit different as it has tooltip hover effect in them. This widget is made from pure CSS without the use of any image or JavaScript.

The concept behind this widget is quite simple. There are four social icons in which you can add your own desired URL. On hovering over these buttons one can see tooltip appearing with the help of transition and transform CSS. These icons are really eye-catching and have a attractive look. A live working demo of this widget can be seen just below.





Once you have seen the demo to add this widget to your blog just follow the below given instruction.

Adding the HTML/CSS in Layout


To add this widget firstly go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the code in the box below.

Cool Social Icons with Tooltip Hover Effect
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/TWITTERHANDLE" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/FBID" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>

Change the text in BOLD RED with your desired URLs. Once you have added the code and made the changes save the respective widget and finally the template.

You are done now. Now you and your visitors can see these awesome and Cool Social Icons with Tooltip Hover Effect in your blogger blog.
Labels:
Google+ Pinterest

6 Comments to Cool Social Icons with Tooltip Hover Effect Post Yours! Read Comment Policy ▼

Nice One , I am using it in my website !

Hi! Well, this is by far the most helpful site I have come across on the internet to help me make my blog more beautiful. This is simply amazing. And a question. Can you tell me how do you add the four functional cartoon-cum-cool icons at the bottom of your page? That would be great.
:)
And you're doing a good job. Thank you :D
And do visit www.thehowlingwolves.blogspot.in and suggest any changes.

Thanks for Tipps.
Now I can add tis social icons on my blog (Berlin du bist wunderbar), and change social buttons from addthis, because these not always shows.

Alguem poderia me ajudar por favor, segui todos os passos acima, mas os icones não aparece no blog so o link :/
Como eu devo proceder?

nice informative blog....
http://factsofworld4u.blogspot.in/