Cool Social Icons With Hover Effect Widget

After a lot of trial and efforts I finally created Cool Social Icons With Hover Effect Widget for your blogs. You can add this social icons with hover effect widget to both WordPress and Blogger. This widget is a very effective to take attention of your visitors and they will may go to your profile to follow your, hit a like button etc. You can easily add this to your sidebar which is a better option to take attention of visitors. This social icons with hover effect is available on FreshLife WordPress theme only. I converted it to work for both Blogger and WordPress Blogs. I show you How TO Add Cool Social Icons With Hover Effect Widget To WordPRess and Blogger. Check out demo below.

See also

 

Social Icons with no - hover effectSocial Icons with hover effects
Live Demo

Add Cool Social Icons With Hover Effect Widget To Blogger

Adding CSS Code

  1. Go To Blogger > Layout > Edit HTML
  2. Search For ]]></b:skin>
  3. And paste the code below just above ]]></b:skin>
/* Social Widget by AllBloggingTips*/
#subscribe {
background:#f3f3f3;
border: 1px solid #ECEDE8;
font-size: 90%;
margin: 0 0 15px 0;
padding: 7px 5px 3px 5px;
width: 288px;
}
.subscribe-icons {
margin: 0 auto;
width: 286px;     background: #f7f7f7;
}
.subscribe-icons li {     -moz-border-radius:6px;
display: inline;
float: left;
font-size: 11px;
margin: 0 2px 10px 2px;
width: 52px;
text-align: center;
}
.subscribe-icons a {
color: #444 !important;
display: block;
padding: 40px 0 2px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.subscribe-icons a:hover {     -moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
color: #369 !important;
text-decoration: none;
}
.subscribe-icons .subscribe-youtube a {
background: url(http://4.bp.blogspot.com/-swMRIBuYfWE/TybFZPcnV1I/AAAAAAAAASQ/Rtkob1vf92I/s320/icon-youtube.png) center top no-repeat;
}
.subscribe-icons .subscribe-twitter a {
background: url(http://1.bp.blogspot.com/-WmOzzyzsiKk/TybFYxcl6CI/AAAAAAAAASI/Bsv9gjgRpVo/s320/icon-twitter.png) center top no-repeat;
}
.subscribe-icons .subscribe-facebook a {
background: url(http://3.bp.blogspot.com/-viMUReHyino/TybFYXwdRII/AAAAAAAAARw/N0fjYPPc9-8/s320/icon-facebook.png) center top no-repeat;
}
.subscribe-icons .subscribe-rss a {
background: url(http://2.bp.blogspot.com/-YpTDM_cQ_2U/TybFYi6fqJI/AAAAAAAAAR4/LzLcQoWTYuM/s320/icon-rss.png) center top no-repeat;
}
.subscribe-icons .subscribe-email a {
background: url(http://4.bp.blogspot.com/-Im_zOo6iIrY/TybFYIf3GBI/AAAAAAAAARg/2476QicRNUE/s320/icon-email.png) center top no-repeat;
}

Adding social icons with hover in sidebar

  1. Go To Blogger > Design
  2. Click choose a gadget
  3. Select HTML/javascript widget
  4. Paste the following code inside it
<div class='subscribe'>

        <ul>
            <li><a target="_blank" rel="nofollow" href="https://plus.google.com/103280517588083500359">Google+</a></li>
            <li><a target="_blank" rel="nofollow" href="http://twitter.com/allbloggingtips">Twitter</a></li>
            <li><a target="_blank" rel="nofollow" href="http://www.facebook.com/allbloggingtips">Facebook</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/latestbloggingtips4u">RSS</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u&amp;loc=en_US"> Email</a></li>

        </ul> <!--end .subscribe-icons-->

        <div/>

    </div>

Make Following Changes

  • Replace AllBloggingTips with your Twitter, Youtube, facebook, Feed and Email username.

That’s all. If you face any problem adding this social icons with hover effect. Feel free to ask.

4 thoughts on “Cool Social Icons With Hover Effect Widget”

Leave a Comment

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