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
Add Cool Social Icons With Hover Effect Widget To Blogger
Adding CSS Code
- Go To Blogger > Layout > Edit HTML
- Search For ]]></b:skin>
- And paste the code below just above ]]></b:skin>
#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
- Go To Blogger > Design
- Click choose a gadget
- Select HTML/javascript widget
- 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&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.
yea..these social logo look very nice. I’ll try it to add in my site too
This works for both blogger and wordpress users.
nice one ammar, the hover effect is really cool.Thanks for sharing
Welcome :D