Social Network Blogger Widget With Metro Style

This social network widget is basically based on metro style. You will add a link of your profile with seven most popular social network with this widget. With this widget you can engaged your visitors with your social media profile and get connected. This widget also have however effect when you put your mouse cursor on on widget you see something drift. This widget is very simple and attractive. Images is used for media icons. This widget is very to add into blog and the designer of this widget is Vinay Prajapati.

How to add Social Network Blogger Widget With Metro Style ?

• Goto blogger dashboard.
• Layout >> Add a Gadget >> HTML/Javascript
• Copy the below whole and paste it HTML/Javascript.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="truebloggingtricksMS">
<br />
<li><a class="BSfb" href="http://www.facebook.com/truebloggingtricks" rel="nofollow"></a></li>
<li><a class="BStw" href="http://twitter.com/haiderkhalil88"></a></li>
<li><a class="BSgp" href="https://plus.google.com/+HaiderKhanAkhunzada"></a></li>
<li><a class="BSpi" href="#" rel="nofollow"></a></li>
<li><a class="BSin" href="#" rel="nofollow"></a></li>
<li><a class="BSyt" href="#"></a></li>
<li><a class="BSfd" href="http://feeds.feedburner.com/truebloggingtricks" rel="nofollow"></a></li>
</div>
<style>
.truebloggingtricksMS{width:285px}
.truebloggingtricksMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.truebloggingtricksMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.truebloggingtricksMS .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgdw3Hvk5dzEhmCFDNa_CZI0l140QpjR3nA2NYCRxQSBOj2T8wlDyBzHREepm968iUx9WkesKOBI-Wj_GkUAhgMaqOWl23FmPdrAifCV_zj_-iWpJT2mfxTbtaOGYRWCysFrKH-rcBlXt/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.truebloggingtricksMS .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_ihyjkwxDyHAkVaLjfr4fZgux8QSjJshX6nMwAe5CsAwgDRcwPbVwVwlxxqft6NHvUiNU4NlGwI4dDAdr2JWg4sHoC1vKsHFPBKpvGelU9fEIivwePnQV099WqhDXdKXQv3K_ES_fIxn/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.truebloggingtricksMS .BSgp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiMRNzBh2wWhylth3Yb8vgLqWmq8m2MYLRG_g7VdOyd5xCSYliSpmgfrDniw-GMH0ixog_S3IG2xKsQhkU-LLYJZ7Q9Ropswodblub5wbTdrdhbVnfS9Ex-AFZ9dwGvdrU_xxOIN9t-xL/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.truebloggingtricksMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0EzCpjrj93BM2HY5qpqOO7fl8c9Obgp3RtVgm4aew1iMLBZp-A3ZXxrqjqapGAK9O7QempsaRjecyn0DI7BkDeMiUS_1ijEP021CtKVW-zkDDoBxIxQYRlXFSYmwGgM-erNdJC4tpAVM/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.truebloggingtricksMS .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURJ1uQDqsSY_IXthWbgxcrNszhvaI5IOuFvhg53OKRh1VIbPZoPdDI_ywYpIfWRWHd0ZwJVofqJtj4fo_J6U80bExvBY1skvX-U2JZrsdVKrGnF0hl3PnXsGAu9l87SE7xcQSpNg4YN3W/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.truebloggingtricksMS .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WO1Xmn2zH442kIA1IhEjBa-Z_x0wQfC-F4gVoIBqfwCxus5byOVesIqlfu5iQO1RnUPkJTP-5qUcmpjiBDvgpkc8VZsTYHPkhl5F240ohBF4YqOAMujRZgtbcsG4tAZFNMZHsx-i4VS9/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.truebloggingtricksMS .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavmpkoTMD64U3ui9rg3B-Ovw3FoQ66XtGMmdUiWSlW2LM4Sij5sOpeMQi2dkcmERW6h87GhhO1gleGBIRQRjRFhTTZZdDQw7qZM9167xXBN5EdkLPMUK309kzu5oR9LJfY7HG8VYUYmzt/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.truebloggingtricksMS li:hover .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHrzzO9m2RgOJqoROGdyjvEeqhZDgRUQKdhZGsKL2SNQOqVPeMcRKLWJc6VgjIK1YpTuOycFiabGYaC85Ca9J9i2_gMtCo-tMM0-Pb1Ow8D_-QqsPzguTyuBFcqB_CNnl7IudqKGm6Nnk/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.truebloggingtricksMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7C16Pkj8W9FtO-kGw48YrxfaCKPxsCuO6gyehOSiskiMvLNPiJNO3_p8b8grSn2vuCgP6GUmOXElwBgV33rn9wcQHR2vnqpWh3Ix-oSxCJsL8JeEJITlk99LmWbDb4gD1-eAisr-Tf9H/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.truebloggingtricksMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6iJkFo_zv25yGuo2SvGEmytnmIIVHYuf40moy8hZukO4INb6kNpm4yrSTMLULIrj00YyZy_kl80C8BjG5hqqi5I_RiaMfzrP7351bMwnVDKu6kvs4m55MpYgmFS_JQXGfEvJd-271rJQ/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.truebloggingtricksMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcMi8EvdOTUU5WQAgTrKQj-S3xeUhait6Y0uJum2aAAgEV0xXOSC44NDCIXR8WGqZ0-6EyBtg4RMl3mViTLHcOQDpAtlJ5DNzrfD3_KNVr02OmlSBwTgZSQZmFDROjUhI73q3FjRnZeSy/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.truebloggingtricksMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7T1V9dR0nXdeUtGZTNcaXmWcGYX3aZqEXC3jWtcQn1O88_2jVhwbVVeuOkdb15zwm_H-RvNPE5T_y4KCzxhoGcFFbvw_WveCp9Z5hEM2xKaLD6Q9OzszocObpoZMNC7otzlxL3mMTz-OL/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.truebloggingtricksMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocfcI0iTC8G44ZywMLIokrmyoXFxnIgpi7xD0Kus6DCRNwCI-sCsujfKleoJhMfYFOO8uBnFXuwd8mjQ5PQNoFIRrzeolBiAoZ-pxc11IzxQl_tE6PgkmEv0PXZlTjG0NTPYrmLC7xym-/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.truebloggingtricksMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZxwCoetKL0_t3weZAirVKMf1KQMhEskSEFD9JrZILPJmFdnCSvDtAGCaLpsKOkRiSdixwVIx7uMuGcv6-Lkzzh1jOGkHolzuKNoEsuiC46xh4nT01AixuOjVvyAO5PEZEvHvSyPtmVBu/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

• Click on save button.

Customization

• Replace highlighted color with your social media link