ALL MOBILE DRIVERS: Menu Bar

Responsive Navigation Menu With CSS3 For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"> Responsive Navigation Menu With CSS3 For Blogger </div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzFrarUmm35V_OgdERgynoljj4ZGXlaob4-wn9wGkijshunMzKj0a2AZ6WdAVQZHbXPgWqnYrGD5LzL1C0CLqil50mSAzYP4u188rdpzAZMXP-wOvMzNPRBBA96qdl6NtsT6hm2kIprlY/s1600/responsive-menu-css3+%281%29.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzFrarUmm35V_OgdERgynoljj4ZGXlaob4-wn9wGkijshunMzKj0a2AZ6WdAVQZHbXPgWqnYrGD5LzL1C0CLqil50mSAzYP4u188rdpzAZMXP-wOvMzNPRBBA96qdl6NtsT6hm2kIprlY/s1600/responsive-menu-css3+%281%29.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div> Responsive Design help blog to fit on every screen.My friend recently created a responsive design blogger template which you can buy it from here.In this tutorial we will create navigation menu with new feature of Css3 media queries.This menu change it design on mobile devices and in small resolution screen it make itself grid.Thanks to freshdesignweb for creating this awesome menu. <div style="text-align: center;"><a class="gray-button" href="http://jsfiddle.net/Ksqz7/embedded/result/" target="_blank">Live Demo</a></div><h3 style="text-align: left;">Adding This Menu To Blogger</h3><div></div><div>For Adding this menu to blogger we need to paste some code So follow below steps-</div><div></div><div><ul style="text-align: left;"><li>Go To Blogger Dashboard</li><li>Click On Layout Tab</li><li>Now Add HTML/Javascript and paste following code inside it.</li></ul><div></div><div><blockquote class="tr_bq"><ul id="nav">     <li class="current"><a href="/" title="Home" >Home</a></li>         <li><a href="#" >Services</a></li>         <li><a href="#" >Experience</a></li>         <li><a href="#" >About Us</a></li>         <li><a href="#" >Contact</a></li>  </ul> <style> #nav { margin: 0; padding-top: 0.85em; width: auto; font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; } #nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;} #nav li:last-child { margin-right: 0; } #nav a { display: block; color: #FFF; text-decoration:none; } #nav a:hover { color: #484a50; border-bottom-color: #484a50; } @media only screen and (max-width: 767px) {     #nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; }     #nav { margin: 0 6% 0 0; padding: 0; }     #nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }     #nav a { padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHcmK9-rSItTvwWD4bkITRcolbgJNITFyrTGwQU2JqPOIKHwXk_0kt_SJokcHtUQ_qfCQ2tuYftd05YUHM9ma9YGlsSOJNbSTsRcavuasRbZ949vo8wV6vDafOdhrx5E_XyHnXwjhXgw/s1600/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }     #nav a:hover { border-bottom: none; } </style></blockquote></div></div><div><ul style="text-align: left;"><li>After Adding This Code Click On Save Button.</li></ul><div></div></div><h3>Adding Meta Tags</h3><div></div><div>Meta tag to control layout on mobile browsers a typical mobile-optimized site contains this type of meta tags, To Add this meta tags to blogger follow below steps-</div><div></div><div><ul style="text-align: left;"><li>Go To Blogger Dashboard</li><li>Click On Template Tab</li><li>Now Click On Edit HTML>>Proceed</li><li>Find <head> and paste below code above it.</li></ul><div></div><blockquote class="tr_bq"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/></blockquote> <ul style="text-align: left;"><li>Now finally your blog is having a beautiful responsive menu Click on Save Template Button And Preview your blog.</li></ul><div></div><h3 style="text-align: left;">Customize This Menu</h3><div></div>Replace # with Link.Replace Red Color Highlighted word according to you.To Change Background color of this menu just edit blue color highlighted text. If you want more help from my site then comment your problem below I will try to resolve it as soon as possible.</div> <div class="separator" style="clear: both; text-align: center;"></div></div>

Responsive Navigation Menu With CSS3 For Blogger

Responsive Navigation Menu With CSS3 For Blogger Responsive Design help blog to fit on every screen.My friend recently created a responsi...

Smooth Sliding Social Media Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohHoYhcUuDbunTnhZQ1tU3o7u31n0MqWAdFR3MLxCzG3az7UdcZQNHa1v9iTkvlQdSYqssuo43-Gb_pASBila_4pX7j3Jt_n-gHJyzrX-0eQRgVGKpVP79bd3Uyk9evNAFkInIcynaJmH/s1600/select-layout-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><div style="text-align: left;"></div><div style="text-align: center;"> Smooth Sliding Social Media Widget For Blogger</div><div style="text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTI1ZsOzM1qpHSqg9BNTbEuDMLmTVYItsiwY379QosCS-a88KdqSkxOYSmFqikEoEC8xsRXATZ0ZWighj7b6cjuiV1hEpyQatuNVu42miZ1IpZWw84PdxAxKqssl8Qw4CtPLa5OW4at4LY/s1600/Smooth-Sliding-Social-Media-Widget-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTI1ZsOzM1qpHSqg9BNTbEuDMLmTVYItsiwY379QosCS-a88KdqSkxOYSmFqikEoEC8xsRXATZ0ZWighj7b6cjuiV1hEpyQatuNVu42miZ1IpZWw84PdxAxKqssl8Qw4CtPLa5OW4at4LY/s1600/Smooth-Sliding-Social-Media-Widget-for-blogger.jpg" /></a></div> In this tutorial im gonna  explain how  to add  Smooth Sliding  social  media  widget  for  blogger.  By  using this widget  you  can  link  your   social  media  profile Facebook, Twitter and  Rss  Google plus and pinterest. 1. Log in to blogger account and Click drop down.  <div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohHoYhcUuDbunTnhZQ1tU3o7u31n0MqWAdFR3MLxCzG3az7UdcZQNHa1v9iTkvlQdSYqssuo43-Gb_pASBila_4pX7j3Jt_n-gHJyzrX-0eQRgVGKpVP79bd3Uyk9evNAFkInIcynaJmH/s1600/select-layout-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohHoYhcUuDbunTnhZQ1tU3o7u31n0MqWAdFR3MLxCzG3az7UdcZQNHa1v9iTkvlQdSYqssuo43-Gb_pASBila_4pX7j3Jt_n-gHJyzrX-0eQRgVGKpVP79bd3Uyk9evNAFkInIcynaJmH/s1600/select-layout-blogger.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div>  2. Now select "Layout" Like Below. <div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7WG7HwMcQUifMUZ5JglSMIBHSTAgqKs3C0Q1V459i1p50CrvGBTTKtNpgmWaLNBCG04HiA2muNm9R0L1-B0E7_LhCxlF7C3ib4pQJSsgiwj4G2499a8HeHm6i8b4ziedMbdelrlzkJfq/s1600/layout.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7WG7HwMcQUifMUZ5JglSMIBHSTAgqKs3C0Q1V459i1p50CrvGBTTKtNpgmWaLNBCG04HiA2muNm9R0L1-B0E7_LhCxlF7C3ib4pQJSsgiwj4G2499a8HeHm6i8b4ziedMbdelrlzkJfq/s1600/layout.jpg" /></a></div><div class="separator" style="clear: both; text-align: left;"></div>3. Click Add Gadget and select 'HTML/Javascript 4. Paste below one of below code. <div class="separator" style="clear: both; text-align: center;"></div><pre style="background-color: #9fc5e8; border: 1px solid black; height: 1000px; overflow: auto;"><style> .btrix-social-slidebox { font: 16px normal 'Denk One', sans-serif; display: inline-block; position: relative; width: 95%; max-width: 200px; padding: 12px; } .btrix-social-slide { width: 95%; max-width: 280px; padding-top: 8px; padding-left: 8px; padding-right: 8px; } .btrix-social-slide a { text-decoration: none !important; } .btrix-social-slide ul {margin-top:-5px; margin: 0; padding: 0; list-style: none; } .btrix-social-slide ul li {margin-bottom:15px; display: inline; margin: 0; padding: 0; text-indent: 0; margin-left:10px; } .btrix-social-slide ul li a.facebook { border-left: 65px solid rgba(59, 89, 152, 1); color: rgba(59, 89, 152, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook:hover { background: rgba(59, 89, 152, 1); border-left: 0px solid rgba(59, 89, 152, 0.1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.twitter { border-left: 65px solid rgba(64, 153, 255, 1); color: rgba(64, 153, 255, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter:hover { background: rgba(64, 153, 255, 1); border-left: 0px solid rgba(64, 153, 255, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.gplus { border-left: 65px solid rgba(219, 74, 57, 1); color: rgba(219, 74, 57, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus p { margin: 2px 20px 0 -50px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus:hover { background: rgba(219, 74, 57, 1); border-left: 0px solid rgba(219, 74, 57, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.pinterest { border-left: 65px solid rgba(174, 45, 39, 1); color: rgba(174, 45, 39, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest p { margin: 2px 20px 0 -50px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest:hover { background: rgba(174, 45, 39, 1); border-left: 0px solid rgba(174, 45, 39, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.rss { border-left: 65px solid rgba(255, 102, 0, 1); color: rgba(255, 102, 0, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss:hover { background: rgba(255, 102, 0, 1); border-left: 0px solid rgba(255, 102, 0, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } </style> <div class="btrix-social-slide"> <ul> <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/s2free">12K+Facebook </a></li> <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/s2free">5K+Twitter</a></li> <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/113992072715592507851">4K+&nbsp;Google+</a></li> <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/s2free">2K+&nbsp;Pinterest</a></li> <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/x">11K+RSS</a></li> </ul> </div> </pre>You have to change the counters manually, just change red color number according to profile. Replace bloggertrix with your Facebook username Replace bloggertrix with your Twitter Username Replace 107955298793879607964 with your Google plus ID Replace Username with your Youtube Username Replace bloggertrix with your Feedburner ID 5. Now save your HTML/Javascript'.     You are done... </div>

Smooth Sliding Social Media Widget For Blogger

Smooth Sliding Social Media Widget For Blogger In this tutorial im gonna explain how to add Smooth Sliding social media widget for ...

Add Stylish Metro UI Premium Navigation Menu in Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Stylish Metro UI Premium Navigation Menu in Blogger </div><div style="text-align: left;"> </div><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKgDD89Jqp4t85cT6y83Z-iWI0SRIBMUTVylOc98JYeNSxeiYiH51gD_ZBxLpRceupuetiqYJjS5xIftS5wq7bJYB_x9x0E0GcN1IGhJKKzpYalhG7ODlfCimbQAS7LEiF4A2e_fVVhsm/s1600/Stylish-Win-8-style-Metro-UI-Navigation-Menu-for-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKgDD89Jqp4t85cT6y83Z-iWI0SRIBMUTVylOc98JYeNSxeiYiH51gD_ZBxLpRceupuetiqYJjS5xIftS5wq7bJYB_x9x0E0GcN1IGhJKKzpYalhG7ODlfCimbQAS7LEiF4A2e_fVVhsm/s1600/Stylish-Win-8-style-Metro-UI-Navigation-Menu-for-Blogger.png" /></a></div></div><div style="text-align: left;"> Are you bored with your website’s navigation menu? Does anyone want to revamp his unappealing navigation menu into Windows 8 Style Metro Menu? Navigation menu is one of the core elements of a website because without a user-friendly Menu visitors can’t search the content in depth. In this situation, an ugly Navigation Menu could act a piece of garbage. Therefore, it is essential to have an elegantly style Navigation Menu that attracts a person like a bee to a honey. To provide more power to Blogger users, we have created a new windows 8 look like Metro UI Navigation menu for blogger enabled websites. It has tons of features which we will discuss in today’s article.  <h4 style="text-align: left;"> What Is Metro UI Menu </h4>  If anyone has experience the interface of Microsoft Windows 8, or the new range of Windows Smart phones, then this METRO UI menu is not a new thing for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is still chaotic about it, then he can check out the following screenshot.  <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a5zGvVm0QgV9bhcXWLxquG0jPgHz7MzkiH6Mx6ZNeK9I9an5Lobs2cTBxOOLboNzRzzw-_NbUwQnxmOAJx3K56TnsLrrQ0yeb3AalyuddZsJU7RIDSzx0FUE0YEtGZA-GLvnQ_HXEow/s1600/METRO.png" style="color: #0084ce; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: initial;"><img border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a5zGvVm0QgV9bhcXWLxquG0jPgHz7MzkiH6Mx6ZNeK9I9an5Lobs2cTBxOOLboNzRzzw-_NbUwQnxmOAJx3K56TnsLrrQ0yeb3AalyuddZsJU7RIDSzx0FUE0YEtGZA-GLvnQ_HXEow/s640/METRO.png" style="border-width: 0px; list-style: none; margin: 0px; outline: none; padding: 10px;" width="540" /></a></div><h4>Where The Metro UI Menu Would Appear In Blogger?  </h4></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;">It depends on a person that where he wants to utilize this Menu because it is so flexible that it can take shape of any theme or template. However, it would be ideal if anyone places this menu at the top of his website by doing that, visitors can easily access it without facing any hesitation whatsoever. We have attached an interactive Metro menu below so don’t hesitate to try it. </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE9Y5cFIDGqC7g_uxGCmouVRp4EWYzRG3OBTTuBAXX9VWb-mpeQV6mdHhxymc1CVCtOVfS5iJ97GTNlluWJ2i1RXGCcFOCZXAEy772tb7PO3GWRJqgD96e3zQNCDtqh6xHlbvE-Bw2vo/s1600/Untitled.gif" style="color: #0084ce; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: initial;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE9Y5cFIDGqC7g_uxGCmouVRp4EWYzRG3OBTTuBAXX9VWb-mpeQV6mdHhxymc1CVCtOVfS5iJ97GTNlluWJ2i1RXGCcFOCZXAEy772tb7PO3GWRJqgD96e3zQNCDtqh6xHlbvE-Bw2vo/s1600/Untitled.gif" style="border-width: 0px; list-style: none outside none; margin: 0px; outline: medium none; padding: 10px;" /></a> </div><h4>Step To Create Windows 8 Like Metro UI Navigation Menu In Blogger.</h4></div><div style="text-align: left;">The steps mentioned below are ideal for those bloggers who have less knowledge about HTML coding. Following instructions are extremely straightforward so anyone can easily apply them. Follow following instructions correctly. <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">Step#1: Adding CSS StyleSheet:</div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Go to Blogger.com >> Template.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Select Edit HTML >> Proceed.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Now within the template search for ]]></b:skin> tag and just above it paste the following CSS Coding. Once, everything is done Save the Template by pressing “Save Template” Button and proceeds to the next step. </li></ul><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"></div><blockquote class="tr_bq">/*===MBL 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; }</blockquote><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">Step#2: Adding METRO Menu in Blogger:</div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Now it entirely depends on a person where he wants to place this menu. The ideal place of adding it would be just under the header. Therefore, paste the following coding anywhere you want to see this Menu on your site.</li></ul><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><blockquote class="tr_bq"> <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/AVvXsEgGyfGrlMini3wpdtZXgmgg9NQY_j4Txl2-a4ogHeNjO03krL_GEmDgyb7AcJHhgo_o1M_WrTZwqWR41RLNy9SlOIIhyphenhyphenoaJRYU5xYE4V_X73lyeoHBDm972GGuvDBjhYwXU2ttKuyRQgNQ/s1600/home.png" alt="" /> Homepage </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/AVvXsEhqF0w0fdYApihMo9juxghHWmM3NESK73fH4N4z1M-f33EscHbc74perZTKF_nSQ55HX6O_T0p2hW7-zTjdT2jNndGFODElQxMDq71_11o3z_CDb8OU3DFNc6Yj9nm7yYor-YWkAzMcdoc/s1600/messanger.png" alt="" /> About US </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/AVvXsEhSMOzaT_BVPNjbGpjddbwkEs4pr2pznDZr-zTQMTCr4WV6McZgiCs9CVYvXdB5Rqi-Z93KPS4xgcgxJmkxPzI_BOt9zMm4JAdhpCQrZGGWCXruyP0kGak_1YBqy8K6F-dhmx4XQmQPIjk/s1600/rss.png" alt="" /> Rss Feeds </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/AVvXsEjkft6G4hNUEfh-Eercj7LyOrv5_mJVLHM7Wyn-WGiWP4PRntGLP7PobyeaK0zgKbUbbH3YxjgC51BELMzenGUtBOMCIJH4becsnWIQFcScgCo0fP0XqHzC8eI5FZ-FcpydSzI1Grj-Plg/s1600/search.png" alt="" /> Search </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/AVvXsEgxReB7wvpC3HSCpG3dtgzdTgXmVBOrN5tuJ3JQspy5RgBKCPci4-KEvcQPps713Nl6ebZbQpA9g8UiKBBqZf24-i5eWcClwQn8y7mkC0UgTAmuHfITbRqb4RzERr58kHRf_7hjA0X79v8/s1600/mail.png" alt="" /> Contact US </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/AVvXsEhOw3kA0cuNqynm8_rSAak1DS4WoJu5rgxom3z5wxQ9TQblZ0H-lLpeI2zSdJOPh6nzeacczfWnLouxLqvhk3Q_UUBQwz4qs4kdBEaXiVflbgAG0oviEZIdjaT7tn9xBsBJaNDwRi_DSVQ/s1600/help.pn" alt="" />  Get HELP </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/AVvXsEjaTF89JEKTYjTRHk-yjN2HA9dZ56riiH3yxXl-hkwfms1mpxYeJ3IwyPB9kmXMZDt9ssfywz4-d10wNho2Jm45acRcXqrb23qd1WYlgsF2O4kzeO21_OiKL1QUhb59X7rhTHOk7NTJ-qM/s1600/youtbe.png" alt="" /> YouTube </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/AVvXsEhdfPgvMc4gQiuust3ITdLa4C4ZbTbBt_Wp4vXTmLBzMbXluQziePg1VWfgi5nUaflBP68Yy0uuDdNVNNoqDkAX3KNasJ525ssm2XiLu2xND1ORPTZwvtUe0VureV8R_NnQ6n3gq7ZYeBg/s1600/face.png" alt="" /> Facebook </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/AVvXsEg2zkA0xyRwluLjEpv_HGSpMZa09edKhYIwmA6KBq7JrG8RBtS2tbhCv0t5o0HTsW237d8mq-JzP_Nin7OFQgJUCcKmO7j9R2T-38N-Yp_R1ADTelIF-_o_IxMUsC4k4kUpmw0Zf7EqZQs/s1600/photo.png" alt="" /> Photos </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/AVvXsEidDFATpbROK65FQ1l1J6lT-sfaf-6wlDJTRJYP4xBB-pSDbieC5MpKcsnI8opk8a2wLG9W0KL0EB941J6jcDgqdu6jbi82zQUWtQMzVs5SHJQ1VGjyW9ofe3xyQUocdSrFp3ZOpkFcn6M/s1600/music.png" alt="" /> Music </a>  </div>     <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"> <a href="http://www.muhammadakbar1.blogspot.com" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAW7bnUhWtg75tdtmL-EgeeR5XKYc6KqgPVnGgmMjdygUqI7xodltwefpUjOcXTgnqyPgIiqUD0rTZjc5ZzQDcQl7dBmlmnXcwKefyUZ7Kfv1NnlwUmjl4-TyLjuJxeBkoFfIOydjfW0/s1600/MBL.png" alt="" /> Uhammad Akbar </a> </div>          </div> </blockquote></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">All Done: Indeed straightforward? Well, that’s all. The responsive Windows 8 look like navigation menu has been integrated in your website. Remember: This Menu can be used on any Platform that supports HTML or CSS i.e. WordPress, Jhoomla and etc.</div></div></div>

Add Stylish Metro UI Premium Navigation Menu in Blogger Blog

Stylish Metro UI Premium Navigation Menu in Blogger Are you bored with your website’s navigation menu? Does anyone want to revamp his unap...

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s1600/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s320/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" width="305" /></a></div><div style="text-align: left;"> </div><div style="text-align: left;"></div><div style="text-align: left;">I have Posted My First Two Creation Using CSS3   Earlier In my Posts Before,, Those are</div><ol style="text-align: left;"><li> <a href="http://s2free.blogspot.com/2013/05/animated-metro-ui-social-profile-and.html" target="">Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..</a></li><li> <a href="http://s2free.blogspot.com/2013/05/simple-and-stylish-metro-ribbon-ui.html" target="_blank">Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..</a></li></ol><div style="text-align: left;">So after Working on Those Two <a href="http://s2free.blogspot.com/search/label/Metro%20UI" target="_blank">Metro UI</a> and Ribbon UI Widgets today  I am Here With One More Metro UI Win 8 Style Drop Down Menu Using CSS3..  </div><div style="text-align: left;"> </div><div style="text-align: center;">Demo of Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</div><div style="text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://s2freelab.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeg62wF9XTW-Qg1YQr1-EEIexxWGOILgbuIbLnMUrPwLFvxn9XKgdFAreQMaRxMga2wziuZerIogUfyWXeKYi4vq1J8M2cIUBCL6QQfqliw6iUxkvWS98rhT0tBl5H1acaCbLBPmWpyERC/s1600/demo-button-s2free.gif" /></a></div>  After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site.. <div style="text-align: left;"> </div><h4 style="text-align: left;"> How to Add Metro UI Drop Down Menu With Sliding Effect Into Your Blog: </h4><ol style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/home" target="_blank">"Blogger"</a> and Go to  your Blog Dashboard..</li><li>Now Click On "Layout" In Left Side of your Blog..</li><li>Now Click on "Add Gadget"..</li><li>You Will Get Many Widgets..Scroll Down to "HTML/JavaScript"..</li><li>Click On "HTML/JavaScript"..</li><li>Now Paste This Below Set of Code in it..</li></ol><blockquote class="tr_bq" style="text-align: left;"><div class="codebox"><style> /* demo page styles */ .mjn-tab1 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png) no-repeat center center #4d90fe; } .tab1:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png) no-repeat center center #3682FC; } .mjn-fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png) no-repeat center center #2A82D9; } .mjn-fb:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png) no-repeat center center #1f69b3; } .mjn-tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0; } .mjn-tw:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5; } .mjn-g { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png) no-repeat center center #DC321E; } .mjn-g:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png) no-repeat center center #c53727; } .mjn-rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png) no-repeat center center #E9A01C; } .mjn-rss:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png) no-repeat center center #F9A914; } .mjn-tab2 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png) no-repeat center center #35aa47; } .mjn-tab2:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png) no-repeat center center #1d943b; } .mjn-tab2sub { background: #35aa47; } .mjn-tab2sub:hover{ background: #1d943b; } .mjn-tab3 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png) no-repeat center center #852b99; } .mjn-tab3:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png) no-repeat center center #6d1b81; } .mjn-tab3sub { background: #852b99; height:70px; } .mjn-tab3sub:hover { background: #6d1b81; } .mjn-tab4 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png) no-repeat center center #d84a38;; } .mjn-tab4:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png) no-repeat center center #c53727; } .mjn-tab4sub { background: #d84a38;; } .mjn-tab4sub:hover{ background: #c53727; } .mjn-tab5 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png) no-repeat center center #555; } .mjn-tab5:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png) no-repeat center center #222; } body {     background:none;     margin:0;     padding:0;     font-family: Helvetica,Arial,sans-serif;     font-size: 11px; } .mjn-metro-menu {     position:relative;     background:none;     width:500px;     height:90px;     border:none;     margin:20px auto;     padding:20px; float:left; } /* navigation menu styles - main styles */ ul.navi {     position:relative;     z-index:100;     padding:0;     margin:0 0 0 60px;     list-style:none;     width:auto;     height:30px; } ul.navi > li {     width:70px;     height:70px;     position:absolute;     left:0;     top:0;     -moz-transition: -moz-transform 0.5s ease-in-out;     -ms-transition: -ms-transform 0.5s ease-in-out;     -o-transition: -o-transform 0.5s ease-in-out;     -webkit-transition: -webkit-transform 0.5s ease-in-out;     transition: transform 0.5s ease-in-out; } ul.navi a {     display:block;     width:70px;     height:70px;     position:absolute;     left:0;     top:0;     line-height:30px;     text-align:center;     text-decoration:none; } ul.navi a img {     border:0; } ul.navi a span {     position:relative;     top:30%;     font: 14px Segoe UI, Helvetica, Arial, sans-serif;     color:#fff; } /* top line - hover styles */ ul.navi:hover {     height:200px; } ul.navi:hover li#n1 {     -moz-transform: translatex(0px);     -ms-transform: translatex(0px);     -o-transform: translatex(0px);     -webkit-transform: translatex(0px);     transform: translatex(0px); } ul.navi:hover li#n2 {     -moz-transform: translatex(90px);     -ms-transform: translatex(90px);     -o-transform: translatex(90px);     -webkit-transform: translatex(90px);     transform: translatex(90px); } ul.navi:hover li#n3 {     -moz-transform: translatex(180px);     -ms-transform: translatex(160px);     -o-transform: translatex(160px);     -webkit-transform: translatex(160px);     transform: translatex(180px); } ul.navi:hover li#n4 {     -moz-transform: translatex(260px);     -ms-transform: translatex(270px);     -o-transform: translatex(270px);     -webkit-transform: translatex(270px);     transform: translatex(270px); } ul.navi:hover li#n5 {     -moz-transform: translatex(360px);     -ms-transform: translatex(360px);     -o-transform: translatex(360px);     -webkit-transform: translatex(360px);     transform: translatex(360px); } /* submenus - common styles */ ul.sub {     padding:0;     margin:0;     list-style:none;     width:100%;     height:200px auto;     position:absolute;     left:0;     top:0;     z-index:-1;     opacity:0;     -moz-transition: opacity 0s linear 1s;     -ms-transition: opacity 0s linear 1s;     -o-transition: opacity 0s linear 1s;     -webkit-transition: opacity 0s linear 1s;     transition: opacity 0s linear 1s; } ul.sub li {         width:80px auto;        height:80px;        position:absolute;        left:0;       top:0;       z-index:-1;     -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;     -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;     -o-transition: -o-transform 0.5s ease-in-out 0.5s;     -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;     transition: transform 0.5s ease-in-out 0.5s; } /* submenus - hover styles */ ul.navi > li:hover ul {     opacity:1;     -moz-transition: opacity 0s linear 0.5s;     -ms-transition: opacity 0s linear 0.5s;     -o-transition: opacity 0s linear 0.5s;     -webkit-transition: opacity 0s linear 0.5s;     transition: opacity 0s linear 0.5s; } ul.navi li:hover ul li.l {     -moz-transform: translatex(-70px) translatey(90px);     -ms-transform: translatex(-70px) translatey(90px);     -o-transform: translatex(-70px) translatey(90px);     -webkit-transform: translatex(-70px) translatey(90px);     transform: translatex(-70px) translatey(90px); } ul.navi li:hover ul li.c { -moz-transform: translatex(2px) translatey(90px);     -ms-transform: translatex(2px) translatey(90px);     -o-transform: translatex(2px) translatey(90px);     -webkit-transform: translatex(2px) translatey(90px);     transform: translatex(2px) translatey(90px); } ul.navi li:hover ul li.r {     -moz-transform: translatex(74px) translatey(90px);     -ms-transform: translatex(74px) translatey(90px);     -o-transform: translatex(74px) translatey(90px);     -webkit-transform: translatex(74px) translatey(90px);     transform: translatex(74px) translatey(90px); } ul.navi li:hover ul li.r1 {     -moz-transform: translatex(146px) translatey(90px);     -ms-transform: translatex(146px) translatey(90px);     -o-transform: translatex(146px) translatey(90px);     -webkit-transform: translatex(146px) translatey(90px);     transform: translatex(146px) translatey(90px); } </style> <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <div class="mjn-metro-menu">  <ul class="navi">  <li id="n1"><a class="mjn-tab1" href="http://s2free.blogspot.com/" title="Home" ></a> <ul class="sub">  <li class="l"><a class="mjn-fb" href="https://www.facebook.com/yourlink" title="Like Us on Facebook"></a></li>  <li class="c"><a class="mjn-tw" href="https://www.twitter.com/yourlink" title="Follow Us on Twitter"></a></li>   <li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/123456789"></a></li> <li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/yourlink"></a></li> </ul> </li> <li id="n2"><a class="mjn-tab2" href="http://s2free.blogspot.com/search/label/" title="Tags" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Windows"title="Windows">Windows</a></li> <li class="c"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/label/Blogger" title="Blogger">Blogger</a></li>  <li class="r"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/CSS3" title="CSS/HTML">CSS/HTML</a></li> <li class="r1"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Softwares" title="Softwares">Softwares</a></li> </ul> </li> <li id="n3"><a class="mjn-tab3" href="s2free.blogspot.com/2013/" title="Blog Archive" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2013</a></li> <li class="c"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2012</a></li> <li class="r"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2011</a></li> <li class="r1"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013">2010</a></li> </ul> </li> <li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab4sub" href="#">LINK 1</a></li> <li class="c"><a class="mjn-tab4sub" href="#">LINK 2</a></li> <li class="r1"><a class="mjn-tab4sub" href="#">LINK 3</a></li> <li class="r"><a class="mjn-tab4sub" href="#">LINK 4</a></li> </ul> </li> <li id="n5"><a class="mjn-tab5" href="#" ></a> </li> </ul> <div style="clear:both"></div> </div> </!doctype></div></blockquote> <ul style="text-align: left;"><li>Now Click Save and Drag it to your desired position..</li></ul> <h4 style="text-align: left;">Customization : </h4>Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS and other in Red with your Link..  Replace the Names Highlighted in  Pink with your Words appropriate to link given..</div>

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1 I have Posted My First Two Creation Using CSS3 Earlier In my Posts Be...

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover Version 1.1</div> <div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSn5imCO1Fz0M7EutpQGk4Ff2yJIKCAPlgNB_sLvQKAMVvoVgiSAbj53l-5fugFzevO79tJXmSpTzxnphwnNGjCiKaK28PJ5GuSu5kKtSUIqxuHWOLdVNayZU8X7QpB6_J2nxb7cI-8E6Q/s1600/Demo-Of-Shiny-CSS3-Buttons-Gradient-Buttons-With-Shiny-Spinning-Effect-On-Hover.gif.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSn5imCO1Fz0M7EutpQGk4Ff2yJIKCAPlgNB_sLvQKAMVvoVgiSAbj53l-5fugFzevO79tJXmSpTzxnphwnNGjCiKaK28PJ5GuSu5kKtSUIqxuHWOLdVNayZU8X7QpB6_J2nxb7cI-8E6Q/s320/Demo-Of-Shiny-CSS3-Buttons-Gradient-Buttons-With-Shiny-Spinning-Effect-On-Hover.gif.gif" width="304" /></a></div> Make your Blog Stylish With These Buttons As per your blog color Theme or Use it for Demo Click  Many Of you may have Searched before or Searching Now for Download or Demo or Whatever Buttons to use in your Blogger post or Website post.. In my Before Post I have Shared My Own Widget Created for the First time Using CSS3..  So  Today I am Going to share A Beautiful CSS3 Gradient Buttons With Shiny Spinning Effect With Multicolor Buttons..   So are you happy or curious to add this Awesome  CSS3 Gradient Buttons With Shiny Spinning Effect to you Blog or Website post?? Then Let's begin.. Now I will Explain How to add this to your Blogger Post..Just follow Simple Steps Mentioned Below.. <h4 style="text-align: left;">Easy Steps Add CSS3 Gradient Buttons Into Your Blog :</h4><div style="text-align: left;"></div><ul style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/" target="_blank">Blogger</a> and Go to Your Blogger Dashboard..</li><li>Now Go to Template Section Which is in Left Side of your Blogger Dashboard..</li><li>Before Clicking On Edit HTML Backup your Template by Clicking "Backup/Restore" which is in Right side Top of your Blogger Dashboard..  </li><li>Now click on "Download Template" so that if any problem persist after editing template you can restore it..</li><li>After Backup of your Template now click on "Edit HTML"..</li><li>Now find "]]></b:skin>" by clicking "Ctrl+F" in your Blogger Template Codes..</li><li>Now place Below Set of CSS Code above "]]></b:skin>"..</li></ul><blockquote class="tr_bq"> <div class="codebox">.mjn-button{     height:2em;     padding:15px 50px;     margin:20px 40px;     cursor:pointer;     display:inline-block;     color:#FFF !important;     font-size:1em;     border:1px solid #eee;     background:#eee;     border-radius:4px;     line-height:2em;     border:1px solid #aaa;     text-decoration:none;     -webkit-transition: all 0.3s linear;      -khtml-transition: all 0.3s linear;        -moz-transition: all 0.3s linear;          -o-transition: all 0.3s linear;             transition: all 0.3s linear; } /********************************************************           Green Background *********************************************************/ .green{     background: #cdeb8e; /* Old browsers */     background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */     background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */ } /***********************************************************               Red Background ***********************************************************/ .red{     background: #ff3019; /* Old browsers */     background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */     background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */ } /*************************************************              Yellow Background  ************************************************/ .yellow{     background: #ffd65e; /* Old browsers */     background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */     background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */ } /******************************************               Grey Background  ******************************************/ .grey{     background: rgb(238,238,238); /* Old browsers */     background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */     background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */ } /******************************************          Black Background  ******************************************/ .black{     background: #7d7e7d; /* Old browsers */     background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */     background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ } /******************************************         Brown Background  ******************************************/ .brown{     background: #f6e6b4; /* Old browsers */     background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */     background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */ } /**********************************************              Blue Background  **********************************************/ .blue{     background: #7abcff; /* Old browsers */     background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */     background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ } /*****************************************       Dark Red Background  *****************************************/ .darkred{     background: rgb(169,3,41); /* Old browsers */     background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */     background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */ } /*******************************************              Purple Background  *******************************************/ .purple{     background: rgb(203,96,179); /* Old browsers */     background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */     background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */ } .mjn-button:hover{     -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;      -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;        -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;          -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;             box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; } .mjn-button:active {     -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;      -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;        -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;          -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;             box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;     text-shadow:1px 1px 1px #eee; } .light {     display: block;     position: relative;     background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */     background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */     background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */     background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */     padding: 1px 9px;     top: -16px;     left: -53px;     height: 0px; } .mjn-button:hover .light{     padding:1px 5px;     -webkit-animation-name: shine;     -webkit-animation-duration: 0.6s;     -webkit-animation-timing-function: linear;     -khtml-animation-name: shine;     -khtml-animation-duration: 0.6s;     -khtml-animation-timing-function: linear;     -moz-animation-name: shine;     -moz-animation-duration: 0.6s;     -moz-animation-timing-function: linear;     -o-animation-name: shine;     -o-animation-duration: 0.6s;     -o-animation-timing-function: linear;     -webkit-animation-name: shine;     -webkit-animation-duration: 0.6s;     -webkit-animation-timing-function: linear;     left:45px; } @-webkit-keyframes shine {     0% { top: -15px; left: -48px; }     10% { top: -5px; }     20% { top: 5px; }     30% { top: 15px; }     40% { top: 25px; }     50% { top: 35px; }     60% { top: 25px; }     70% { top: 15px; }     80% { top: 5px; }     90% { top: -5px; }     100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); } } @-khtml-keyframes shine {     0% { top: -15px; left: -48px; }     10% { top: -5px; }     20% { top: 5px; }     30% { top: 15px; }     40% { top: 25px; }     50% { top: 35px; }     60% { top: 25px; }     70% { top: 15px; }     80% { top: 5px; }     90% { top: -5px; }     100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); } } @-moz-keyframes shine {     0% { top: -15px; left: -48px; }     10% { top: -5px; }     20% { top: 5px; }     30% { top: 15px; }     40% { top: 25px; }     50% { top: 35px; }     60% { top: 25px; }     70% { top: 15px; }     80% { top: 5px; }     90% { top: -5px; }     100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); } } @-o-keyframes shine {     0% { top: -15px; left: -48px; }     10% { top: -5px; }     20% { top: 5px; }     30% { top: 15px; }     40% { top: 25px; }     50% { top: 35px; }     60% { top: 25px; }     70% { top: 15px; }     80% { top: 5px; }     90% { top: -5px; }     100% { top:-15px; left:45px; -o-transform: rotate(-360deg); } } @-keyframes shine {     0% { top: -15px; left: -48px; }     10% { top: -5px; }     20% { top: 5px; }     30% { top: 15px; }     40% { top: 25px; }     50% { top: 35px; }     60% { top: 25px; }     70% { top: 15px; }     80% { top: 5px; }     90% { top: -5px; }     100% { top:-15px; left:45px; transform: rotate(-360deg); } }    </div></blockquote><div class="codebox"></div><div class="codebox"></div><div class="codebox">End of  Css3 Gradient Shiny Spinning Effect Button </div><div class="codebox">Now Click On Save Template..</div> <h4 style="text-align: left;">How to use This Code in Posts: </h4><ul style="text-align: left;"><li>To add This Buttons in Post go to HTML Part of your Post and Add this below code According to your Color..</li></ul> <h4 style="text-align: left;">Green Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button green"> <div class="light"></div>Your Text</a> </div> <h4 style="text-align: left;">Red Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button red"> <div class="light"></div>Your Text</a></div> <h4 style="text-align: left;">Blue Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button blue"> <div class="light"></div>Your Text</a></div> <h4 style="text-align: left;">Yellow Button </h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button yellow"> <div class="light"></div>Your Text</a></div> <h4 style="text-align: left;">Grey Button </h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button grey"> <div class="light"></div>Your Text</a> </div> <h4 style="text-align: left;">Black Button </h4><div style="text-align: left;"></div><div class="codebox"><div style="text-align: left;"><a href="Url-Here" class="mjn-button black"></div><div style="text-align: left;"><div class="light"></div>Your Text</a></div></div> <h4 style="text-align: left;">Brown Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button brown"> <div class="light"></div>Your Text</a></div> <h4 style="text-align: left;">Dark Red Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button darkred"> <div class="light"></div>Your Text</a></div> <h4 style="text-align: left;">Purple Button</h4><div style="text-align: left;"></div><div class="codebox" style="text-align: left;"><a href="Url-Here" class="mjn-button purple"> <div class="light"></div>Your Text</a></div> That's it ..All Done!!.. <div class="note"><h4 style="text-align: left;">   Customization :</h4><ul style="text-align: left;"><li>Now Replace "URL Here" Text Highlighted Red with your Link.. </li><li>And Replace "Your Text" in pink with Download or Demo or What ever you want..</li></ul></div></div>

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover

Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover Version 1.1 Make your Blog Stylish With These Buttons As per...