Add Metro Style Sharing Widget For Blogger

Tuesday, December 31, 2013

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.

Additions similar thereto Metro Style Social Icons for Blogger and How to Add Metro Style Social Widget for Blogger

How ToAdd Metro Style Sharing Widget For Blogger

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/AVvXsEhuAHSJm1CS3hFkjjT5Wlr0xAX1c4coJpGt2Ccfgb2yXEH8546zn-oZTGZknwDIpl5oRPOmXeEjiQQhwPBr00yXQJoiyd1BK6k2R8btviXc5WRP5KBEy9qr75pzRJthiU5zD3L3pUODzmU/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/AVvXsEiGal2VcGSd-5HFl9W4c4AnaH9bIF6-zU_pjYSUhvPWBeC5Y1eNAIX1tiHmFI8IYKNFSJtfe5tmWcPXGJqQ2CUfN9U_kzO2bZkKOAdOUU20_q7Mkxk77rA-EdMaeUh-Iu4EODvx8ABe-q0/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/AVvXsEj1jCvkY2UWYKvFMdVTphkguo5SlUYsCfUryhisBLFJ4Joo1PZIMN3KMRX_Mj1-yQFmPK_d-kvgULSFkCmnfN5oXr644kh5WsE3E9_SEjUwIWl9qL-IBiDxgs_SrB6hseR-cLmGt11fVoU/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/AVvXsEhOFStyyBmj1mkrI7B4qada2AXvFweznp8Il9HoK3i_nMfoMkONCqgouX8lQZ59q-Ba0_nymnfCDIk8IeSdq0HFCCvXPsPpK6bj-1s2oD2g0kf3EKQ-KmtROxv2LivN5-xb5vBTo53y70s/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/AVvXsEiGal2VcGSd-5HFl9W4c4AnaH9bIF6-zU_pjYSUhvPWBeC5Y1eNAIX1tiHmFI8IYKNFSJtfe5tmWcPXGJqQ2CUfN9U_kzO2bZkKOAdOUU20_q7Mkxk77rA-EdMaeUh-Iu4EODvx8ABe-q0/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/AVvXsEj1jCvkY2UWYKvFMdVTphkguo5SlUYsCfUryhisBLFJ4Joo1PZIMN3KMRX_Mj1-yQFmPK_d-kvgULSFkCmnfN5oXr644kh5WsE3E9_SEjUwIWl9qL-IBiDxgs_SrB6hseR-cLmGt11fVoU/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/AVvXsEhOFStyyBmj1mkrI7B4qada2AXvFweznp8Il9HoK3i_nMfoMkONCqgouX8lQZ59q-Ba0_nymnfCDIk8IeSdq0HFCCvXPsPpK6bj-1s2oD2g0kf3EKQ-KmtROxv2LivN5-xb5vBTo53y70s/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://newth3.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.