Friday, 28 June 2013

Add hover effect social media icons widget to blogger

Social Media Icons
Today's topic is that how to add hover effect social media icons to blogger. Yesterday I shared an article about how to make a CSS button. I also shared many articles about social media buttons that you like most. You can also see in this picture when I hover my mouse to that black icons it will change their colors. To see the demo of this hover effect social media icons click to the demo button.

Hope you like this hover effect social media icons and to add this hover effect social media icons just follow below steps.

Add hover effect social media icons to blogger

  • Go to blogger.com.
  • Sign in to your account.
  • Go to template >> edit template.
  • And paste the below code just above ]]></b:skin> tag.
.Mafacebook
{
     background: url('http://1.bp.blogspot.com/-vH4yNsa87Z8/UbB43cxpBkI/AAAAAAAAAJM/N0MtN8LSefQ/s1600/facebook_dark.png');

     height: 65px;
     width: 65px;
     display: block;
    
}

.Mafacebook:hover
{
    background: url('http://4.bp.blogspot.com/-1spz5dwPI00/UbB4RWYkFKI/AAAAAAAAAIc/7ZXEEacfwtE/s1600/facebook_active.png')
   
}

.Matwitter
{
     background: url('http://1.bp.blogspot.com/-VFqioZgKw6c/UbB49Kh3e6I/AAAAAAAAALU/CP48rvIocmQ/s1600/twitter02_dark.png');

     height: 65px;
     width: 65px;
     display: block;
    
}

.Matwitter:hover
{
    background: url('http://1.bp.blogspot.com/-cfq4bQc6zdQ/UbB49CAP-xI/AAAAAAAAALQ/t1zPnW5cbD0/s1600/twitter02_active.png')

}
.Mapinterest
{
background: url('http://2.bp.blogspot.com/-hZ2rJZuTszg/UIZ6sy5Ka_I/AAAAAAAAAGk/mqfxX9UGD_g/s105/pinterest_icon.png');

    

     height: 65px;
     width: 65px;
     display: block;
}

.Mapinterest:hover
{
    background: url('https://addons.cdn.mozilla.net/img/uploads/addon_icons/428/428922-64.png?modified=1365933367')

}

.Madelicious
{
     background: url('http://www.horizonsend.com/img/icons/delicious-dark.png');

     height: 65px;
     width: 65px;
     display: block;
    
}

.Madelicious:hover
{
    background: url('http://3.bp.blogspot.com/-cQStO7DB5iI/UbB41z-6wTI/AAAAAAAAAIw/-zfpN2e-jPM/s1600/delicius_active.png')

}

.Madigg
{
     background: url('http://1.bp.blogspot.com/-MbUmRxi3SyY/UbB42S_zSpI/AAAAAAAAAI0/MvuMHho7M90/s1600/digg_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Madigg:hover
{
    background: url('http://3.bp.blogspot.com/-C52bRdY4nr8/UbB416iKPRI/AAAAAAAAAIs/YwudOf56k3I/s1600/digg_active.png')

}

.Madribble
{
     background: url('http://2.bp.blogspot.com/-QQ9BTcGDtRQ/UbB4UG84-wI/AAAAAAAAAIk/dC6-j1BQESI/s1600/dribbble_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Madribble:hover
{
    background: url('http://4.bp.blogspot.com/-GjRqJpV9n5E/UbB43djMKmI/AAAAAAAAAJA/aPz7vn3oEXI/s1600/dribbble_active.png')

}


.Malinkedin
{
     background: url('http://4.bp.blogspot.com/-XAfd_DwXUt4/UbB44j0LRFI/AAAAAAAAAJc/BWOiptHWaO8/s1600/in_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Malinkedin:hover
{
    background: url('http://2.bp.blogspot.com/-t_apOvNq9II/UbB44nFkfmI/AAAAAAAAAJg/iW8lJwIbLGY/s1600/in_active.png')

}


.Mareddit
{
     background: url('http://1.bp.blogspot.com/-fSidN4K953g/UbB46GWyx7I/AAAAAAAAAKI/a14RZJthYJ8/s1600/reddit_dark');

     height: 65px;
     width: 65px;
     display: block;
}

.Mareddit:hover
{
    background: url('http://4.bp.blogspot.com/-Uq4ZAGM2HhI/UbB45tremeI/AAAAAAAAAJ4/7SI0z9oMKyU/s1600/reddit_active.png')

}


.Mastumbleupon
{
     background: url('http://4.bp.blogspot.com/-KLy2xcK42sY/UbB47crqSOI/AAAAAAAAAKo/Zhr1zMLmVr0/s1600/stumbleupon_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Mastumbleupon:hover
{
    background: url('http://4.bp.blogspot.com/-CpbF53vcuv4/UbB47E4rBeI/AAAAAAAAAKg/yA_vI0sPwJ4/s1600/stumbleupon_active.png')

}

.Matechnorati
{
     background: url('http://1.bp.blogspot.com/-XTP3otSB4oc/UbB48KUPxxI/AAAAAAAAAK0/TBzRHd08Cxg/s1600/technorati_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Matechnorati:hover
{
    background: url('http://2.bp.blogspot.com/-kslERQ0LXds/UbB477pws2I/AAAAAAAAAK4/zuSM_Doy_1Q/s1600/technorati_active.png')

}

.Matumblr
{
     background: url('http://4.bp.blogspot.com/-lLnyuCtcZwc/UbB49InEVNI/AAAAAAAAALM/12_f2HFP9Gc/s1600/tumbrl_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Matumblr:hover
{
    background: url('http://2.bp.blogspot.com/-t73V5mMTowE/UbB48iwHICI/AAAAAAAAAK8/FAIXyRjSzNo/s1600/tumbrl_active.png')

}

.Mayoutube
{
     background: url('http://1.bp.blogspot.com/-sURNpen7uV0/UbB4-IRZmPI/AAAAAAAAALo/dy67bo5gDoI/s1600/youtube_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Mayoutube:hover
{
    background: url('http://3.bp.blogspot.com/-qWxXgD9vhpc/UbB4-JXYEcI/AAAAAAAAALk/XEiiBfPHjcA/s1600/youtube_active.png')

}

.Marss
{
     background: url('http://4.bp.blogspot.com/-9ZFclpbO8vo/UbB46R5nj8I/AAAAAAAAAKY/xv0c5mG4OzA/s1600/rss_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Marss:hover
{
    background: url('http://3.bp.blogspot.com/-6nzzL3-d6AY/UbB46W_VRBI/AAAAAAAAAKM/MqCIapYUdds/s1600/rss_active.png')

}
  • Now click to save.
  • Now go to layout >> edit HTML >> and paste the following below code:
 <a class="Mafacebook" href="http://facebook.com/YOUR_URL"></a>


<a class="Matwitter" href="http://www.twitter.com/YOUR_URL"</a>


<a class="Magoogleplus" href="http://www.plus.google.com/YOUR_URL"</a>


<a class="Madelicious" href="http://www.delicious.com/YOUR_URL"</a>

<a class="Madigg" href="http://www.digg.com/YOUR_URL"</a>

<a class="Madribble" href="http://www.dribble.com/YOUR_URL"</a>

<a class="Malinkedin" href="http://www.linkedin.com/YOUR_URL"</a>

<a class="Mamyspace" href="http://www.myspace.com/YOUR_URL"</a>

<a class="Mareddit" href="http://www.reddit.com/YOUR_URL"</a>

<a class="Matechnorati" href="http://www.technorati.com/YOUR_URL"</a>

<a class="Mastumbleupon" href="http://www.stumbleupon.com/YOUR_URL"</a>

<a class="Matumblr" href="http://www.tumblr.com/YOUR_URL"</a>

<a class="Mapinterest" href="http://www.pinterest.com/YOUR_URL"</a>

<a class="Mayoutube" href="http://www.youtube.com/YOUR_URL"></a><a class="Marss" href="www.yourrssfeedurl.com"></a>
  • Now change all YOUR_URL with your own.
  • Click to save and  hover effect social media icons has been applied to your blog.



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.

No comments:

Post a Comment

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