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!
Facebook Comments

Speak Your Mind


CommentLuv badge