How To Add Social Buttons With Hover Effects In Blogger

Advertisements
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/AVvXsEg1LH0RC7n43TMzoHhYn9r5L2L35uw50E2C1RJ84ud7BBQd0W_C-lxngvaHY4KJRWH52NMJH-jEoni5E3oN-bgqy2AZhhTwI8RpsDsN5BVLYSbhXyFVy56yTk4gRRX769-Y9XZb1robUL8/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/AVvXsEgKFyqiO6-YkfBG1WysZSGLAgeaKRSA8svOV8AgvVjoqCgwnKobymbVWuiezxAswbILonwMa4M4BXBbUF7ubcKF5DoCEXVWj4brJIwALMwo85dD4yyOOGii0uExiHdOWornBIIvplZh6vE/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/AVvXsEgnv2tvn_34OETXsWpfeub0BbN5GHBnkDeBemHW3UrLnncX3jM1bHd2VpgDigo8lsmkLYjIpJ4-EZ6X7oKZH5V-IXEMJq5d_6_76MvOry_1Ah7WSWZtJ0b96Rm31N6iJKp4DvBOgr_U91g/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/AVvXsEgyJn7juwV297pIMegvfBMIB-2Nb3iSKAPD_xvyjvOeZ7XhEB-Ryhy9MMLNh2n5QFEl4nLMzpQeNQzrSwDdKqdAiIei774LSQL8t4P8gf8gYeKhz-9L9e_GqlyZ9P1fSSSe6Q97BSlyjDQ/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/AVvXsEgNMRomKNBOMELWsdAe2C7dspKUv0-86qS49XRMLv18gZIOM87WYvDEYBmhMbkDrF51kaaH4vsB8SVfxePjVoLUafWjk1bGNzLDSBP_QdUnkKAiynzHV_0KX3TuFiiL8cAI4XCJrGHbVKo/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/AVvXsEjWlmO0jTqnjKuObthbIQNufqEEI5LZ-25M6fMhv9iyVlSSR9MonDQDzaVBo-KbpK8eLwXkJxqnhV7D5XyyQ2Hx01J7ZkajVUzhR5OWe7I_aDG322QtTGXqr3OTsMM6qzyKup6xYpSnrxU/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/AVvXsEgcTe1oIHRJtQy999PBu6YXgtVALmkO3JcEViVGm43J4qGvMmbP9ilqbLzEcxKA2ydnwRkqcO76jgvhu4MazQA7qCAAlU8mDE_Xs-kwDr3c08cnM636gqufK8_g7MD7-QyExUULz_JVDmg/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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

13 comments

November 23, 2012 at 7:16 PM

Hi Faizan

Demo Please....

November 23, 2012 at 7:50 PM

Demo Please!

November 23, 2012 at 8:45 PM

Very nice.. Hoping lots of surprises from u in christmas!!!!!

Www.mypremiumtricks.com

November 23, 2012 at 11:00 PM

loved the hover effects
<a href="http://www.yourpcgenie.net>Your Pc Genie</a>

Anonymous
November 23, 2012 at 11:41 PM

Thank you so much.... Please add demo page as well.
PremiumStuffGuru

Editorial Team MOD
November 24, 2012 at 12:42 AM

The Demo Links Is Added.

Editorial Team MOD
November 24, 2012 at 12:42 AM

Dude, Thanks for letting us know. We have Added the Demo. Peace

Editorial Team MOD
November 24, 2012 at 12:43 AM

Thanks @jasmine Fo leaving your Precious Reviews. We have Added the DEMO. Peace

November 26, 2012 at 6:51 PM

Hi is it possible to make them links horizontal, rather than stack vertically? I'd like to place them on the bottom of my page?
thanks in advance

November 29, 2012 at 10:04 AM

Really Awesome widget Bro !! I have added this widget in the lower section widgets. :P

Tricks Master

December 3, 2012 at 4:03 AM

very useful. i am going to try it.

July 2, 2013 at 4:00 AM

Hey
its awesome
thanx

June 29, 2016 at 5:41 AM

Hi I was wondering how I added in instagram?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.