Cool Social Icons with Tooltip Hover Effect

Posted On // 4 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.

4 comments

10 August 2013 at 23:38

Nice One , I am using it in my website !

Reply
25 May 2014 at 08:30

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.

Reply
Piotr Lavka Author
23 June 2014 at 11:17

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.

Reply
30 June 2014 at 07:58

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?

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Cool Social Icons with Tooltip Hover Effect |