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.
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.
- 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.
/* --- MyBloggerLab Social Hover Buttons Plugin For Blogger --- */ <div id="mbl-social-hover">
<div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwicZagYI7NXD5-zUuQg1wPNJkFqDhJDBsz-fiLh7SXvJzo-jqRRjmOUXN2XRAYpn8FJZB7LHFFSGMn4EY0XIrPLIF3HloGu8wEAiFQdNVd9cD-FaMtUXWkMazSGIIME9dDQ9mMEmNdNU/s1600/SUB-BAN.png" /></div>
<div id="links"><a href="http://twitter.com/mybloggerlab" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdUjec-HAT9DfM9WYyqtCZ4AX8vqi-fL6ZZ-MOS16_aB7usyrXPDfTqDMSxRPu6zD_b8fq_KgN5JeSBgy_kGYgpwWd8mpacw3y_QkzUvYFyCF_UkPjfDUlRUcqNn_PIFiUubz5-8BXgUE/s1600/twitter.png" /></div></a>
<a href="http://www.facebook.com/mybloggerlab" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QgNIu2c0uDnwowKnCR7YNvvRaMmnA5fS61F_tbTdnx_KHW_GYRK5XG-T9k54Qrb1NBxIkhfmkb5GpPPB4g_eAHvC6adS6diguy0AZ9Sh28Xh2mlREd94aXTa39CZ34Ky9g2OmsPNASM/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/106374439082237286396" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQD2vItuvDJRLl9Yg7pNaTZ2x0Jgh3tJmwaTpp0a0iDexe6yWsPAn8_FqBU324hqPggRI6xJ6vmttBKRYhdso9574zrGXP5j1p6taxR7ACFQe0sR9_A55OclKh0rr8na4sjn9rNYLp1K0/s1600/google.png" /></div></a>
<a href="http://pinterest.com/fosterzone/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-PJ-TbhIXYAEmhKeh5A9v9HbnvShmV1aGopEjzXg6Eamcp43HM-6nvn6kw0QT8q9vID9_tooHPpyu8kB61gLriBtNr4kNVdErywViDROdw9itoT3Z_G1xrHHV2H1pmboeAHzXXUFE5A/s1600/pin.png" /></div></a>
<a href="http://feeds.feedburner.com/mybloggerlab" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGA5ciFy9XeVxVE88lg-fcSGLw7HRGNdSHAJ_ecGZ6f9jjHWd7biUNcJ9IRI76y4J02JrahZz-myP7T5YKxWczMnRCc3WxB0dWeyEGAUesU9JOJqpWq7YwOLFBUsfXXndkowPxMrUhBd0/s1600/rss.png" /></div></a>
</div></div>
<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgorSDCSMPJNTYJqkbkMn5VqSLW2D5QDw91T33hUp8XomoarP1JXNWzpAHUj0ZjRRvNlQJpPmqJLHH1emab21XqKdBWoDgoVr2O6pUu5EzKpz_zgdkpU2VsIplNiIuJ15huVOTZL7eXzXw/s1600/vintage.png");}#mbl-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);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-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;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-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/u/0/106374439082237286396 with Google+ Profile URL.
- Replace http://twitter.com/mybloggerlab with Twitter Username.
- Replace http://feeds.feedburner.com/mybloggerlab with RSS Feed URL
- Replace http://pinterest.com/fosterzone with Pinterest Profile URL.
- Replace http://www.facebook.com/mybloggerlab 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.
From The Editor’s Desk:
Hope you guys have enjoyed today’s widget. We are extremely thankful to our readers who are continuously following MBL. Alhamdulillah (الØمد لله), MBL is consistently breaking all the records, and this would not be possible without our reader’s support. What are your thoughts about this Social Buttons with Hover Widget? Take a lot care of yourself till then, Peace, Blessing and happy socializing.
How To Add Social Buttons With Hover Effects In Blogger
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!