Today i share you the method of adding a metro style social widget for blogger that make your blog more attractive for new visitors
 1) Login to your blogger dashboard and then press layout button and then add gadget
2) select html/java script gadget and paste the code given below in your this gadget

<div class="metro-social"><li><a class="fb" href="Your Facebook URL here"></a></li><li><a class="tw" href="Your Twitter URL here"></a></li><li><a class="gp" href="Your GooGle + URL here"></a></li><li><a class="fd" href="Your FeedBurner URL here"></a></li></div><style>/*Metro UI Social Profile Widget v2.0 by Tech Prevue LabsWeb link to gadget code: Distributed under license CC BY-NC-ND 3.0 INTPlease keep license information intact while using this widget*/.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.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:140px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;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 .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}</style><br />

3) after this click on save button and then enjoy your new blog style