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
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.
Now kindly make these customization changes to add your own links to menu:
I found this great Floating Facebook Like Box Widget on internet. This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This is a great widget for blogger. Which will help you to increase facebook likes. You just need to put Jquery and CSS . HTML code to your blogger blog. I will soon share more floating widgets like Google+, Twitter Follower Box and Floating Subscription box in future. Now lets move to how you can add this in blogger I will show you How You Can Add Stylish Floating Facebook Like Box Widget In Blogger.