Floating Social Pages icon With Pop Effect on Mouse Hover for Your Blog

Getting more Social followers on pages like Facebook, Twitter, Tumblr, Feed Burner and Twitter can be done by implementing attractive social buttons that will compel users to click and share or like, follow your social fan page.

There are many methods for growing your blog audience on social page,One among them is Floating Social page icons which is very attractive and users must click on that buttons.

This social buttons can be used in Blogger, WordPress and any other blogs support adding you own customized HTML codes with Javascript.

Adding Social Content Locker is also an alternate method for growing your social fans

Preview :-

How It Works ?

This Social icons appear on left side of the blog page floating at center(For example i’m using it in my blog and you can see it here)

When mouse is over specific social icons it will automatically pops out the name of specific Social fan age. With the default color they use as their theme.For example red for Google +, Dark blue for Facebook, Light blue for Twitter and so on.

How To Add It ?

Adding this colorful light weight floating social icons on your blog only matters adding a small piece of HTML tag without style sheet on your blog.

Blogger :

Go to Blogger Dashboard > Layout > Add a Gadget 

Now click on HTML.Javascript

On the space provided paste the HTML Tags given below

Make changes as required

Now save the gadget

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/
ipeeworld' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='http://plus.google.com/
+ipeeworld/' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/
ipeeworld' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.com/
ipeeworld' target='_blank'>
<span>facebook</span>
</a>
</li>
<li>
<a class='entypo-rss' href='http://feeds.feedburner.com/
IpeeWorld-TechnologicalART' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- IPEE World : http://www.ipeeworld.com/---------- */
/* ---------- http://ipeeworld.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

Must Read : Colored All In One Socail Widget For Blogger and WP 

Changes To Make :

Replace all red colored text with your  particular social page URL

That’s it

Voila !! And now this social icons are live on your blog.

Now you will get more social subscribers than before

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *