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/AVvXsEippGbHJUPx3HbLM_EBBZhP1IEKQtCQy6vZw5BeIVurBL35LMbFAWxluUEqWcNsSI_jIbhwCt1JUO570TnWrBeXlnRQdro77PKO7EWMZ08iYwZgrNTK_lgv0xv5f5bsgRGtKLnktL-pTvA/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/AVvXsEgVwqVPVEDIJedUbKnLCjILBWH5IbQw4ZFNP6MWRdkQxyXHWw398EY1dhXICMCaLdtR4-nTYhH50aPQTZGVcOVM7XGqPTyAVwSLG-kbAYLWP99BBdk_tUShaHdOBsrzZUXulzPqo7eSGlY/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/AVvXsEgrXEZYxpDrzV4sF5eNBk87S4e-VKB7fbLfsCyq6yWfsOtA_4yy9r7NhFlCPsISki4L0FyiV5-pC3f2SYCdXCPcrKpUThlMPeXxePZmrCXwHStNSoXMArozZaoIL_2y2D89q3Ako28Gm6s/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/AVvXsEj9s8eSlx4HydrVq3RiDWn69POFy8o1QBUxme8H40on-3uJF3UOksY_MTGZlcVKiU0DOT2qZS9wr3Y0xXpgPv_toBxPRyP3ouzoli9qpvrZwpgf0JCvAkSMAVAIdbAuLbPzHqBJXNNHYp4/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/AVvXsEgVwqVPVEDIJedUbKnLCjILBWH5IbQw4ZFNP6MWRdkQxyXHWw398EY1dhXICMCaLdtR4-nTYhH50aPQTZGVcOVM7XGqPTyAVwSLG-kbAYLWP99BBdk_tUShaHdOBsrzZUXulzPqo7eSGlY/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/AVvXsEgrXEZYxpDrzV4sF5eNBk87S4e-VKB7fbLfsCyq6yWfsOtA_4yy9r7NhFlCPsISki4L0FyiV5-pC3f2SYCdXCPcrKpUThlMPeXxePZmrCXwHStNSoXMArozZaoIL_2y2D89q3Ako28Gm6s/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/AVvXsEj9s8eSlx4HydrVq3RiDWn69POFy8o1QBUxme8H40on-3uJF3UOksY_MTGZlcVKiU0DOT2qZS9wr3Y0xXpgPv_toBxPRyP3ouzoli9qpvrZwpgf0JCvAkSMAVAIdbAuLbPzHqBJXNNHYp4/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.

Share On Google+Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Digg This

abdelali tibicht

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.