Add Social Icons with Tooltip Hover Effect in Blogger

Social Media plays a vital role in engaging more readership to your blog, thus indirectly helps you to increase the traffic of your blog. These amazing Social Symbols with Tooltip Float Impact, designed simply by CSS, without any image or javascript in it. This widget is perfect designed and simply to customize and install. The goal was to slowly fade-in and fade-out the opacity modifying, and animate the place of the tooltip a little bit. With that in thoughts, I was able to make a beautiful social media icons display using CSS3. Social bookmarking widgets helps you to boost traffic on your blog. Today I am sharing an amazing social bookmarking widget which comes with wonderful cartoon tooltips,when any customer moves on the public symbols the tooltip comes out also it is applicable a opacity effect to these social icons,this effect increase beauty of this widget. Now a days people spend more time on social websites as compared to other websites so by properly placing social media symbols on your web page you can  obtain new guests and increase achieve of your top quality material.  So now,  we are going to create simple social media icons which upon hover changes its color.

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 convert CSS. These symbols are really eye-catching and have a eye-catching look. These symbols consist of all the Social icons connecting your account together. So these could be used in order to get more followers or subscribers on your channel. You can use these buttons for your blogger blog to share your blog posts straight on individuals. Public discussing helps you very much for your SEO. Customers can straight discuss your content links on social sites and it will gain you more readers to your blog. All social media sites have been spreading day by day and which is the best source to promote and drive traffic to blog/website as we have also later published on stylishfacebook pop-up like box but this one is different from all other icons on However the below tutorial will explain how to add animated social sharing tooltips plugin in blogger.

Add Social Icons with Tooltip Hover Effect in Blogger

Step 1: Go to Blogger Dashboard.

Step 2: Click on Layout.

Step 3: Click on Add Widget.

Step 4: Select HTML/JavaScript.

Step 5: Paste code HTML/JavaScript in box below.

<div class="container">

<ul class="action-bar clearfix">

<li>

<a href="http://twitter.com/TwitterUSERNAME" 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/FacebookID" class="comment">

<span class="zocial-facebook"></span>

<span class="tooltip">Like us</span>

</a>

</li>

<li>

<a href="http://yoursite.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>

Step 6: Now Change the text in Blue with your desired URLs.

Step 7: Now Finally Save widget and Done.