Metro Style Social Media Widget For Blogger

Social media widgets are recommended for bloggers to engage their visitors in their social media pages. If you have a facebook page, twitter profile, google+ page etc for your website/blog, then you can put their subscription links in a stylish way using social media widgets. In this post, I'll tell you how to add a metro style social media widget in your blog. Just follow the steps below:
1. Login to your blogger account and from the dashboard, go to LAYOUTS section.
2. Now, add a new HTML/Javascript widget and paste the following code in that:

<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/AVvXsEgBDbYb52xX_9mw-8Z3DEW_byFQR9QYgQAk8wlfDbvM8YtBe5te87W6nToHGXRi-FkI-vDPGXOnccxuOB8KXmdEsRObF40NQ28f_XC_sAd6zgg2-nlZniP2yL3IJyaWXWVM7qpKZNyEvsY/s1600/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDenWOt-og8Jb7YWgQlVakoKl5bjUy5QNzsLJ9oakUcLmABhzzLM3_BZLF0ch2Q5LAIeo7SCaYNa4KspaHco0Mcb5Cs38MyZJoWjUiACfZZwV9A5ui-yDhQzKooe-Wne_S9Oyq51GXBXc/s1600/twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mCc_hh7fKQBhRhzAtyr_18HfPjp9nzsjwX3tpvRj3d1jf5YgM7a8Vu_FsPfx4aVT57-nVybYHwlzXcCmYQ57R4y89j-2OsGVxZLM9IZbRE-JEUjbWRY6yAZk8bW-tmV75i_kLVD0Qg4/s1600/google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mEc2h0GlRbvQH-V3wyZwNcQ75KcWu3n3vMcK4MNf0ap13PvdXopNLgLlmhxKwDtTeDT0NamkpoC-weoAIcl3c1s5AWzhkvmnYf-d5Poe52yHsBbqU-gZg8RPWpcw-1Qye3dV85qxOWI/s1600/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocPQ1JbPNAl41o1dQHk3pwueflPUNwFStO_lkBzHGQzfD75jD2HUbXEgtwkB4XwR4I3QHSS6I_0SzbmYnMfxTgr6ICn5v_KSa1NOReHT3J6pb_obSkteoHiMVbmUmZcYBSYPX0iv0c_8/s1600/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5ccmVjqTP-3qwQ6s32Qq4I9-WWGaYPZM29NVDKeeejf9oLjNzzOPR_bK1ERvUeS3753zc7Sue8l56xymBMag1n3_i2XDDZZJQMy8dD5DjxzFTl94tmEfEL5JeSkytCqdyvt-VkSPYco/s1600/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG51EgLEayRTs6wVUrtZQbkcLXVLzUcD9U3jtj7Ssu-TTtmO966iX5htq-MQRDizh5YiHeLrf4BoOtvxI2Pc3dDidpz9lwz2khrnUfGJO8Xq0pt4uFE5fxx21LGnE0E_t1Ywo6qy7pgrE/s1600/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/AVvXsEjAl-HF1EQPTE0PiXD98IRKZ8TvxPduAuonrhML3XuKy5_PpG4hPrNoHTb8fze2bB9E-6HyYKSVEo0ei9WSbU5iCPkMLjPaf-XFEkE6s6nVTIekdtFWiSfmJ5GYSFNjTJCGnpoOMm_kB1A/s1600/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UEMFjEOd2eZ6wNJoxRLrq-_MydNqIDrzZt8va3tvIpc3rNkauz4RqUQy7rZl-rkNQJNU_AtiMTnbAHXo78CXoMoXehZia1X6Wzz8Q7wU0LdZwRP5_TZQRHPP355-5QZ5sXdfKRFlqUU/s1600/twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bAI_D3dP8NQJUcMa-a2i7sgjT0qRNvYRNjSuvk-dsHyDwa6WkQNZmDZWaIjgUR7I6I8MK1ZUShE9eR_L3gVvmJWwD3f6GEjbbasKdn1ZKNmhScEvbpcA9j47sV12p-YmTTdHg9JsWTQ/s1600/google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHAfu-RGyeaQIKR3LhB2EFulA2i4iPvesH4yItbPgqQR72aeX-7NzwVkHq49yo3zwC1rvvRgF0c8LmEKK7_Zf_vhLgQgwEgDVG4oieSv-qRdOF7VwCiosRsC8Bp-PZoWPIyeOQsQRW0I/s1600/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_S-SRwcoftUroZJ5lnU8145E0v1Q8Fa2aAmRUPIOgpCU2oOytYhdz2R4ObitkLj-BRg5uvTUMdVpbH9TZ9bSWkY2M7JBtXNL8B9oGTb6RFPAqqedN0ZZvUtLQ3HpE2z2H4KIrtt4dBlM/s1600/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4G6BTNs5lY2CiKGexj46Ttexi_zTa8xn9lO-k2mnihIwRFfHqvVwzpmUHghaFvnUw1-qjxkmQDBgfGvl2NNdxHPCXlslLKWg3CHldSpS_1_wTUcSWCuX2R2A-H-vQXb3xOOKYmgX7FOI/s1600/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieWbc43yDi2pP5PqD5bNlTxX21-cynomuHnEHl2nchyD51atdbWdhxGZVEWyoakbJLE4B58bgKXkVqU1nHyJZyYVK6NKHoYzWRSRxyKx9TqHw9o9N17lIxDnnTV6wF_38jDht0GWkub0c/s1600/feed.png) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<br />
<li><a class="facebookbt" href="YOUR FACEBOOK PAGE LINK" target='_blank'></a></li>
<li><a class="twitterbt" href="YOUR TWITTER ACCOUNT LINK" target='_blank'></a></li>
<li><a rel='author' class="googleplusbt" href="YOUR GOOGLE PLUS LINK" target='_blank'></a></li>
<li><a class="pinterestbt" href="YOUR PINTEREST LINK" target='_blank'></a></li>
<li><a class="linkedinbt" href="YOUR LINKEDIN PROFILE LINK" target='_blank'></a></li>
<li><a class="youtubebt" href="YOUR YOUTUBE CHANNEL LINK" target='_blank'></a></li>
<li><a class="rssbt" href="YOUR FEED URL" target='_blank'></a></li>
</div>

3. Replace the red text with your own social media links and then save the widget and save the layout.
4. That's it. Open your blog and see the live preview of your metro style social media widget.
Keep visiting PC Tricks Guru for more tips and tricks.