After the launch Microsoft windows 8 (OS), metro style has became popular in web designing arena. Many WordPress themes, Blogger templates, menu bars, etc has been released based on this metro style. But what this metro style is? Actually metro is a design language from Microsoft, and Windows 8 start screen is designed based on that. Whatever, today what I have here for you is a metro style social subscription widget.
As its name is, the metro social subscription widget is inspired from the metro styled windows 8 start screen. The widget contains a Facebook, twitter, pinterest, LinkedIn, Google +, RSS and a YouTube button. The button zooms out when the mouse is hovered.
Screenshot:
Adding Metro Style Social Subscription Widget
Step 1: Go to your blogger dashboard, Layout >> Add a Gadget.
Step 2: From the list of gadgets, select HTML/JavaScript gadget and add the below code into it
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJ0q6kIN8S3gRxIU_tMbQunVeJQGGe2d_Mb1hs0cYY3GiazwUJ0tXeK4iOSOSwJXAE9n0Demn_6NXagXxrg2NdwLiXBmXx_5xWWGfsBHkbaAX-AWnrkef1IHQApjnTygThu922kXNBQ9R/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2v9xpq_g5vAhrkLpypvlnFLmMZ_vkHp9Ov8_JsVg8JYRIywqr73Xcd4FXrMkZh-FEBHiUky7xtKr3CDuLP6Q8LtynxG1OOVYG8UyPHw_2w-tVq0bJVoNkNMqtn46sVmCU8Fb1dJlPQQ0k/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixr7Zv2zWDKfke9c9StobHxh06x5mLLewXtNXegmWFWs0yxZzMxddlX14rBlb3GCCyU6koI2IU8FFV-GSMW0sPnx1AyhSXzv4YPEfdjcYMvBsM7IF9Va03MCyAbGLhCB8X12yl2KxEKBfh/s50/google%252Bplus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3poTBAnxCdoR_7iqsd5Yimf_CKD3ovpl1SrWJAPv4ppWjkyzVCrMRreQAS_wqC3-VtuX8Nf5vqZiEKzaqu9DcoPa7uRRgpr1rAxYQGnhbp2BO_4PVbOr6dN0a1oM7I9OgNgIEmMGWgF8/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sJQTbJJBjLTqpuStE5CfTUY7wH3qMl7sXdXVOqEfkwbl3tma9Rd0N3f_9NH3v3yWDIfgwiDt-OwhHc1JUF-TJ0JwIy-pbo8XjcmAEkPWLQBgG5y2L3ciq69nJE_JWl9SNgK-JONorzQ/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOtTVkiPNlGOthWJJ7D33MPHBl4k0A4w66b4DxmX8JnSdjGhN40lknNQV4e40JMLofzGqZCDJOlYkyJeIAjzEZh6dm1RiqcwJ4OhKifbVbvGYvn_zL3dhdGXIMcRDkKsn0xfBai5IIx4/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtE8Exthno8xfIZPRfWTpZWpHL7S0S93l8SLKNSkq4ilAjC8tNVJRxw7xR6-dNOA1apI0m1BEeIlJLW3oEo2vSihk9St89WVTbm70lZOg9bmHdnQKg2pu17NVZ_IQN1cgom7_kgQc4iWE/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJ0q6kIN8S3gRxIU_tMbQunVeJQGGe2d_Mb1hs0cYY3GiazwUJ0tXeK4iOSOSwJXAE9n0Demn_6NXagXxrg2NdwLiXBmXx_5xWWGfsBHkbaAX-AWnrkef1IHQApjnTygThu922kXNBQ9R/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2v9xpq_g5vAhrkLpypvlnFLmMZ_vkHp9Ov8_JsVg8JYRIywqr73Xcd4FXrMkZh-FEBHiUky7xtKr3CDuLP6Q8LtynxG1OOVYG8UyPHw_2w-tVq0bJVoNkNMqtn46sVmCU8Fb1dJlPQQ0k/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixr7Zv2zWDKfke9c9StobHxh06x5mLLewXtNXegmWFWs0yxZzMxddlX14rBlb3GCCyU6koI2IU8FFV-GSMW0sPnx1AyhSXzv4YPEfdjcYMvBsM7IF9Va03MCyAbGLhCB8X12yl2KxEKBfh/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3poTBAnxCdoR_7iqsd5Yimf_CKD3ovpl1SrWJAPv4ppWjkyzVCrMRreQAS_wqC3-VtuX8Nf5vqZiEKzaqu9DcoPa7uRRgpr1rAxYQGnhbp2BO_4PVbOr6dN0a1oM7I9OgNgIEmMGWgF8/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sJQTbJJBjLTqpuStE5CfTUY7wH3qMl7sXdXVOqEfkwbl3tma9Rd0N3f_9NH3v3yWDIfgwiDt-OwhHc1JUF-TJ0JwIy-pbo8XjcmAEkPWLQBgG5y2L3ciq69nJE_JWl9SNgK-JONorzQ/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOtTVkiPNlGOthWJJ7D33MPHBl4k0A4w66b4DxmX8JnSdjGhN40lknNQV4e40JMLofzGqZCDJOlYkyJeIAjzEZh6dm1RiqcwJ4OhKifbVbvGYvn_zL3dhdGXIMcRDkKsn0xfBai5IIx4/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtE8Exthno8xfIZPRfWTpZWpHL7S0S93l8SLKNSkq4ilAjC8tNVJRxw7xR6-dNOA1apI0m1BEeIlJLW3oEo2vSihk9St89WVTbm70lZOg9bmHdnQKg2pu17NVZ_IQN1cgom7_kgQc4iWE/s45/feed.png) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/USERNAME"></a></li>
<li><a class="tw" href="http://twitter.com/USERNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/USERNAME"></a></li>
<li><a class="pi" href="http://pinterest.com/USERNAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/USERNAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/USERNAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/USERNAME"></a></li>
</div>
Step 3: Replace USERNAME with your usernames.
Step 4: Click the orange save button.
If you have faced any problems while installing the widget on your blog, then please let me know it through the comment box below. Before you go, make sure to check out our other posts on blogger widgets.
Thanks
ReplyDelete