Thursday, December 21

How to add Social Profile Widget Metro UI on Blog & Website

This a new Social profile widget for Blogger/Wordpress/Website it has nice design and is designed by Metro style interface.

This new Social profile widget designed by Metro style interface is Windows 8 design concept which actually more friendly to tablet Gadgets. 

This new design is really popular for sure which is best used in the side bar of Blogger/Wordpress where it look pretty much beauty. 

It's main feature is it's hover effects and elegant design. 
How to add Social Profile Widget Metro UI on Blog & Website

How to Install Social Profile Gadget for Blogger: Metro UI

The installation process of the widget/gadget is easy on Blogger or Wordpress blogs. 

What you only need to do is to add a Javascript/HTML widget and save the code below. 

Note: in the wake of it's installation do not forget to change the highlighted values on colour: Twitter Username, Facebook user/page,Google+ user-id, RSS/Feed burner Feed URL. 

 After the implementation of the code do cross check if the values you changed or added is correct before you save it. 

How to install the code. 

Login into your Blog go to Layout and click on it then click edit on the widget you want to input the code and save it.

Then preview to see the new effect. 

<div class="metro-social"><li><a class="fb" href=""></a></li><li><a class="tw" href=""></a></li><li><a class="gp" href=""></a></li><li><a class="fd" href=""></a></li></div><style>/*Metro UI Social Profile Widget v2.0 by Tech Prevue LabsWeb link to gadget code: under license CC BY-NC-ND 3.0 INTPlease keep license information intact while using this widget*/.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(// no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(// no-repeat center center #43b3e5;width:140px;height:70px}.metro-social .gp{background:url(// no-repeat center center #da4a38;width:140px;height:69px}.metro-social .fd{background:url(// no-repeat center center #e9a01c;width:282px;height:69px}.metro-social li:hover .fb{background:url(// no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(// no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(// no-repeat center center #da4a38}.metro-social li:hover .fd{background:url(// no-repeat center center #e9a01c}</style>

I hope you’ll enjoy it.



  1. Anonymous09:37

    Greate post. Keep writing such kind of info on your site.
    Im really impressed by your site.
    Hello there, You've performed a fantastic job. I will definitely digg it and individually suggest to my friends.
    I am confident they'll be benefited from this website.

    1. This great and am impressed to o that you like the tips and writeup, l will always do my best to post more and more thank.


Use the comment box to air your view on this post or any other issue at all.