Designed by Veethemes.com

Different Metro style social Widgets for Blogger 2013

Wednesday, May 29, 2013 by Mohan Singh No Comment
Today , I'm share a Different Metro style social Widgets for Blogger. It's  looks attractive your blog. In this post include Metro style social profile widget , subscription widget and Metro UI Menu widget for Blogger.Let's check out all widgets-



How to add Metro Style social Widgets for Blogger 
  1. Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’.  If you are new, follow the link below to add HTML and Javascript widget into your Blogger blog.
  2. Now add the following different Metro style codes given below as a widget to your Blog. 


Social Profile Widget for Blogger: Metro UI v0.0 

<a href='ORKUT' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Orkut'><img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png' style='border:0; width:45px; height:45px;'/></a>     <a href='TWITTER' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Twitter'><img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a>     <a href='FACEBOOK' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Facebook'><img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='GOOGLE+' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Google +'><img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>   
Social Profile Widget for Blogger: Metro UI v1.0 

<ul id='jocial'><li><a class='icon facebook' href='http://www.facebook.com/digitalhubinc fan page facebook/'></a></li><li><a class='icon twitter' href='http://twitter.com/username/'></a></li><li><a class='icon googleplus' href='https://plus.google.com/u/0/digitalhubinc profil google+/'></a></li><li><a class='icon rss' href='http://feeds.feedburner.com/digitalhubinc feed rss'></a></li></ul><style>  #jocial{width: 310px;float: left;margin-top: 10px;}  #jocial li{position:relative; cursor:pointer; padding: 0 !important;}#jocial .facebook, .googleplus, .rss, .twitter{position: relative;-moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;z-index: 5;display: block;float: left;margin: 1px;}#jocial .icon{overflow:hidden;}#jocial .facebook{width: 150px;    height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBH0TzDv41CWN7eJQWckAPM4gS_XGiAjB-SK0OUa6w2kzTpjDtVkN8CV-UN-v15vlklgSJ9x84wef4C3OQVyTzPD9sjHmexBTr73TtUL2waxDCmTiy8JmvZkx71l3g38E0KpkBmFGM6EkW/s1600/facebook.png") no-repeat center center;}#jocial .twitter{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSQOp07neDHkdQYzjMl7EugQWlWeNYMknbrmKb1bg_dAV4Bt7vFtb_AXAoC4QDEqFkR9cWVuTW2xGLjirJrwCzqM3BMdcoaJUyps8Fe7nqgkvJ9oLFRz9EuznF1MWZBgjdrWjTg8FLQAP/s1600/Twitter.png") no-repeat center center;}#jocial .googleplus{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ARYLrss9T3EpxUj7QZdNAgJPOhnBqjdSUVznxw_S8_cOvXxiS9K2KE0T-DQf_8tQe4qM2ivdW_xbmaI6zmi7gu2B_kvF61bEEUtklYcpO_g7MTC2SppTzlaGlVdrlZ898vaMeSs4HfBa/s1600/google+plus.png") no-repeat center center;}#jocial .rss{ width: 302px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSD6dkSJFGIyaMJmR1ZQhYiuRSCw9zdasLCzLX6RULx3wBMXwt8RYGADeagMIMQN4dIBOABRsRHBLzkAfguE96OM_eM9jHK6SGBgV5Ca0LzwzFo4tuXN5C-bo2ZfdbuklK-Xzmo2T7xuo8/s1600/rss.png") no-repeat center center;}#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYSQOp07neDHkdQYzjMl7EugQWlWeNYMknbrmKb1bg_dAV4Bt7vFtb_AXAoC4QDEqFkR9cWVuTW2xGLjirJrwCzqM3BMdcoaJUyps8Fe7nqgkvJ9oLFRz9EuznF1MWZBgjdrWjTg8FLQAP/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ARYLrss9T3EpxUj7QZdNAgJPOhnBqjdSUVznxw_S8_cOvXxiS9K2KE0T-DQf_8tQe4qM2ivdW_xbmaI6zmi7gu2B_kvF61bEEUtklYcpO_g7MTC2SppTzlaGlVdrlZ898vaMeSs4HfBa/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSD6dkSJFGIyaMJmR1ZQhYiuRSCw9zdasLCzLX6RULx3wBMXwt8RYGADeagMIMQN4dIBOABRsRHBLzkAfguE96OM_eM9jHK6SGBgV5Ca0LzwzFo4tuXN5C-bo2ZfdbuklK-Xzmo2T7xuo8/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}</style>

Simple Metro style Social Subscription Widget
<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3KPZ9HycVuW3K1lNkuhHpQA2dga2nMh2ZKpSqdlCqcnbFtwIzwN2uk4iAPSVeGoWvnsESnPtk7pJBUhCMY5-a75dQ70BXq6RHApbtuRvEhwrXd8h-A1Rb_eYCrHHYoBb1-lRxtcGhtWmz/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMq-j7tdHZ-tVXdczH0LUxF6kUEF_TgykQvUPt_DxJEUOY-B0r_R2O6IS5vyTUj8nsdRJbeh1GuDJmu8aK8g5WXh5_W9KuhQ3oCgXm5meCS_TDlMhaGuRR6vSdHL4QTMJPYsoqrQ3j_kFB/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZejYIayOpt5r9rAK_hXYS6iulqNkhnVAK3ZKBFG30Sow7iS78lW7H23zREj7fFyjrSv_ChCVAwf9sSJJecHyugFGGR73FiiYBYAVt_Jmio4vb00E2BYFlXL4taE2p2t3PsHkP0C-VLKxl/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8iqWCGKAvq-EJLTWfhOOFSywKGYaRDflaMUZJAFlsos3k6Fk1hFyMcth9G4igzbiXu0mRYwg5uOXviLHtlSFBRMwovFLadHI8_CguCLmdhuCzDn-V3NY3ycEEZZhA7JJfjj7YuhMF_cv/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}p#rb_socialicons img { /* Spinning Social Icons Widget By www.digitalhubinc.com/ */    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}/* Spinning Social Icons Widget By www.digitalhubinc.com/ */</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form">    <center><p id="rb_socialicons"><a href="http://feeds.feedburner.com/digitalhubinc"> <img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBpIXoQrXX3qz5vKKoOo8UFE67ilEfuyLYDlBZEQ94aZmsGlT8jCr4TeCsitiFv_ePxGgp0RdRa1dr-iSOtIySxNTuz_HY9bUsPFZZGQXMvIIYU1fA8g5soQatchRwYq72lhcyZDj0tEB/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzOZUPzpR3KVPUqItVkHW5gapThsc7ANA8uCr2Bv6zan0iy5Z55oj7XLANvne6Ty6Tdtbn7thAOwvmyuY_C5Tjjs20xYNhKH1wNmQ1kb_IBweJ2P0VW6P6zJt6hIQUgn4GRknTrodGEIlD/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBpIXoQrXX3qz5vKKoOo8UFE67ilEfuyLYDlBZEQ94aZmsGlT8jCr4TeCsitiFv_ePxGgp0RdRa1dr-iSOtIySxNTuz_HY9bUsPFZZGQXMvIIYU1fA8g5soQatchRwYq72lhcyZDj0tEB/s1600/rss-inactive.png" /></a><a href="http://facebook.com/digitalhubinc"><img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStrLU8GMPutT4J5UEycnwLBzvy5fpFrpBGOg52i1ZrL9yUyZtJ2L2S2DBqROcTizs3h5FIob9zDS0YHSc6Nxw1rpzQ9Un03gWWZZRicfuNWlak-dXfQfu9g-FmSaNDLtvy5RKdPPQlD-2/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxpSJ3sBrJJmll22D34GE1NP40xBm8dUNrDOPRM63hw2cSkcEyxf5fZvL-G9X24cJQLFO2LWAkxIz28y-b36Uep-SHbgtd7h6hkE7DU1v14ixySPPiZde2QkVt-sxrpeO4E43W0qmGipRV/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgStrLU8GMPutT4J5UEycnwLBzvy5fpFrpBGOg52i1ZrL9yUyZtJ2L2S2DBqROcTizs3h5FIob9zDS0YHSc6Nxw1rpzQ9Un03gWWZZRicfuNWlak-dXfQfu9g-FmSaNDLtvy5RKdPPQlD-2/s1600/facebook-inactive.png" /></a><a href="http://twitter.com/digitalhubinc"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxb0yBafpcnZW8zZzgiWXGJ3Bwfo0piEo-O3E9MxVdCrGQfGUOEuEzEvzHGmbFnz8qNaIAL2usRbG5UlZoF0ah0bsOPyO7LZIIk3_B7wiPNtuIM2yYLluphmHW3m4GFs5zTzXfaogWbp2/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihmboXBBzH8_5oL70iMhp5dVKIDCbnlqoAJ8g6MvbEtLru9WgiIFfbjoMPytNaN_G1JXmi5fGkASVJJwLVAO31nVCXI1GO_O7s4ieqfaQrPbjge_HCIgaFXrAP5x9FArm_149TkwZRIaRT/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxb0yBafpcnZW8zZzgiWXGJ3Bwfo0piEo-O3E9MxVdCrGQfGUOEuEzEvzHGmbFnz8qNaIAL2usRbG5UlZoF0ah0bsOPyO7LZIIk3_B7wiPNtuIM2yYLluphmHW3m4GFs5zTzXfaogWbp2/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/116441114801311321617/"><img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDcCnMBolZy3wH4nVA4ZBkktT1O74lVLD6OR9QMg-E4oPmnP7rnEl-tJpyLMfhbMomeB_D1mSxNf0UNwdTSqTLZP9Og8GMgwRSgPWffL8QbfBb9XG0dz0MchxWXTSv1rjTUZrY3d84CB7Q/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurvkBTJKqKA9VahTAbE_LsMlVoaqG8noHL5KkqLeQoEpqRg8t8qz4ZvqOFMzidNFAKS_VLiVzsqKmOjsmOS6pFQRQyYcDLMCs3FaRpGP09lNlap1sGLZwzaeg7vWIMImDhmZP-DXxqPNr/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDcCnMBolZy3wH4nVA4ZBkktT1O74lVLD6OR9QMg-E4oPmnP7rnEl-tJpyLMfhbMomeB_D1mSxNf0UNwdTSqTLZP9Og8GMgwRSgPWffL8QbfBb9XG0dz0MchxWXTSv1rjTUZrY3d84CB7Q/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/digitalhubinc/"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jYmGpi4TC27NKM0SzSE0kQeoA6ACBQxB6bGdxOsnREBo_irOJ6fAxfu7t2UdjMBAT1rN3pmUQScmMUvII65ZEo0_EgfCsMmclgzQUHkyoxo19xB-zF1AxjcHFjUappwWNJqBlyZpOV-s/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-bsXbvNfXnitx876H_LjdDCT_Nr78locAg3KZ5HCZ7DlBs1gHNaQWqsGBslCVy-SIGiAoFBWlyxzwKHPG_OwRLbc8dFZk23extRBV45Lv_Z17ihmtBQF4eUvqvX4crkgZNzuOA-h5G4as/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jYmGpi4TC27NKM0SzSE0kQeoA6ACBQxB6bGdxOsnREBo_irOJ6fAxfu7t2UdjMBAT1rN3pmUQScmMUvII65ZEo0_EgfCsMmclgzQUHkyoxo19xB-zF1AxjcHFjUappwWNJqBlyZpOV-s/s1600/pinterest-inactive.png" /></a><a href="mailto:digitalhubinc@gmail.com"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDvzDgYNTcht_6Ib13YpAh5QcQMV9bf2XihW53ZpzBJ4rJwOnRZMjrr0BSvU1Y4mod6UBNZPEuadiHMTTqTVzRdhpl_mOIgT6SWIpsKc8M8Ii91bqyThXZcFulRUXEbF2CwgDnsNfLOb5/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9T_cENq-yc1rgI6R6TqWCIBw0uIdUgNDl9woP02y1K-k0u9c8raWLEgPqArzfZ8_FiJiKLxsN9G2qEkKDMoHrViY9TajARweI3E_ncvi2pNU6N7Zrg-b9GMNtFeb-mQh0WfcYKnQGxcj/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDvzDgYNTcht_6Ib13YpAh5QcQMV9bf2XihW53ZpzBJ4rJwOnRZMjrr0BSvU1Y4mod6UBNZPEuadiHMTTqTVzRdhpl_mOIgT6SWIpsKc8M8Ii91bqyThXZcFulRUXEbF2CwgDnsNfLOb5/s1600/email-inactive.png" /> </a></p></center>  <form action="http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="digitalhubinc" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div><style></style>
  • How to add Metro UI Style Menu For Blogger


Install It Into Blogger
  • Go to Blogger.com >> Template.
  • Select Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> and above it paste the following css.

/*===METRO UI Menu==*/
body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}
/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
Now it entirely depends on you where you wants to place this menu. So paste this code wherever you want it to appear.

<!-- mblmetromenu -->
<div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlq7VvUqLgyJiYn6YJqMrMTLCRwAzpIgpIGeQhdXz97WiATrxuQallCIPz6Fdcs0pGQPeXsjLEi6wRUJhWjTGyOtC-aHlnCS7JWl-S2ePcmrpnBTczqyDwpbhEGWCpHQhSkKbTSAbh8oE/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
 
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhURg3mT-iwYDD1MaiL3eGzVYlG_slMHcb8OsbszVmtwoLCAW0NiVp1dVZJvdkp8PXQi0dNUPXw9zxpfXMlCqim2soU54whOaU4AIR7n89zNTlt3NXHAXpEiLXVygOWtZxVJlU8wiuCI/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
 
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE12pKPkaSry-izQcbtLsXlpO4rJe04lqeHmEEWAziv8yKwlU_Kfe9AsTWVnDHAPQOb9o8xe8lL1wzg8kZiN0Jh0uL-DzUINklSfo3BjJ6kHoCiwM3ISUVxJZY9dlvIIQWTFLXn1lDSB4/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
 
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtptiZHvPuu4CRXlXvOp-hlgq3afY8rNAeD_C7RE8X1hZXk-0GlSA_kJa_shlVFA-7gMJcOKcXB8IFebH2oFYTsP4QpuVmfoLSUCsPDteo6m3CQpyLrL1j7OAUYWBGwCxDDd-uRejw6G4/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
   
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK9N80MvL6zGaUPVeY_HN4wYqAqy6QKoK2rB-jmPnLjBgt7GIeGDdyefbSUrR8-z94EKSDkQNw1_DCkSRr8gLcAmajT_LX46fwwg0fajQOMsZgwimIwlYV1Bduna75QI-3xrsa36MWqg/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3eotdg8X79cnua5iwF191MBBuYOi9y8cObHvDViN4StGg-i6VoUZRkCxEbb_jmI5D137JUIQOzazymIcCDN8Rbapf_Wb5UEhmd01EDgkDbsCUfZyOX-g1lWhy5SX81hoPOjs6G6MlLXU/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
   
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1Uwpsx8UqXY15zBlCznRbK4GrjpWuWHi57VYID9G-lyElL8XCkkfsHG-wrr5_gwyS5W9Eo7UPz3afMjIfRkrbSydQwjN8105mkmh6Oj8mlEJC2owVYQRXs63W_xUX8ooNTDWtlnPqhg/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PSbzkyS-uFg7QLjL0UPh-64Rh9h1VS11OwwB-RTEmHVYk_8Phrq-ElWI0Ewvs3n0bK2tmscO1z6EbKFSD97SLvdh-hjeD6QAvlzhSXFXnIwuRXcXsVlS6gnKu3Si_Aq19HCegNOqMNo/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig370_i03cl1ZYJyt6fJakfj8uStLv4KHMsJdpve4-rkNWGWR8hyphenhyphenX2fx2szeMMViHUjsyP4GX-EMoybbcI665PZjR8ghlbtp30HXbouqGHxwmnM9uaRpmgU7RMA-JE-AT1HePrkH840FE/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD7Cn1cUJpjyYlK-YLDgLABHDhsH7HXPjTlD_2PGZBhUZZ-hYaGdBeQlqA2HM5Hj0Rhobh15FIbdsSkwqrr7sPTvQXIGJEAjrx732gnk5p-JdqesucS0KTV_aChK1TeJvxHCCiHYzYvU/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
   
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://demooaxe.blogspot.com/" class="gradient">
<img src="https://lh3.googleusercontent.com/-wSxu4PbMPko/UZSTgEJFCWI/AAAAAAAAAGk/CSoTV_Kr8C8/w506-h281-o/Bloggeraxelogo.png" alt="" />
<span class="light-text">Bloggeraxe</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu --> 
And now just edit the above code & save all code.

End.
 I hope you enjoy this Metro style social Widgets. If you like this widget then comment below and share on social media.



Mohan Singh

0 comments:

Post a Comment

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!