Metro Style Social Media Widget For blogger

In  this tutorial  im  gonna  explain  how  to add  Metro
Style   social   media  widget   for  blogger.   By  using
this widget  you  can  link  your   social  media  profile
Facebook,   Twitter   Youtube  Rss    and   linkedin IDs

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste  below code.

<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/AVvXsEidjr8ZZMP4dD8VBei3H0rDnpK8WntTDaSI-26QS_HtsISyyg8G-96O8uXfK837GxM2aKQ3NvKJ55JTw2dxXbL6NA_bmZyWNSmB_DDujUtvlAab-XzDLiozIDMdG1WtwXXddcHjMwb-kww/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/AVvXsEikLXr3oI52t10DZE0BTVrEoZn2r8AVCOIRg1lOAVFbpuk70Q8DaZgANBu-KLXgvHO0AoRAGYciGMLlR5Fl9e9lugbwKtXs_nmxmooZJG-2AoxNlGj9djAmeUYy6W0-WIzgWOVM4HXhfC0/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/AVvXsEiYn8Go00G6OwGSK17nYs7agtzK6LACn8GM1qi0TdNGKNkazvGMy1dgMqBqk20isyKSGW_Tsbb-v9HyUKD4Ixbokqh37A34Ogr47CNieHjOwivuf612cS-B5AG6_uN0eHJYNSD9QfNtrbw/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/AVvXsEipguw4QA4YRd2LAa_0_A1s-su0wb2412euDlzaxPqlZxhKZGg036RL7qW7aV8EaJufZ7LkvLC2B5SW6GLEYBY_Ci4nVo90ot3S9kSPrhlmYkTSXQLRqFfxGP882mD8WQdMq0kXB0YGMm8/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/AVvXsEiBquuFl5zAxptUCmWQwFKfDSG4Z4xy8VmyKbBUy5qSiHVPPqyIwx0AMXfzxUv-Y7BWB2jo4chBGfwovUeok9xYABPQQzVMBsSeWtDvQz8X7UjTjBkRPwEieSj5JCmFKBMJSwII96Ju28w/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/AVvXsEi6Um-7wsAIcxYuohxpYGCV-UeJG9ae01Us-6fZ31eND1i4xULCvlTxYWrthocS93IFhyphenhyphenr1zP4yujP5G5lB20E9wpOAsvOy87yILYj8vxpgwKfTiKHIG1rtX9nwxCqH-IFnAiZ6lpxoEnA/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/AVvXsEhxxOd4urzzSpCsUV5UYyj_y3ZkJgzeV8FrPCTG3WiwVEjDtIJe9j_l3a0bidO1p1WV1qGeRP_n-xHGgr_38viopBjxN99UkzH_Zdy6cKM9Cgbs6sqfy4FxKHeQi6XxRm3eZmS-7Oa7dPA/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/AVvXsEjcAnAObZz4faFOpCejFoOmnvQS4ER39GDVKllQCFs2MgQBeE4ODJnktJMqWKQVMc2kFBc0pvvVN33m9q2Na7oBqR42aS1mwSBygeHfnhpl3nIwBu50tOnNPJE1K5qWvKeAQlCsv8p4-fw/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRxdzf9xWxordRn-0DnXNWOAiGZzw4U7NEYigMdmmW7G4pNHVtLuzgLjOT3TyHPAcxIajzbxl4kYZiwx-0bLPb1eL1iTdfFeTj2iYGBFFrhGd-dXypvdxq_PPWlm3RWDVH9NeVYHrDWK4/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip5qbcoxGtZZPlWzQ6iGg3tMdMQWmWBRoMfchxPGkrrfjyH5tJzh0yZ2Z3XR_73P8DUQCnEAjU_T3-QcIqAq_yx8Y2t6L6zPD0k1qrr2uJTuz_wsuj9_rdBYOvAM_2YZ3WLPLYQgegbi8/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJU7reVndtl_estQpNjNAP2TWRwmAWmg8Shg6N_aEHXjfaYakUTnxaqODjJFPjzz9v7fNrDCesgtXBWyU7nhoLM7S5INrZBw1sqShIilAdQUP6Bw5JAGNTaAeqsEG5U3Aj3uEq3wT1GkI/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPnf7ZpSXbX_z0aVsE9HZ3U7_Es2-Z3LENPm9KSQak0Yoz5PFhyphenhyphen_PXaRFdZCMnVT9sgQ3Yhdq16Vf8dTbIBFzz7PKMkuuKg9Rb16PO6-R0VhLq1veuM5KsElZT006Z3SPScUG2BKC7Ac/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MVslnVbRBKyQLfo3D2lhdHWk0ElhXuF4hnwRrH2YEAEeNbZH-8G0ezyDSXjDnFgqzgzJajSye2Z9wHQEz0MREcqRkODS2OpkiiNuq5HlZEsYV2cH2c19NeRYZ1-ODqIGsxNo9Hmk2EU/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZ-4ClVHFub3J8PU311a8F6luusBJzK_ClZ4CDyjFcSVHejOIKafLdZ1Z5wDvicqHylpMUa6w-9oMABT72mcUcWckCEVQv3w7ObjxGS5Fjl0_3dTV3vLiPo4D1mx7KUlwuA8Q8zc7jcc/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/bloggertrix"></a></li>
<li><a class="twitterbt" href="http://twitter.com/bloggertrix"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/107955298793879607964"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/bloggertrix"></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/bloggertrix"></a></li>
</div>

Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace 107955298793879607964 With Google plus profile ID
Replace bloggertrix with your Pinterest ID
Replace Username with your LinkedIn ID
Replace bloggertrix with your Youtube ID
Replace bloggertrix with your Feedburner ID

5. Now save your HTML/Javascript'.
    You are done...