Add Metro Style Sharing Widget For Blogger

How to add links social sites  Facebook and Twitter and Google Plus as well as links feed of your site in the form of Metro wonderful , and is characterized by a wonderful and attractive and stylish and her aesthetic form attract the eyes of all visitors to your site as a site professionally.

These buttons phased approach being developed in the new addition by adding the codes of HTML so wonderful sites.

Written explanation
 1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) 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/AVvXsEi1md8mobPdcTP0XqpWsHzGu-oIJKP-EFEsRhx9vZPSfe-Zw0alzEuBUzttq_DMVFlhyphenhyphen6SUSIY7NE6MmWbtSxaKRGUuQ3z95z2qkSoZ2D0slnOf18qw2PhYHM3jnNklffLAQZQklMKJOV8/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/AVvXsEjz6YU-igxfX087wz_p9RRX82YdXwrIEUWEMVGHlJU_7M6CVGKyKdaee9fuP5TiVD1zQ-RqhD52IJve99IrHc0BSVlHPnSv1WXgUeqeWo3JYZyvDiZvqEOkx1ocf1z1q2MXnvD06gePnCk/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/AVvXsEhLAISAmwyqdQ-ocEpxhTzGzaKFKkhJIp3xNpqv5UxeKQf5xVUse07l0twWRAqQmxveZmpKSI2fQBlLgggh1nvxh8FiPdBKR8lUo0g5tyGu9gMgOk0s4GOdiFrkMHtozaZltrK5Juyuoxo/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/AVvXsEj2LkDCSD0tT89qVOx_D-EjZTAp6erlAwPO5TTUpPHYrvWA8MOBB3xssKgihHknyla9eZ-9xWUJGkW0FuOAiNvGByYFlCO7v7rvKLQpv_CNRCF6Za4ZEQc88YZ79czXtKBji0qlis2f1jk/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/AVvXsEjz6YU-igxfX087wz_p9RRX82YdXwrIEUWEMVGHlJU_7M6CVGKyKdaee9fuP5TiVD1zQ-RqhD52IJve99IrHc0BSVlHPnSv1WXgUeqeWo3JYZyvDiZvqEOkx1ocf1z1q2MXnvD06gePnCk/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/AVvXsEhLAISAmwyqdQ-ocEpxhTzGzaKFKkhJIp3xNpqv5UxeKQf5xVUse07l0twWRAqQmxveZmpKSI2fQBlLgggh1nvxh8FiPdBKR8lUo0g5tyGu9gMgOk0s4GOdiFrkMHtozaZltrK5Juyuoxo/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/AVvXsEj2LkDCSD0tT89qVOx_D-EjZTAp6erlAwPO5TTUpPHYrvWA8MOBB3xssKgihHknyla9eZ-9xWUJGkW0FuOAiNvGByYFlCO7v7rvKLQpv_CNRCF6Za4ZEQc88YZ79czXtKBji0qlis2f1jk/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://pattakhazone.blogspot.com/" target='_blank'>Get This</a>
</div></ul></center>

4) Customize your setting.Find any word click F3 or Ctrl+F.

Replace it USERNAME1 with your Feedburner Username.

Replace it USERNAME2 with your Twitter Username.

Replace it USERNAME3 with your Facebook Username.

Replace it G+ URL with your Google+ Page url .

5) Save your Widget.

Socializer Widget By PatTakha ZOne

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →