Create Cool Social Profile Widget: Metro UI

                                   This widget named Metro UI by designernya 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

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/YOUR Facebook ID rel="nofollow"> </ a> </ li>
 <li> <a class="tw" href=http://twitter.com/YOUR Twitter ID</ a> </ li>
 <li> <a class="gp" href="https://plus.google.com/YOUR GOOGLE + ID "> </ a> </ li>
 <li> <a class="pi" href=http://pinterest.com/YOUR Pinterest ID rel="nofollow"> </ a> </ li>
 <li> <a class="in" href=https://www.linkedin.com/in/YOUR Linkedin ID rel="nofollow"> </ a> </ li>
 <li> <a class="yt" href=http://www.youtube.com/YOUR Youtube ID </ a> </ li>
 <li> <a class="fd" href=http://feeds.feedburner.com/YOUR Feedburner ID 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> 

Then Save it. That's all see the Result.  

Related Posts: