How to Add Metro Style Sharing Widget For Blogger Blog

Stylish Sharing Widget
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/AVvXsEiIa60MyX17ZC3PPJRP2s5UFSMK9oQg3muR9bZ3vkAxMRJEsQI4ibY5gEgEddFGZt_vSDa0YiE9zyHoyj9xBK_-_QSuqmdPVkmxbEKdLfPanJvHYU5TULzH1oVHS7mH1NCFNQ6htp0TLIk/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/AVvXsEgaSWp4qfQPrj6c0X6oxQsHUfD4_bm3pb3iFXhvjTmyiwr4N92lwyLmXnUF9zjz2TK1rJJJXvfdHMZElfdPF03SPKxiTE2aHrJBEW4pBydZedNVfh2G88SR0kmJCIqsoLDr1Ka7rgOQM00/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/AVvXsEhFxEo_uT9zCAtt9-MYk-gsLqfNtE0MI9flbHuO96qqMgKC3GDlzSKsiI2VOnE6piRvZDnLwWEa9-DwXqiD1PRqWVte8r6F9y0e6c1Vk_lWSXgA05g-oSbQGsV-JK5S0y91wuDL2LMpBWQ/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/AVvXsEhM3N_P4SzsxE9lhMaIlDimk9CiJvsKVo3r3BDlrVsMoZcMvObT49I3H7nVK8Iu8tZVvsEUo-a9E5XFiAsj4xlfJ2gv8mRrsAeMrZzcy9XansUDKewdiBKSTUVGoe-2BjOq7hqRMDdCWQA/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/AVvXsEgaSWp4qfQPrj6c0X6oxQsHUfD4_bm3pb3iFXhvjTmyiwr4N92lwyLmXnUF9zjz2TK1rJJJXvfdHMZElfdPF03SPKxiTE2aHrJBEW4pBydZedNVfh2G88SR0kmJCIqsoLDr1Ka7rgOQM00/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/AVvXsEhFxEo_uT9zCAtt9-MYk-gsLqfNtE0MI9flbHuO96qqMgKC3GDlzSKsiI2VOnE6piRvZDnLwWEa9-DwXqiD1PRqWVte8r6F9y0e6c1Vk_lWSXgA05g-oSbQGsV-JK5S0y91wuDL2LMpBWQ/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/AVvXsEhM3N_P4SzsxE9lhMaIlDimk9CiJvsKVo3r3BDlrVsMoZcMvObT49I3H7nVK8Iu8tZVvsEUo-a9E5XFiAsj4xlfJ2gv8mRrsAeMrZzcy9XansUDKewdiBKSTUVGoe-2BjOq7hqRMDdCWQA/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
Previous
Next Post »