Friday 28 June 2013

How to add CSS hover effect social media buttons widget to Blogger

 
CSS hover effect social media buttons

 

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ

Today I will tell you that how you can add CSS hover effect social media buttons to Blogger. You can also see in this picture that when I hover my mouse to these buttons they increase their width. This CSS hover effect social media buttons will also help you increase your social media followers. Yesterday I published an article about How to add social media buttons with hover effect to Blogger, but this CSS hover effect social media buttons widget is different. Click this live demo button to see CSS hover effect social media buttons.

Live Demo!!!



To add CSS hover effect social media buttons to Blogger you just need to follow some steps


  Add CSS hover effect social media buttons to Blogger

  • Go to blogger.com.
  • Sign in to your blog.
  • Go to template >> customize >> add CSS and paste the following code:

#Ma1
{ color: transparent; font-size: 15px; font-family: "Bold"
 -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma1:hover { color: red;
background-color: blue;}
#Ma1 img{ width: 100px; height: 50px;  }
#Ma1 img:hover{ width: 150px; }
#Ma2
{ color: transparent; font-size: 15px; font-family: "Bold"
 -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma2:hover { color: red;
background-color: #00FFFF;}
#Ma2 img{ width: 100px; height: 50px;  }
#Ma2 img:hover{ width: 150px; }
#Ma3
{ color: transparent; font-size: 15px; font-family: "Bold"
 -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma3:hover { color: blue;
background-color: #FF0000;}
#Ma3 img{ width: 100px; height: 50px;  }
#Ma3 img:hover{ width: 150px;  }
#Ma4
{ color: transparent; font-size: 15px; font-family: "Bold"
 -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma4:hover { color: red;
background-color:#00FF00;}
#Ma4 img{ width: 100px; height: 50px; }
#Ma4 img:hover{ width: 150px;  }  

  • Click apply to blog.
  • Then go to layout >> add a gadget >> HTML/Javascript and paste the following below code:

<div id="Ma1">
        <a id="Ma1" href="YOUR_FB_URL"><img src="http://www.logomyway.com/logos_new/2828/thumb/facebook_logo2.png"><p>Like Us On Facebook</p></a></div>
<div id="Ma2"><a id="Ma2" href="YOUR_Twitter_URL"><img src="http://1twp.com/1twp-img/twitter.jpg"><p>Follow Us On Twitter</p></a></div>
<div id="Ma3"><a id="Ma3" href="YOUR_pinterest_URL"><img src="http://tblc.org/wp-content/uploads/2012/03/Pinterest_Logo.png"><p>Follow Us On Pinterest</p></a></div>
<div id="Ma4"><a id="Ma4" href="YOUR_googleplus_URL"><img src="http://cdn.ninjamarketing.it/wp-content/uploads/2012/07/come_unire_due_profili_googleplus.jpg?3f3a34"><p>Follow Us On google plus</p></a></div>
   
  • Change YOUR_Fb_URL with your Facebook URL.
  • Change YOUR_Twitter_URL with your Twitter URL.
  • Change YOUR_Pinterest_URL with your Pinterest URL.
  • Change YOUR_Googleplus_URL with your Google plus URL. 
  • Click to save and CSS hover effect social media buttons has been applied to your Blog. 

Have any trouble to apply CSS hover effect social media buttons to Blogger just tell your problem via comments and I will soon give your problem solution as soon as possible.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

1 comments:

  1. I am so happy that this has been helpful insight. Thank you so much for sharing this tutorial! It's just a treasure trove of fantastic information!
    website design

    ReplyDelete

Subscribe this blog and get daily this blog articles to your email.

Subscribe us