Another Stay Connected Metro Style Responsive Social Subscription Widget

ADD TO BLOGGER

Layout--->Add gadget--->html/javascript

<style> 

.Mbt-Social-metro { 

    width: 960px; 

    float: left; 

    margin: 0; 

    padding: 1em 0; 

}

.Mbt-Social-metro ul { 

    margin: 0; 

    padding: 0; 

}

.Mbt-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%; 

}

.Mbt-Social-metro ul li a { 

    font-size: 80%; 

    color: #fff!important; 

    display: block; 

}

.Mbt-Social-metro ul li a:hover { 

    color: #000!important; 

    background-color: #999; 

    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; 

}

.Mbt-Social-metro ul li .rss { 

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWR8ZDstmaLHW1Mu6xlfhjykZhwBd-MVWKBhOAXzh3uCxULxKub1xQ4CNqVuVpRl-WkibhdAvUiqhLvMsSyxXaZ4r7Fol_dh8AHvOrrGVqy_4sLjkKfQ9TgBoB6o1U-dm2mYukmFzgMGmM/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; 

    background-size: 20px; 

    padding: 10px 50px; 

}

.Mbt-Social-metro ul li .twitter { 

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2s_IJyiLz-FGzmYvaG9wuIMTTJ84ixv8f98I1DZQOoJbQKhdYVehQnq9AB5d7tzYPX8RxjBG6ahIcFdiegDhgK6phEpaVysIjGESykPPCsM62HoNjVEYglv0V9_lg_Zn0mC8iMaxyv6Kg/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; 

    background-size: 20px; 

    padding: 10px 50px; 

}

.Mbt-Social-metro ul li .facebook { 

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNujOAqYi-Z2oF58YjwQAb16zfYv1k5lxEf24jnhUXF5x3K37lpmaKeD6AJstxKgMRquDIM0PU89MXP8NC58wHvI4KHyl36kpT3RuRTuy7uZsM6GX35lYvWJhw5NVf1FuRVTRPY1acL8OX/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; 

    background-size: 20px; 

    padding: 10px 50px; 

}

.Mbt-Social-metro ul li .google { 

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCqyvAYiLJdNPZ7TRBjzBAWlEXqUN0vXNymJXvPHz4D9e88gGz8OpoixkCfAkuTCGX7qIbRAp9Re6UwJybwFyOcbhc3oQFvgtpVYAEMOPs8Rx2CJ5SbFT94sb4_LfG5MWJ5YRQ3MZA8W_/s1600/google.png") no-repeat scroll 10px center #D44937; 

    background-size: 20px; 

    padding: 10px 50px; 

}

.Mbt-Social-metro ul li .linkedin { 

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4krx1WKWC0n58Cv0kCJ3AgtD4vk2NVCdfKmbC6INivJHw75SP-4sU__AW0QG2YEkEVIZdQI7JuOAH409m0jXrzG7pE66NLfnIFSUJ0qStq1Ymsaonx3T9-s0MKoY6T3Fm1JQCCQemXHPL/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) { 

    .Mbt-Social-metro ul li { 

        width: 50%; 

    }; 

}

/* width of 480px */ 

@media only screen and (min-width: 480px) and (max-width: 767px) { 

    .Mbt-Social-metro ul li { 

        width: 50%; 

    }; 

}

/* width of 320px */ 

@media only screen and (max-width: 480px) { 

    .Mbt-Social-metro ul li { 

        width: 100%; 

    }; 

}

</style>

<div class='Mbt-Social-metro'> 

<ul> 

<li><a class='rss' href='http://feeds.feedburner.com/USERNAME_HERE'>Subscribe our Feed</a></li> 

<li><a class='twitter' href='https://twitter.com/TWITTER_USERNAME'>Follow me on Twitter</a></li> 

<li><a class='facebook' href='https://www.facebook.com/USERNEME_NAME'>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>