Add Rollover Social Media Icons Widget in Blogger

The Social Media icons widget allows users to put their their social media website profile URL's. Encourage your visitors to join your social media network by adding social media profile widget in your blogger blog.
For Now I am going to show you how to add Rollover CSS effected Social Media Icons Widget in your blogger blog.

If you are wondering how to add Social media icons widget in your blogger blog?. Then this tutorial post will help you adding social icon widget.

Live Preview:

 

Adding Rollover Social Media Icons Widget:

1. Go to Blogger Dashboard 
2. Click The Drop Down For Your Blog > Choose Layout 
3. Click Add A Gadget > Choose HTML/JavaScript  
4. Copy the below CSS and HTML/Javascript & save your widget

<style>
.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
}
.social-wrap li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -580px;
}
.social-wrap li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -711px;
}
</style>
<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>

Note: To make sure Rollover Social Media Icons Widget Work correctly. Change the highlighted links in above HTML code with your social media profiles URL's.
Thanks