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.
- Open Blogger –> Template –> Edit HTML.
- 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);}
- Now Save Template and navigate to Blogger –> Layout –> Add Gadget.
- 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>
- Now just change the links in blue with your own and hit Save.
- Now refresh your blog and see these awesome buttons dazzling.
Hi there. I have tried this on my site and the buttons don't zoom, they are huge all the time! Any ideas or help would be greatly appreciated
ReplyDelete