Social Buttons With Hover Effects In Blogger

As we all are well aware of the fact that, Google is playing foremost role is killing all the traffic of a website by rolling out back to back algorithm updates. Due to which, almost 50 percent of bloggers are trying to utilize social networking websites to boost their traffic. For that reason recently, we released Floating Social Media tab widget which proved to be the greatest hit of all time. Since, it’s the Thanks Giving weekend, so we 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 we will be sharing How to Add Social Buttons with Hover Effects in Blogger.

Live Demo

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 we 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 our 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.

<! --- rnhckr Social Hover Buttons Plugin For Blogger --- > <div id="rnhckr-social-hover"> <div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0nnA5uAMC61R6dVvxGJJRqHhGkXaS14dS1UzMsgXuC1hBqN0Re4INb38-2Vc_CiLcs3R60y-utSezHvD5xkz2ZER0VzevYSYV08sYjbQxc8aeHvw7uxQ7UTUmhDyDjNspK-G5ToAkuec/s1600/SUB-BAN.png" /></div> <div id="links"><a href="http://twitter.com/rnhckr" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpqmzHfsmoz_XFBzRMrl8gwwtqmLiTvs0tiu5m7p4PPg3Pn1sK9ssTJKmFMR1SuZvYTr4vi3zV6VPxB-g7jlmKyRhwjOh7o_Wj-feIa_CXx8GXNvmAJYsZtRvJcZxfMmo2H21nVABKFRc/s1600/twitter.png" /></div></a> <a href="http://www.facebook.com/RNHckrDotCom" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuLyqit-LjoAapXGVcX0WmulsxJUUxOI6CydBNZIbrC_vQ_lDgHpykN48RLEZMGCEAP0pQ1fWQTSZKqaWV-pUmKkHLafuuVmt5SL0YcMMGVob4F6fAyFRQZTRDy_WarBVcj-4TSRtPoU/s1600/FB.png" /></div></a> <a href="https://plus.google.com/106634460422390492028" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknfr2pQegYY-U8KIB4i6Qj82mbqQFCTIVYJQ3Vw40RCiWtVx-BCXXytmtMD1BUHRIj7XsNy34jTsSp_4FC3a3BLxNTvdlfniUlsJ7YXeI1yHk7Y2KIjSrOyn89z-TIYoSO__iZ9bm8tY/s1600/google.png" /></div></a> <a href="http://pinterest.com/rnhckr" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-uiWPnZJvJfKqOBXrfsU2vXpqR0B1y4XF69dVq2vFqaqXVG38Mv8jtmVhto74Sze1ASZVvMjxEFrb_tJoZeIHbJGicph8gtW-ARg8NrW8qF8XBlxiEtjjIlxIl-jzJJu8WUjz6seVr8/s1600/pin.png" /></div></a> <a href="http://feeds.feedburner.com/rnhckr" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdbE1aMCjhYLYj5Tmvs_ihslwEaD2KzIZRWUoSqXgdB9ONnqEZGEVze54-UwynvPBdaRaNGrHIK7W3z-mIHpXYY-YKWY4ikB6VCxa6ejHGvM6NL2EyE2jhqqHOC5WtGEtiVp8O0F3yXk/s1600/rss.png" /></div></a> </div></div> <style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#rnhckr-social-hover{position:relative;width:240px;height:400px;background:#554e4c urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-_bBKPqI4nsic7IXqGhxMDyEo6zfAhK7S0s9JjN2KOg4Y-OXk0VhBXzfBLDhB9tL9lpwn1N6og6nUX62Sv5flT7RxF8vFN6qFIYTZaEToFwBw1dH3Mt7CIT8JSPXhB8Mnr9gMcmr2LI/s1600/vintage.png");}#rnhckr-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 rgbaundefined0,0,0,0.3);}#rnhckr-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#rnhckr-social-hover #links{position:absolute;bottom:0;width:100%;}#rnhckr-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgbaundefined0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgbaundefined0,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;}#rnhckr-social-hover a:hover{background:rgbaundefined0,0,0,0.15);text-decoration:none;}#rnhckr-social-hover a.twitter:hover{background:#79dbff;}#rnhckr-social-hover a.facebook:hover{background:#6e9bee;}#rnhckr-social-hover a.google:hover{background:#00be00;}#rnhckr-social-hover a.pinterest:hover{background:#cb2027;}#rnhckr-social-hover a.rss:hover{background:#ffae42;}#rnhckr-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:rgbaundefined0,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:rgbaundefined0,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:rgbaundefined0,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/106634460422390492028with Google+ Page URL.
• Replace http://twitter.com/rnhckr with Twitter Username.
• Replace http://feeds.feedburner.com/rnhckr with RSS Feed URL
• Replace http://pinterest.com/rnhckr with Pinterest Profile URL.
• Replace http://www.facebook.com/rnhckrdotcom 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.