How to Add Metro Style Sharing Widget For Blogger Blog

How to add link For Facebook , Twitter , Google Plus , Feedburner your Site blog. This Is Metro Wonderful Sharing Gadget. All visitors to your site as a site professionally.Daily Likes, Follows and Subscribes.

 LIVE

Description : 

• Go To Blogger Dashbord → Layout → Page Elements
• Add a HTML/JavaScript Gadget.
• Paste Below Code in it

<center><style>.seconds{text-align:right;color:#000;font-size:10px;}.supportive a:active{position:relative;top:1px}.widget-item-control a{display:none;}    .widget-item-control a{display:none;}    #supportive{width: 300px;    float: left;margin-top: 10px;}    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}    #supportive .facebook, .googleplus, .rss, .twitter{    position: relative;    -moz-transition: all 0.4s ease-in-out;    -webkit-transition: all 0.4s ease-in-out;    -o-transition: all 0.4s ease-in-out;    transition: all 0.4s ease-in-out;    z-index: 5;    display: block;    float: left;    margin: 1px;}    #supportive .icon{}    #supportive .facebook{width: 147px;    height: 150px;    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9xPr8b0mJsFDPm8Hpj5CRLf2W1wYPTWgZ0KsiEYxRLN0lAx1B5xl4PHc7vsevV_zBcSYC9i8waKWBiK4mN1lpBn5C8max7DEZZKQaTF39JBnkOuuYaozMjOKzk-uSTs__SZR2GZEHuU/s1600/facebook.png") no-repeat center center;}    #supportive .twitter{width: 148px;    height: 74px;    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb2J8JJVy3uYUkSg6ouXVfJU7hy9Ln-KwdlBppJiRlS7TaqGrZK6__Oc_2I-NTJoAFL8zk50ZL6q5IuuWXpKWfFEvEcavCOhxyIiUebVz9vjsaR53QMf2Fy9DugAEKjL0dFKe1l9u_8E/s1600/Twitter.png") no-repeat center center;}    #supportive .googleplus{width: 148px;    height: 74px;    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM6vQdv9Gk4jDh5DyBd8u0S1SkPhJjcIT4_pXNIm-XeTY7A5NZkJD0AfMGje0jEcEN1o8U-iEEbOU1-Opwx3RKw6GXzSy7ZoyuF1l-njY86P4rRep2ScePd933Er71BqilZQRzlMMq5o/s1600/google+plus.png") no-repeat center center;}    #supportive .rss{ width: 299px;    height: 74px;    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcILJMv-8ExV96sGmYKwyX_FODtQeh_1ehlM-rV8uerkcC2NgUq_TAeLiNQ4vNj5LcKvef5FUIEyfmAbseiaB7e7V7m6MB3tY5vh8cR1QiU7O_uCX3t29A4RxydqYXF8bMPdsdss1F7rE/s1600/rss.png") no-repeat center center;}    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;-webkit-transform: rotate(-10deg);     -moz-transform: rotate(-10deg);       -o-transform: rotate(-10deg);      -ms-transform: rotate(-10deg);          transform: rotate(-10deg);    -webkit-transition: all 0.1s ease-in-out;}    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb2J8JJVy3uYUkSg6ouXVfJU7hy9Ln-KwdlBppJiRlS7TaqGrZK6__Oc_2I-NTJoAFL8zk50ZL6q5IuuWXpKWfFEvEcavCOhxyIiUebVz9vjsaR53QMf2Fy9DugAEKjL0dFKe1l9u_8E/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;    -webkit-transition: all 0.1s ease-in-out;}    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM6vQdv9Gk4jDh5DyBd8u0S1SkPhJjcIT4_pXNIm-XeTY7A5NZkJD0AfMGje0jEcEN1o8U-iEEbOU1-Opwx3RKw6GXzSy7ZoyuF1l-njY86P4rRep2ScePd933Er71BqilZQRzlMMq5o/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;    -webkit-transition: all 0.1s ease-in-out;}    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcILJMv-8ExV96sGmYKwyX_FODtQeh_1ehlM-rV8uerkcC2NgUq_TAeLiNQ4vNj5LcKvef5FUIEyfmAbseiaB7e7V7m6MB3tY5vh8cR1QiU7O_uCX3t29A4RxydqYXF8bMPdsdss1F7rE/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;    -webkit-transition: all 0.1s ease-in-out;}</style><ul id='supportive'><li><a class='icon facebook' href='http://www.facebook.com/USERNAME3' target='_blank'></a></li><li><a class='icon twitter' href='http://twitter.com/USERNAME2' target='_blank'></a></li><li><a class='icon googleplus' href='G+ URL' target='_blank'></a></li><li><a class='icon rss' href='http://feeds.feedburner.com/USERNAME1' target='_blank'></a></li><div class="seconds"><a href="http://Onlineblogustaad.blogspot.com/" target='_blank'>Get This</a></div></ul></center>

Customize Your code. Find USERNAME1 ,  USERNAME2 , USERNAME3 , G+ URL Change it.
Save Gadget.
Allah Hafeez