Feedback

15 Feb 2013

Metro Style Vertical Social Buttons for blogger

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. 
  5. <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>
  6. Now just change the links in blue with your own and hit Save.
  7. Now refresh your blog and see these awesome buttons dazzling.
 

People

My Photo
We are also on Facebook We are on Twitter Home Page
Hello friends i am Jaskaran SH SD from Amritsar (Punjab) India. I love blogging. First I started a blog on science in 2010. Now I handle only this blog. I like to share the things which I know. I learn many things through blogging. I always try to make different that's why I learn many things. 

About Blog

Construct Internet is one of dedicated source for Internet, Computer and technology tutorials and development. It is Started in Oct 21 2012. We provide a professional tools for websites and blogging, along with a wide range of tutorials, How to fix etc. for computers and other technology development. Social news, Business and Social Science like topics are also followed in our blog.

We 'r Social

2012-2013 Construct Internet. Copying Without Permission is Strictly Prohibited.