Add Metro Style Social Sharing Button's for Blogger Blogs

Rishabh Jain• February 09, 2013• 0 Min Read

sharing-buttonsWell I have earlier posted Black Glossy buttons that were similar to these buttons I am posting today, now they had the same zooming effect like these have but that had a different color contrast you can check that too, but now if you love simplicity then these sharing buttons will look awesome on your blog. These buttons have basically 5 social websites, facebook, twitter, google+, youtube and your rss feed.

So now you can add your sites link to every button respectively.Well these will zoom when you will hover over them and then anyone clicks on them will be taken to that site automatically. So now check below steps and have fun.

  1. Open Blogger –> Template –> Edit HTML.
  2. Now press Ctrl + F and search for ]]></b:skin> tag and paste below code above it.

    .HU-bubblewrap{list-style-type:none;margin:0;padding:0;}.HU-bubblewrap li{display:inline;width: 60px;height:60px;}.HU-bubblewrap li img{width: 40px;height: 40px;border:0;margin-right: 4px;-webkit-transition:-webkit-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in}.HU-bubblewrap li img:hover{-moz-transform:scale(1.8);-webkit-transform:scale(1.8);-o-transform:scale(1.8);}
  3. Now Save Template and navigate to Blogger –> Layout –> Add Gadget.
  4. Now choose HTML/JavaScript Gadget and add below code into it.

    <ul class="HU-bubblewrap"><li><a href="https://www.facebook.com/xxxxx"><img src="http://i.imgur.com/6AI7jNU.png" title="Follow Us on Facebook"/></a></li><li><a href="http://www.twitter/xxxxx"><img src="http://i.imgur.com/qWbojzO.png" title="Follow Us on Twitter"/></a></li><li><a href="https://plus.google.com/xxxxx"><img src="http://i.imgur.com/g8dACcy.png" title="Follow Us on G+"/></a></li><li><a href="http://www.youtube.com/xxxxx"><img src="http://i.imgur.com/WOWCE5P.png" title="Subscribe Us on Youtube"/></a></li><li><a href="http://feeds.feedburner.com/xxxxx"><img src="http://i.imgur.com/SgONHEw.png" title="Subscribe Us on RSS Feed"/></a></li></ul>
  5. Now just change the links in blue with your own and hit Save.
  6. Now refresh your blog and see these awesome buttons dazzling.
Tags: