New Cool Social Icons With Hover Effect Widget V2

See also

Live Demo

Credits

This Cool Social Icons With Hover Effect Widget V2 is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.

Add Cool Social Icons With Hover Effect v2 Widget To Blogger

Adding CSS Code

1. Go To Blogger > Layout > Edit HTML
2. Search For ]]></b:skin>
3. And paste the code below just above ]]></b:skin>

/* Social Widget by AllBloggingTips*/

#subscribe2 {
background:#f3f3f3;
border: 1px solid #ECEDE8;
font-size: 90%;
margin: 0 0 15px 0;
padding: 7px 5px 3px 5px;
width: 288px;
}
.subscribe-icons2 {
margin: 0 auto;
width: 286px;     background: #f7f7f7;
}
.subscribe-icons2 li {     -moz-border-radius:6px;
display: inline;
float: left;
font-size: 11px;
margin: 0 2px 10px 2px;
width: 52px;
text-align: center;
}
.subscribe-icons2 a {
color: #444 !important;
display: block;
padding: 56px 0 2px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.subscribe-icons2 a:hover {     -moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
color: #369 !important;
text-decoration: none;
}
.subscribe-icons2 .subscribe-youtube a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_googleplus.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-twitter a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_twittert.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-facebook a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_facebook.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-rss a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_rss.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-email a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuyQPe3E61ywJ8XKEAehSkEC7qG2lrf22Cq3z2FRB3NEzAB6wS62-JJ63Ie2sJBuOceHANPcxh1x7KYvpRYqf-nXjL5jSQUwpt_wxqI_3OIbR6Rzp-A5x8eaT0_H0pIV582FxDY73BxE/s320/gmail-email+21.png) center top no-repeat;
}

Adding social icons with hover in sidebar

1. Go To Blogger > Design
2. Click choose a gadget
3. Select HTML/javascript widget
4. Paste the following code inside it

<div class='subscribe2'>

        <ul>
            <li><a target="_blank" rel="nofollow" href="https://plus.google.com/103280517588083500359">Google+</a></li>
            <li><a target="_blank" rel="nofollow" href="http://twitter.com/allbloggingtips">Twitter</a></li>
            <li><a target="_blank" rel="nofollow" href="http://www.facebook.com/allbloggingtips">Facebook</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/latestbloggingtips4u">RSS</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u&amp;loc=en_US"> Email</a></li>

        </ul> <!--end .subscribe-icons-->

        <div/>

    </div>

Make Following Changes

• Replace AllBloggingTips with your Twitter, Youtube, facebook, Feed and Email username.
• Replace https://plus.google.com/103280517588083500359/ with your google+ ID
  

Add Cool Social Icons With Hover Effect v2 Widget To WordPress

1. Goto WordPress Dashboard > Appearance > Editor and Select Style.css from right side .
2. Copy And Paste The Below Code Into The CSS file:

/* Social Widget by AllBloggingTips*/
#subscribe2 {
background:#f3f3f3;
border: 1px solid #ECEDE8;
font-size: 90%;
margin: 0 0 15px 0;
padding: 7px 5px 3px 5px;
width: 288px;
}
.subscribe-icons2 {
margin: 0 auto;
width: 286px; background: #f7f7f7;
}
.subscribe-icons2 li { -moz-border-radius:6px;
display: inline;
float: left;
font-size: 11px;
margin: 0 2px 10px 2px;
width: 52px;
text-align: center;
}
.subscribe-icons2 a {
color: #444 !important;
display: block;
padding: 56px 0 2px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
.subscribe-icons2 a:hover { -moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
color: #369 !important;
text-decoration: none;
}
.subscribe-icons2 .subscribe-youtube a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_googleplus.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-twitter a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_twittert.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-facebook a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_facebook.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-rss a {
background: url(http://karrersimpson.com/obituaries/tomchuk-helen-1575/icon64_rss.png) center top no-repeat;
}
.subscribe-icons2 .subscribe-email a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuyQPe3E61ywJ8XKEAehSkEC7qG2lrf22Cq3z2FRB3NEzAB6wS62-JJ63Ie2sJBuOceHANPcxh1x7KYvpRYqf-nXjL5jSQUwpt_wxqI_3OIbR6Rzp-A5x8eaT0_H0pIV582FxDY73BxE/s320/gmail-email+21.png) center top no-repeat;
}

Adding social icons with hover in sidebar

1.  Goto WordPress Dashboard > Appearance > Widget
2. Click choose a Text widget
3. Paste the following code inside it

<div class='subscribe2'>

        <ul>
            <li><a target="_blank" rel="nofollow" href="https://plus.google.com/103280517588083500359">Google+</a></li>
            <li><a target="_blank" rel="nofollow" href="http://twitter.com/allbloggingtips">Twitter</a></li>
            <li><a target="_blank" rel="nofollow" href="http://www.facebook.com/allbloggingtips">Facebook</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/latestbloggingtips4u">RSS</a></li>
            <li><a target="_blank" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u&amp;loc=en_US"> Email</a></li>

        </ul> <!--end .subscribe-icons-->

        <div/>

    </div>

Make Following Changes

• Replace AllBloggingTips with your Twitter, Youtube, facebook, Feed and Email username.
• Replace https://plus.google.com/103280517588083500359/ with your google+ ID

That’s All IF you face any problem adding New Cool Social Icons With Hover Effect Widget V2 in WordPress and Blogger feel free to ask.