» » Metro Style Social Media Subscription Widget V2

Metro Style Social Media Subscription Widget V2

tips4tricx
After receiving bundles of beautiful feedback and emails from my visitors for my previous post of Metro Style Social Media Subscription Widget today I am going to announce V2 for the same beautiful widget but having such more Social Media Connection Button just like Linkedin and Pinterest. In today�s widget you can find six different type of social media networks and we can say the most usable networks in social media. Before I have also share benefits of social media that why we should share our blog or website post to Social Media Sites.

How to Install Metro Style Social Media Subscription Widget V2


Go to Blogger Dashboard
Layout
Add a Gadget >> install HTML/JavaScript Gadget and paste the Above Generator Script and Setup that one in sidebar.


<div class="metro-social"><li><a class="fb" target="blank" href="http://www.facebook.com/tipsandtricx"></a></li><li><a class="tw" target="blank" href="http://twitter.com/tipsandtricx"></a></li><li><a class="gp" target="blank" href="https://plus.google.com/+AbidAziz1"></a></li><li><a class="pi" target="blank" href="http://pinterest.com/tips4tricx"></a></li><li><a class="in" target="blank" href="https://www.linkedin.com/in/tips4tricx"></a></li><li><a class="yt" target="blank" href="http://www.youtube.com/tis4tricx"></a></li><li><a class="fd" target="blank" href="http://feeds.feedburner.com/tips4tricx"></a></li></div><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(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}</style>

Customizations: simply change your social profile links with yours

Related Posts