CSS3 Metro Style Social Networking Widget for Blogger

New CSS3 Metro Style Social networking widget for blogger.This widget is made up of Html and with CSS.When you keep the mouse pointer means it will hover by zooming it.This is the main advantage of it.This gives an premium look for your blog.Before adding this to your blog just take an live demo on our Demo site,

How to Add CSS3 Metro Style Social networking widget for blogger?

                                                                                      Live Demo

How to Add CSS3 Metro Style Social networking widget for blogger?

  • Go to Blogger > Dashboard > Template > Edit Html > Proceed
  • Then Search for ]]></b:skin>
  • Then paste the following code given bellow above ]]></b:skin>

/*  CSS3 Metro Style Social networking  */
.bubblewrap li{
width: 60px;
.bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/

  • Then Save your Template.
  • And go to Layout > Add Html/Javascript
  • And paste the following code given bellow in that box,

<ul class=”bubblewrap”>
<li><a href=”https://plus.google.com/102229186630832989606″><img src=”http://3.bp.blogspot.com/-pj46wmN9qm4/UHGQUrDKr1I/AAAAAAAAEu4/mXG5mBAQkj8/s1600/bloggertrix.com-google-icon.png” title=”Google pus” /></a></li>
<li><a href=”https://www.facebook.com/Triposoft”><img src=”http://2.bp.blogspot.com/-j1msMCHmqJM/UHGQThgVrgI/AAAAAAAAEuw/0pEsjP-yDbQ/s1600/bloggertrix.com-facebook-icon.png” title=”Add to Facebook” /></a></li>
<li><a href=”http://www.digg.com/triposoft”><img src=”http://3.bp.blogspot.com/–JW_Wbuvo7Y/UHGQSkQGcYI/AAAAAAAAEuo/i9pzZ1eBjAY/s1600/bloggertrix.com-digg-icon.png” title=”Add to Digg” /></a></li>
<li><a href=”http://www.twitter/triposoft”><img src=”http://1.bp.blogspot.com/-TlXkHJ6yld8/UHGQXBeZFNI/AAAAAAAAEvI/1gSpmNN_th8/s1600/bloggertrix.com-twitter-icon.png” title=”Add to Twitter” /></a></li>
<li><a href=”http://feeds2.feedburner.com/triposoft”><img src=”http://4.bp.blogspot.com/-1L3Qs_v6Ipw/UHGQWF5ddHI/AAAAAAAAEvA/2Fi_HyP7g9Q/s1600/bloggertrix.com-rss-icon.png” title=”Add RSS Feed” /></a></li>

  • And replace all the Triposoft name with your blog name.
  • And save it.
  • Enjoy Dudes!
I am just sharing this widget only.The credits goes to Bloggertrix.If you like this article please share this with your friends and subscribe to get many free blogger widgets and tricks via email for free.If you have any tips and tricks means share it with us through Guest Posting at Triposoft.Stay Tuned!
About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.