FREE DOWNLOAD: Making Social Profile Widget Cool: Metro UI

This time I want to set forth how to create a social networking profile widget draw with colored style. This widget is named after its designer Metro UI by Vinay Prajapati.

features:

7 includes social networking the most often used
Hover effect and elegant design,
Very neat and clean
No JavaScript, No Jquery, purely with CSS

How to add this widget to your blog:
To install this widget in your blog is very easy, good blog with flatfrom blogger, wordpress or other blogging services which CSS styles and HTML is accepted on the widget or template. You just need to add the code gadget / widget in the HTML / JavaScript.
Step by step for bloggers

Login menu on the dashboard >> Layout >> Add a Gadget >> Select the HTML / JavaScript
Copy and paste the following code in the content column:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/blog.zokerbro rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/zokerbro></a></li>
<li><a class="gp" href="https://plus.google.com/104907572941043748935"></a></li>
<li><a class="pi" href=http://pinterest.com/zokerbro rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/e2ramadhan rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/zokerbro></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/zokerbro rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Customization: Change my profile link to your own profile link.

     Keep your blog and see the results.

Wednesday, October 16, 2013

Making Social Profile Widget Cool: Metro UI