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

• Share on Twitter
• Share on Facebook
• Share on StumbleUpon
• Share on Delicious
• Share on Digg
• Share This!

 

 

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

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.

Share This Post

---

---

Do you Like this Article?

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.