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.
Author: My name is Omeh Collins Ogbonna am a passionate Blogger who wants to Help The World Through Technology by Solving, giving out Useful and Valuable information using my blog as the great and unique medium. We provides all Tech / Telecommunication services, How To Make Money Online, free/Cheap Datas, Andriod Smartphones, Games, 9Mobile, Tech news, iPhones, Phone Review, ICT Issues, Free Tutorials. etc. You can Contact Me or join my Social media platforms. We welcome everybody from all around the World. love you all.

Mega Empire Global Investments
Join Our Free Newsletter
Sociliaze with Us
Next Post »


Click here for Comments
18: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.

Omeh Collins Ogbonna
18:44 ×

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.

EmpireTechx Blog
08:34 ×

Your welcome Boss


Thank You For Sharing Your Feedback, We're Happy You're Here, Because We Love To Help Others. I appreciate your comments. ConversionConversion EmoticonEmoticon