metro style beautiful social media subscription widget for blogger

Previously I have shared a beautiful metro style social media subscription widget for blogger. In this post I am going to share a very beautiful social media widget for blogger. Slight transition with Hover makes this widget unique, professional and beautiful. This widget has three most important social media websites subscription options including Facebook, twitter, Google plus,Linkedin, Youtube and a feedburner email subscription service. 

Demo 

How to add this widget in your blog:

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it. Now save arrangements.

HTML And CSS

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6GaimOx8UmxD5-esSaQjARNe1ZNS1F3K02OcwpknvxdA3lUaAe1d-kblRku5K37VSj15z5YggdP5c5LoZuoMp3fwFRCFsb7fzv7y0kg0UNSbQcMTFEqd6ybte45JF3nCIjwB15AQOcw/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzM5DgB7g83DBRUF-Bk98zTNLKg_um2kTr2y0-RggLtirAjfQTMHpGzyeUiwqp55AlSpyQKYjsaFd5f1bAeaaT5mAj6qnVnmoSY4Ml97Y2IrY8L7leJ3DIJFRf-NL9z-sDGWPmu-ojzAw/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPt3V1Xd6_OWmTZU1ya8htXDmFulx6TMR8UqUA5jrS0kWhgK5zYc8m4qG2QzmN0jCXgirDoGJFYl-8vmaPaX4vsPzdhGpk1ZYmHh2V3tXIH4_ov3hUw9nacbgsX0pvLp7xvpPfRp9mNOo/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUkLH100bfaZrkkmyJmfTx2lxgAq1FplE53wYSyCnYr8BSkJEcXlEXlE0HCkv008X3y5dSlseyQVcD4_2ewInt4bLNUuEc23QjrOShPMceSR8lX56HLepR_gTbq9_doJ7FPm6u8LBiYXo/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC99WXuW1Jh_UHc7fIWEGkVdbaf8Eh0mossx3ovwcGVj0FZJrnxbwNESjb3GLFq1slyt3lXHqtRu-elYai7MWoW16DWJuYeO8feqN-9JNCSzedAfKOFJ8QlkhKUCwmp5OWxZz65YAmkzQ/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAxf4wGrSDmViDGIxPR3xD_oOmEAtw9-ozggqAJjsy0T_T2HuStQx_PQEYsRz_nggJ1WNXoKB-W7LBLljXBnLl6RStrhziA2vzTYGp1LwJtI2Jrf_mbGeJjzg_nR41kp7LKy4oCFUbdg/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQED8feERiQjJKBsNXARpNtrJEl8aNCfWxsmKj7Uy3qkxX0JNgRbilHfPNk62b8WfdMOrjHNSzfFkeklQWwazjwj2IZr_mpnxKDuGFvRmvjZOTjRgB653nbeIkgGsoQul_3tbt1EaZgXM/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmgnUiWSeZYHXjbT3wSDEgJlR1LSAY2C1quw53e9PxRSPAN0XeAs5EN4z2WLi8769QGpDKnVt9CFWMPuWX5G2_nReFGBPdSBblmNOAYtg8p0GEYbTXDqsOalHwpUPvrL87OQfz8jUGGw/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY08pgMyklsYvhsLu46W24ue_zkYSUnH-EojBXzxW5krABHrVAQvTEGT3zxioUZMEcX1xPdz7TlOgb6oHZc099BaQejcx7kTyKlfF8_cqOw9_0nKWzq5ySji8ioniA_9keGNi2AL0yxeM/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhacJpMVTt0_o_yODjOe-dnoKipeaW1adapMWUedyf8k3XVbT6DRRYVQdmMW_aH-OhNNfG5vrZITf95jWGtta1w5tulZL2D5kEudy_aQwaNjHPFW00OY62n8S-GzFpABJ1AdiMnn4Udxv8/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRYsn4KQMaEeqA39-j8vu2q-CcqftrOLTyKuchfJzjto6I1xmR1fZ4-QX6hz8SOuVssAv1pLiklHGMu67k7_sc5f6j9_mRmlLEn8T_j5PhFdiSEOS3n8PRyureebMbX4TulP9WFYDZrw/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0fxmgC359GWMQfiu1UHCoZb4QTKstXWN-ErUm0-gJ_9HnXAvhyOAvik_zBM39_tnRSQd4gG9W_lvJ2XW6nodI8eidKfwpx3HhlSsc04mCxUtnCXcI-s06sCXH0p4M54WG6cQ9oWj8P8/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8BNCg_ausujzh_9bOwzsuBDe-Ua94e-Lc92yd54UGpgD3Wyf4BpJcNQqWW2HdAvuIEi3v7gEUl3GpbmhPH7eFu1-IXMBcSZsNJkhZJSIF8jXWedqYkt_Foe_i7rdaEWn0slDrBhUZids/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9chSSP9ed9Rg3pgCIDtAg3P48AWNdiG3U9BOhnkrtEF6gdySveuvQGMT400hzWS4Umn0VBQLEtADsJcC2a7XW1iyTD2JFQHl8vegjRbbfSgnEZOl3qOr0m_RQUaNfX5xis-_IvXEMkg/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/bloggingqbee"></a></li>
<li><a class="twitterbt" href="http://twitter.com/bloggingqbee"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/110989633346810310335"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/bloggingqbee"></a></li>
<li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/username"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/bloggingqbee"></a></li>
</div>

Customization Of this widget
You just need to replace # with your own social profiles links and you are done…..!
Enjoy