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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4Ghdy6vI3CQipsUmbfzq3VXbG-hP_xrfW44uBrcPjIyjAVwzADmHKhEppQce_ABRo7PQuuC5KPufG0uKDdCVbXuJE6M47qFUgt4R5ZywjUE7CY7jE4vK1vmrxDm59Bf1sfTrkI0QOpvO/s1600/facebook_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Mafacebook:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGkYeLmGU7PQScBrcEcOHMTcnK-Zsuo9n9BDUh3saf8dbYfcDp-sFtXMFPZkTOgwOSuf2UNPkg-618NmxfNgx6UA8KesKQay-jzJ61e1jWLjNKeFpWFzcUxR83nmoVa7XDLlTYFL-qMfYM/s1600/facebook_active.png')
}
.Matwitter
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRC1aB93M_HqJvmPlK9fUaK4-A8zluScj15T7MunnMLq8BpZEKPj_ikIxt3HtZdydFDxKjpv62HDCCyhYwnkQki2Fxv5u_7JbaAbYL1qc5P1I9BX_iFc_DqbfScGfHqdEnxToMeObyQZF/s1600/twitter02_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Matwitter:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmXKbJzsWmH9JtIu3uNLpvy59obKEYU4njjDR_ZJ1i79rmYxHOoWDpG92YLJMxtVivNBGHCo3ZntJtGHunvr_FJSlUO2Gbad6JmSRao0GEy1MgQ2P9RfG9NfVFPtRTGIk7ODhD4z2Y97Z/s1600/twitter02_active.png')
}
.Mapinterest
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-rqzHqVZTkWsUNoq8ktFca92st7WpvMwLcfC6TwJbfDlgn0sOf6wKAEwD14ija7Ms7A_x2TL-pMtYo0AKcgzXMogodibqi4Iaweb-YPVNWpmy5Ep5Iymk1MlqKndzRzMUbjfnTIKKLG4/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichJAibFP8V438sLm0e4nbUNLLIsBo1px1yOR2gdZ98D6A6WBCOr9iuSPBRp4f63vOqlO-GzFq_ljw0t-AcMdXd5LXWbbRLhnszfB8PpBVbpO_MzddzHSA5CJu8Zg6kU_QQdSOg-s_HQSU/s1600/delicius_active.png')
}
.Madigg
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-r5R831iYGIvgrUPQOqsI6mon5WzVsetHloN3DPmEKdXsnhhG4L5exOREY-m2dA4wFmT5FnB6Tjxp9WwFKiNbbMHfpUIrAk09cfvH3roTZLW59lNopJ8uX87vaMwbN9fpDAamKXKzjEYC/s1600/digg_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Madigg:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekIGnuM0OPRP9KKb1ygs9mEc0gL1jZA2CkBR0DVzw1_-9AsFnRoeGMiAQwkZoAcfr_OeHKC-UXPqb5VKDcYfFvKSIh7HK-ygeB0U5mLCSiQCpzn3nkOE-QhEMHcCZuC1iD1zX5x21Bmy-/s1600/digg_active.png')
}
.Madribble
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnMeHPutF44-e2Y5-Z5Aff6KeiY32m33FqPzMfPy10-Foj9gdIAdj7CkmRg9x6fpdVuz0FsRLxTVBowrUOo340Zcbt7gUAVrU1AWGCFoE3SLCaCjkRADRZJ-mlt6Hl4bdWjuC-Qe8a2A0/s1600/dribbble_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Madribble:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmWlbyNWJzdwVpRgjJnoBmIGenykWT0sELLMqS6352uamfgxskSTUeEULhNLZCQwMdppgCJsYtrjWgvUqA60Sap3v00dCSfbco8g_3zC1DdMOyKPTM9u0rgGGF_qTTYaRe9mVMAxEN0kU/s1600/dribbble_active.png')
}
.Malinkedin
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQN3QtZg2fm6YrbIPLqjl9BCCeKtMiQ5AdcKQA8GycGEvzMXEqs3SdMNWgD2jSWIJlNvoHaQA568mQrOJ3J7fWJqKmvrfSafgWGtaLIHEVola7f1gXJW3bCZpJVZ90Z8k1t2Bb2OmqhYGt/s1600/in_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Malinkedin:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyZSVMQZa-lyF-acFhBZILzSZFx1EV4hkDX3AYVYI4lEQqHmvZ1ToXQQR83ZU_vK9luUBZM233ZDzrB7bX_FS6Artz1YRgbqnbyoAjsveJyAqg_GCSNTczdYGBDiaF0_X8kArBYLk6uSW/s1600/in_active.png')
}
.Mareddit
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-LtApdHyD9gWV3Z5m9iW4X6vngVzf7EL8MElI_BPG0meI6gtyTBdlQ30miP3dGf_faxOo3HIeW-JCqeMprXTRHO4wDucwwfHQ3nPFSRSATnXJcAlPtmKNd6Wb2V5s0kFwu_BCzW-vFo9/s1600/reddit_dark');
height: 65px;
width: 65px;
display: block;
}
.Mareddit:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpAs3t2kGWytnZS2DIWISxhItRZvAb_cCDypmvdDs8CkpNE_tJjkFqOFXUbrM83TEz2dEhDxvUftFJiaJXLEeV2xJkvSXop-LwCZRnUAXvKlgtPOZIzI_jd6WBakBDm8I-qnSpauXcDWT/s1600/reddit_active.png')
}
.Mastumbleupon
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5_FnTdqeaxQ9VAq4XjXXg1pnARWEtbb7sLVr9tUPsLp7VUZqi3eCA0jDEpoJ9iSGYyHHxn2V1yFjF_LoYRRnhK_MB-Q6PWSh_wCYkcCjujBvGtCCn0nkpdZ5TZhYAZpukPWx5BfirFxl/s1600/stumbleupon_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Mastumbleupon:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nAtWaMpgE8UhRe-pmMnYpLjQy3E6-FXW6Yf4yH_SmQ3Qwe2YNvdnfSyBPWsbb7N6jcXrmwmrrhiMd-CCdxbvo2cPkXtPZWUg01lwYJuKjEF7eKQQHvYKKESuLO4EYeMyzoe5jWdFbs4A/s1600/stumbleupon_active.png')
}
.Matechnorati
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3niNU9B6cnpFLSQv7ePbUdGDkJGjUuuCELY3brJcSUqzdPZAmFEqElKfcISmu1FpcAywDYyxsTh9Z28-SeP9TT29CBbN9hB-jSIf02PcDTFp5XypUAi2PAJy2PP9BXXTIwKK_OdKq__n1/s1600/technorati_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Matechnorati:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioePHGMe3yprdAQlZ8mT9-716EyWoHjzCQVJwyfotipqOdtrzzwDV3rI_t9Vu4VBoqiE7rdaIUpXnslBzwVfJC5-DwI0wevUuLferysN1BbmdhP2eGAfpxM7yIJ93pRzHPcpouuE45LlNV/s1600/technorati_active.png')
}
.Matumblr
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2FUDRqa7Ir2vyJ7rNcoXpY-teEshxZJl8mgw11Z4-qH2H475dLZ8Ph6IFSRqVKufK6iBFwOYq5iQQhllZbf3PxOfMVhirO3zTm8IzSmd0DQxA6ImMOXDSgVzDBPURewcfoSx57pkY0Ng/s1600/tumbrl_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Matumblr:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhpBz-CjgugzrzDhIMauo181ru3Crif58q1ha6ZMUpKUQqWn5SIVTHV_5Ev2cXMI_XZs49uDxgrVHfs7XYArROZ9NfNRBTRe5u6JC0DGohzAgrCRM5WchN3umzVNGYXzGmv1tSbnRUvZG/s1600/tumbrl_active.png')
}
.Mayoutube
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeDvsNTVZK78Thwq0oLhKs-C6P7w8RLVRznod2eEScdy4NSR01SWUG9PouunX-Kmvw8_jUApU1jywtam2fzMb047aG0xe7Auba4rLEJvLOaHpASreZG_2zN19XK63j3cUm5Pfsm5yf6nN/s1600/youtube_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Mayoutube:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXc2cVQwWuSs7D_9RuNlGCq4cjxUX-DSyIFKmpzzsB9b3ZDgwlrCaIxQHHJkiYs8ZztC_iapoKVfaEDQRZkpTx22PC5zkCmhrgdIbSKjDPEAhJZiqaUnx9lSAkhu82MPgdAmAGYvt87JYY/s1600/youtube_active.png')
}
.Marss
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtnGFvGmfEVGw9_qrPmfznQhhQ_ztG0bERbeph5Us6SR-DXzA4a05mh6jQrcs871KxApWrHdOw_3Pfs0lGZb3VrTCuJrTIPDckZa9-BsiafRgL8qGuYNTdur2j3IjCcWwuUKsX6yOBYDN/s1600/rss_dark.png');
height: 65px;
width: 65px;
display: block;
}
.Marss:hover
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPizzu4ZrFDzXD_zalwtyomAU8dBB9Axu4Scz4VEWXSgpjSHzBENNt-kM5tmYsF6bMmne-BtDKeEG_-fR43UOAvMMfzDqvOMd1QwEea_CpCnPLjAvz03QP9kA8hqsGq3lVp3u-Jm01ma0D/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.
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.
Assalamualaikum! My name is Muhammad Aseel, I started this blog to provide you the best tutorials of blogger and give you suitable templates, widgets etc. My nationality is Pakistan and I am living in Karachi. 
No comments:
Post a Comment