Add Social Buttons With Hover Effect In Blogger Blog

In this tutorial I'm going to share how to add social buttons with hover effect to your blogger blog. This widget contains Facebook , Twitter , RSS , Google Plus and Pinterest profile links. This is a perfect widget for your blog's sidebar. It will give wonderful look to your blog and attract readers.

Hovering over these social buttons they will transform into colorful style. If you want to see demo first then take a look at the following screenshot and demo. Now, let's start the tutorial:

You May Like To Read:

Live Demo

How to Add Social Buttons With Hover Effect To Blogger Blog

Add Social Widget To Blogger

Go to Dashboard > Design > Page Elements.
Click Add A Gadget. In window, select HTML/Javascript .
Copy the code below and paste it inside the box.
Save The Gadget

Adding Social Widget To WordPress

Go to Dashboard > Appearance > Widgets > Available Widgets
Drag Text Widget Into a Sidebar.
Paste In The Code.
Save Widget & Its Done

Code For Social Subscription Widget

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#rb-social-hover{position:relative;width:240px;height:217px;background:#554e4c url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}#rb-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#rb-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#rb-social-hover #links{position:absolute;bottom:0;width:100%;}#rb-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#rb-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#rb-social-hover a.twitter:hover{background:#79dbff;}#rb-social-hover a.facebook:hover{background:#6e9bee;}#rb-social-hover a.google:hover{background:#00be00;}#rb-social-hover a.pinterest:hover{background:#cb2027;}#rb-social-hover a.rss:hover{background:#ffae42;}#rb-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>
<div id="rb-social-hover">
<div id="links"><a href="http://twitter.com/BlogsDaddy" class="twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/twitter.png" /></div></a>
<a href="http://www.facebook.com/BlogsDaddy" class="facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/117100549673033253859" class="google" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/google.png" /></div></a>
<a href="http://pinterest.com/gaganmasoun" class="pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/pin.png" /></div></a>
<a href="http://feeds.feedburner.com/BlogsDaddy" class="rss" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/rss.png" /></div></a>
</div></div>

Save Widget and It's Done

Remember Notes

Replace other Yellow Highlighted URL's With Your Social Profile URL's as Mentioned Above In Code.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

Thanks for making this possible! Kindly Bookmark and Share it.