How To Add Social Buttons With Hover Effects In Blogger

I will release Floating Social Media tab widget which prove to be the greatest hit of all time. So I decided to share yet another fabulous looking social buttons that will add a new life to your blog. It is sleek and stylish plus it has entire new look which will attract readers. So today, in this article i will be sharing How to Add Social Buttons with Hover Effects in Blogger.

Where This Social Buttons With Hover Will Appear:

Many of our visitors complained that there is no such Social widget that could be used in the Sidebar. Therefore, keeping those views in mind i have designed a Social Bookmarking Widget which can be used in the sidebar. It has five Social buttons which includes Pinterest, Facebook, Google Plus, Twitter and RSS Feed. Take a look at the following screenshot.

How To Create Social Buttons With Hover Widget in Blogger:

Just like my other tutorials, the steps which are mention below, are ideally made for those who are new bloggers. It will hardly take 5 minutes to complete the integration. Just follow the following instructions.  

• Go to Blogger.com >> Layout >> Add a Gadget.
• In the List Select Edit HTML/JavaScript.
• Now in the HTML Text box paste the Following Coding.

YOUR NAME
<div id="rb-social-hover">

<div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsso_HeM8AevNWpty-vC26hLF369HLGJbAQEoJojDQco2P9hg2zjQW8V-Z077mrWN1eYB9pXx9WIZ97oZlbvxA-bwJ-fdv0S_C54wDUSLTdlmmhz0LObu1HeU5gurBm22oEmiJgDiwoiw/s1600/SUB-BAN.png" /></div>

<div id="links"><a href="http://twitter.com/YOUR NAME" class="twitter"  target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1m3FYdfg_znrOO3LkYvixnqeu6-WOv2DD5Mjdg_APDNFWNiEd_q-coWEl96mrqwP49KJ5YiHiEvdgOyNuIJf72M_9lJiQk4wAQIjzmaC9NCLJ9nqEnrjTI63S_2O1QuOGcdCp_qzQio/s1600/twitter.png" /></div></a>

<a href="http://www.facebook.com/YOUR NAME" class="facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUuWF7bAoXOfbPT77nliKwKlqCN27bKzigR4isUUxonz3Nx4wMwbf26kUK7J4_QQUOdqaThWPX1pOStem5IB2BmOsk8aKJ2wvzvyVbq8i1JM3kAfKQ81pLk4e2lDYwgkPTuhXs_NE4vSU/s1600/FB.png"  /></div></a>

<a href="https://plus.google.com/YOUR NAME" class="google" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQA-g767QizHopvrwAcjGUO6TxcSoMwwcWKYTca5IqiNFuUPNN3Uc110RNmOS4pjrEqcjyBHaz0fcH6USTsuzOCT8fASDpr9JEnJOaY5p1LtK2DsHY-6f8XZFlPGv460_uy59p_K88PZ4/s1600/google.png" /></div></a>

<a href="http://pinterest.com/YOUR NAME" class="pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSynbZUk-0GcxqxLNOtBKoyR_zCcCfQ6bogjg5Bq1wLHt1FN4TnA8_WwauYbu5Y3BrTeugB7u7UXdFI13Grty18zAyMSoXlDj-wC3OozMD1jNRMtMrajRFHzYitO2ZmzpQ3MDQpDnDIis/s1600/pin.png" /></div></a>

<a href="http://feeds.feedburner.com/YOUR NAME" class="rss" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG5MubDcsFeI13wBjhxPGli8SFCwkCtNP_gMOm_bXtpTeFOkokF9LCTOc8n8kkPiJN54nBSUyHm4PUG5sWyBLqsMXSBdQtBLMLLIG5KkyqHYT3DsRI-dPnNaTBaOdSLLkddsk9tyeXYA/s1600/rss.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#rb-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmD7O5O4-vcA3qJ0_d3_Dapd1ni3LbM3MTB_59ZSlslUFk2eJ2OroQuTLNhXNumtdxHt2U7Jpw6nEZnqWGCMiNwWSlS8iyi6S0Oz73c0U_apWtBlpi9K51yAXrZkmnQ3RQqBnTSQhzzBQ/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>

Customization:

• Replace https://plus.google.com/YOUR NAME with Google+ Profile URL.
• Replace http://twitter.com/YOUR NAME with Twitter Username.
• Replace http://feeds.feedburner.com/YOUR NAME with RSS Feed URL
• Replace http://pinterest.com/YOUR NAME with Pinterest Profile URL.
• Replace http://www.facebook.com/YOUR NAME with Facebook Page URL.

All Done: After customization, save the template by pressing Save button. That’s it, go ahead and check out the website to see the picture perfect results.