Metro style social subscription widget for blogger

Well, do you want to make your visitors of your friend? .It’s cool and a fresh choice, you can make so. It’s easy just show social profiles on your blog in a more beautiful way that encourage your site/blogvistors to subscribe in your social profiles. Today I am going to share with you a great cool, responsive and metro style social subscription widget/plugin that you can add in your blog/website. This plugin has the most famous social websites including facebook, Twitter, Google plus, LinkedIn and email subscription options. You can add this widget easily in your website, because it is coded with CSS and HTML. You can add this plugin in Blogger, Wordpress, Typed and other CMS platforms that allow you to make changes in your HTML and CSS. So, if you want to increase your website traffic and want to have more subscribers then you should have at least on social subscription widget in your blog that looks cool and leave great impression on visitors. 

Live Demo 

HTML and CSS for this beautiful social widget

You can add this widget in your template by adding the below css and HTML either in your side bar or any other place in your template.

CSS:

.BB-Social-metro { 
    width: 960px; 
    float: left; 
    margin: 0; 
    padding: 1em 0; 
}
.BB-Social-metro ul { 
    margin: 0; 
    padding: 0; 
}
.BB-Social-metro ul li { 
    list-style: none; 
    list-style-type: none; 
    padding: 0; 
    text-transform: none; 
    margin: 0; 
    float: left; 
    display: inline-block; 
    width: 20%; 
}
.BB-Social-metro ul li a { 
    font-size: 80%; 
    color: #fff!important; 
    display: block; 
}
.BB-Social-metro ul li a:hover { 
    color: #000!important; 
    background-color:rgb(248, 165, 16); 
    text-decoration: none; 
}
idc-scoail ul li a, ul li a:hover { 
    -moz-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
}
.BB-Social-metro ul li .rss { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBV_sVYph3ShaKSxMEjseEMfiUBIdY8Mq7ckolEx8bh_D9KZu3MjzqBsrPhAB1e5zJkxOvQxWfxLpSchezyV7_TGcZiPV0_0qIxgdRAP-g8hpLzPAwEDtUS5Jf9Xz2ZWY4rCuTKWsgtVbl/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.BB-Social-metro ul li .twitter { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCmMHOcSRZeRJ5u-DCGvucFL-NhTtACIA99HVJBO-n-K9oG4BK6PyTK7ERg82SzMp4OrIcHOhJXwVFsghnBsEFGbWJD1t6ZzR5Qvth6Vox9b0Eqh2Qiov535bbIVqyl2PCSJbsTr6Dm1vj/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.BB-Social-metro ul li .facebook { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DQq_3cFSPErsLCCSkKDXNBj8SxBcG6oev5K3bK1ysMZfRtNRnxkNSeEW8a9tQHHm4NEpGXdCKX-2T7k1kusiG4IvNwbNEUGPIStQIpqjj8xibPv8A6EGLAOajs59AzAdt2SguZdp66ZV/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.BB-Social-metro ul li .google { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieASq7yvMms4LhO4sxAq_ITMPyMITrmUx-2GDyb4hn8Xj7NMsogOc_oV1aib0Dfp9VZunCnQSSSCPtyiaSdTbSVAQOfus2D4vezYpg06HdyStMQ-Iwce2McRdvbPNUWOZMuQfc9SfwrvvV/s1600/google.png") no-repeat scroll 10px center #D44937; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.BB-Social-metro ul li .linkedin { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0PE7S46wLOaxafJ9AeyBZKA8tR7A_4OAlajax4ddJl2vSHgGMXNwbSlvECUml3FAs9dAXexswn971g3qo1V3mA93jqaP1ON0RC-WNwMgy84YYB2fJ4RGTfd9JQgd9ad__Nc_mHVRyhbm/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; 
    background-size: 20px; 
    padding: 10px 50px; 
}
/* width of 768px */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    .BB-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 480px */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .BB-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 320px */ 
@media only screen and (max-width: 480px) { 
    .BB-Social-metro ul li { 
        width: 100%; 
    }; 
}

HTML:

<div class='BB-Social-metro'> 
<ul> 
<li><a class='rss' href='http://feeds.feedburner.com/#'>Subscribe our Feed</a></li> 
<li><a class='twitter' href='https://twitter.com/#'>Follow me on Twitter</a></li> 
<li><a class='facebook' href='https://www.facebook.com/#'>Find me on Facebook</a></li> 
<li><a class='google' href='https://plus.google.com/#'>Join me on Google+</a></li> 
<li><a class='linkedin' href='http://in.linkedin.com/in/#'>Connect with LinkedIn</a></li> 
</ul> 
</div>

Changes that you should make:

Just replace # with your links and enjoy!