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> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbBHL-w3e9jes-aW0LRBYjkji4WRh1PXabIvCZdkLoX5-c9O0779A-S8j_CQSJtnvcpjaSeIAIKrq_afytQeAGjILetGZzoqlp29pjthhtTG_dOG6onIZ3dFPmD-ACVIw6rCSgxP349L_/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/AVvXsEjcbBHL-w3e9jes-aW0LRBYjkji4WRh1PXabIvCZdkLoX5-c9O0779A-S8j_CQSJtnvcpjaSeIAIKrq_afytQeAGjILetGZzoqlp29pjthhtTG_dOG6onIZ3dFPmD-ACVIw6rCSgxP349L_/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> <br /> <br /> <br /> <br /> 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.<br /> <br /> <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 <b>Dashboard</b></li> <li>Click On <b>Layout </b>Tab</li> <li>Now Add <b>HTML/Javascript</b> and paste following code inside it.</li> </ul> <div> </div> <div> <blockquote class="tr_bq"> <ul id="nav"><br />     <li class="current"><a href="/" title="Home" ><span style="color: red;">Home</span></a></li><br />         <li><a href="<span style="color: #274e13;">#</span>" ><span style="color: red;">Services</span></a></li><br />         <li><a href="<span style="color: #274e13;">#</span>" ><span style="color: red;">Experience</span></a></li><br />         <li><a href="<span style="color: #274e13;">#</span>" ><span style="color: red;">About Us</span></a></li><br />         <li><a href="<span style="color: #274e13;">#</span>" ><span style="color: red;">Contact</span></a></li><br />  </ul><br /> <style><br /> ​#nav { margin: 0; padding-top: 0.85em; width: auto; font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; }<br /> #nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; <span style="color: blue;">background:#d18b5e;</span> -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}<br /> #nav li:last-child { margin-right: 0; }<br /> #nav a { display: block; color: #FFF; text-decoration:none; }<br /> #nav a:hover { color: #484a50; border-bottom-color: #484a50; }<br /> @media only screen and (max-width: 767px) {<br />     #nav .current{<span style="color: blue;">background:#666;</span> -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; }<br />     #nav { margin: 0 6% 0 0; padding: 0; }<br />     #nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }<br />     #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/AVvXsEgPaI88BqH9XOlIIyVyqJiIDtJYL4dsOPaxsjuj-2r32ymgqW7f8HlWbsHgabqe9XZkqCDWvr8joT9noe7P_h_Za5K57GVjX77WJthVCm0lggyq4tn_Z_EPAaLzEj-SrfGrhyKR0Eft9V0/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; }<br />     #nav a:hover { border-bottom: none; }<br /> ​</style></blockquote> </div> </div> <div> <ul style="text-align: left;"> <li>After Adding This Code Click On <b>Save </b>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 <b>Dashboard</b></li> <li>Click On <b>Template </b>Tab</li> <li>Now Click On <b>Edit HTML</b>>><b>Proceed</b></li> <li>Find <span style="background-color: yellow;"><b><head></b></span> 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> <br /> <ul style="text-align: left;"> <li>Now finally your blog is having a beautiful responsive menu Click on <b>Save Template</b> 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.<br /> <br /> If you want more help from my site then comment your problem below I will try to resolve it as soon as possible.</div> <br /> <br /> <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 crea...

Read more »

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/AVvXsEhi2xRnzxdvGb3RUdP8G0g9hyphenhyphen-HF6808mM-VBZH5GNUTxwhD0N8BVmP2S2S-c9FEKUqWieSGxmMB8Ht3hzJnnyeTk5Ms755H-ytAsFnIUdikWlKy7cPvLScpekVxw1vjhjJVhyphenhyphenIE-ahq6Ga/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;"> <span style="font-size: large;"><span style="color: #cc0000;"> Smooth Sliding Social Media Widget For Blogger</span></span></div> <div style="text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLm7s0CeMy23nyxMbkgxFVmie02WGUI4TorzKJwXkFdkwVnM0i_FJZfQCZGhKysiWEnekTNUHZZm40dJnLt4eFV3wcj3dGbFyHvBV1Ptqra1SBkRwgPSJ0Df_qbbPt7QRCg_8Hbj6rtJao/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/AVvXsEgLm7s0CeMy23nyxMbkgxFVmie02WGUI4TorzKJwXkFdkwVnM0i_FJZfQCZGhKysiWEnekTNUHZZm40dJnLt4eFV3wcj3dGbFyHvBV1Ptqra1SBkRwgPSJ0Df_qbbPt7QRCg_8Hbj6rtJao/s1600/Smooth-Sliding-Social-Media-Widget-for-blogger.jpg" /></a></div> <br /> 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.<br /> <br /> <b>1.</b> Log in to blogger account and Click drop down.  <br /> <br /> <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/AVvXsEhi2xRnzxdvGb3RUdP8G0g9hyphenhyphen-HF6808mM-VBZH5GNUTxwhD0N8BVmP2S2S-c9FEKUqWieSGxmMB8Ht3hzJnnyeTk5Ms755H-ytAsFnIUdikWlKy7cPvLScpekVxw1vjhjJVhyphenhyphenIE-ahq6Ga/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/AVvXsEhi2xRnzxdvGb3RUdP8G0g9hyphenhyphen-HF6808mM-VBZH5GNUTxwhD0N8BVmP2S2S-c9FEKUqWieSGxmMB8Ht3hzJnnyeTk5Ms755H-ytAsFnIUdikWlKy7cPvLScpekVxw1vjhjJVhyphenhyphenIE-ahq6Ga/s1600/select-layout-blogger.jpg" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br />  <b>2. </b> Now select "<b>Layout</b>" Like Below.<br /> <br /> <br /> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XgRCplORW5omqIJWvELpVnjwJkN0HoxpyRrC2cFh1zs8qo44QA4uTj5zTfviKJrtVaRhkflk72863P8i_bM_92u804WKyzLKwnRc95s-m6sS1ykiMlw0_W3-3WqxojlSswr2TemC9qit/s1600/layout.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XgRCplORW5omqIJWvELpVnjwJkN0HoxpyRrC2cFh1zs8qo44QA4uTj5zTfviKJrtVaRhkflk72863P8i_bM_92u804WKyzLKwnRc95s-m6sS1ykiMlw0_W3-3WqxojlSswr2TemC9qit/s1600/layout.jpg" /></a></div> <div class="separator" style="clear: both; text-align: left;"> </div> <b>3. </b>Click <b>Add Gadget</b> and select<b> 'HTML/Javascript</b><br /> <br /> <b>4.</b> Paste below one of below code.<br /> <br /> <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/<span style="color: blue;"><b>s2free</b></span>"><p>12K+</p>Facebook </a></li> <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/<b><span style="color: #3d85c6;">s2free</span></b>"><p>5K+</p>Twitter</a></li> <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/<b><span style="color: #a64d79;">113992072715592507851</span></b>"><p>4K+&nbsp;</p>Google+</a></li> <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/<b><span style="color: #cc0000;">s2free</span></b>"><p>2K+&nbsp;</p>Pinterest</a></li> <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/<b><span style="color: #b45f06;">x</span></b>"><p>11K+</p>RSS</a></li> </ul> </div> </pre> You have to change the counters manually, just change red color number according to profile.<br /> <br /> <br /> Replace <b><span style="color: blue;">bloggertrix</span></b> with your Facebook username<br /> Replace <b><span style="color: #0b5394;">bloggertrix</span></b> with your Twitter Username<br /> Replace <span style="color: #741b47;"><b>107955298793879607964</b></span> with your Google plus ID<br /> Replace <span style="color: #cc0000;"><b>Username</b></span> with your Youtube Username<br /> Replace <b><span style="color: #b45f06;">bloggertrix</span></b> with your Feedburner ID <br /> <br /> <b>5. </b>Now save your <b>HTML/Javascript'.</b><br />     You are done... <br /> <br /></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  ...

Read more »

Add Stylish Metro UI Premium Navigation Menu in Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: center;"> <span style="color: #cc0000;"><span style="font-size: large;">Stylish Metro UI Premium Navigation Menu in Blogger </span></span></div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUhLiWtvgwTQDukKsNZfPkCU77sRL4k_Hz8FlvzMKTGJHurn4-4qrXVumkmc6SAcg2Y4Z_BBK9h5nNOJcJdt5CyxWiESvLMNl9Zre-nwTzdcv3DkgbDeU6LP7PuzNuWp_yztliIwA2-Zo/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/AVvXsEiDUhLiWtvgwTQDukKsNZfPkCU77sRL4k_Hz8FlvzMKTGJHurn4-4qrXVumkmc6SAcg2Y4Z_BBK9h5nNOJcJdt5CyxWiESvLMNl9Zre-nwTzdcv3DkgbDeU6LP7PuzNuWp_yztliIwA2-Zo/s1600/Stylish-Win-8-style-Metro-UI-Navigation-Menu-for-Blogger.png" /></a></div> </div> <div style="text-align: left;"> <br /> <span style="font-family: inherit;">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. </span><br /> <br /> <h4 style="text-align: left;"> <span style="font-family: inherit;"> What Is Metro UI Menu </span></h4> <span style="font-family: inherit;"> </span> <br /> I<span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">f 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. </span><br /> <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/AVvXsEjqzMAapkbUh8lBNmDZVupmQGBl4gZUzUWDxAgDchHc3GivhPazhmcEzNQTnxlOtZXnYLvy-sALIoTMpGJZQSTt_R-3blT320ulEsYlZIf2PVKV-qk5N7IPqSIhfyJhR5gbRQMLroSMDxY/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/AVvXsEjqzMAapkbUh8lBNmDZVupmQGBl4gZUzUWDxAgDchHc3GivhPazhmcEzNQTnxlOtZXnYLvy-sALIoTMpGJZQSTt_R-3blT320ulEsYlZIf2PVKV-qk5N7IPqSIhfyJhR5gbRQMLroSMDxY/s640/METRO.png" style="border-width: 0px; list-style: none; margin: 0px; outline: none; padding: 10px;" width="540" /></a></div> <h4> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Where The Metro UI Menu Would Appear In Blogger?  </span></h4> </div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"> I<span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">t 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. </span></div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnlcS4Wz5e4mIrq0CceeE35vqWVyvIpCsBOWLPVnWhC5wt0Ro7WH2N2OzskkTpzj6ntOji8KAAr1Y6NlrB5iqieClGdcKZHVHYSzR0ICFfZVCQC1QAF2mdgt7Bh-ACYU8ZVuIFjif50Y/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/AVvXsEhLnlcS4Wz5e4mIrq0CceeE35vqWVyvIpCsBOWLPVnWhC5wt0Ro7WH2N2OzskkTpzj6ntOji8KAAr1Y6NlrB5iqieClGdcKZHVHYSzR0ICFfZVCQC1QAF2mdgt7Bh-ACYU8ZVuIFjif50Y/s1600/Untitled.gif" style="border-width: 0px; list-style: none outside none; margin: 0px; outline: medium none; padding: 10px;" /></a> </span></div> <h4> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Step To Create Windows 8 Like Metro UI Navigation Menu In Blogger.</span></h4> </div> <div style="text-align: left;"> T<span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">he 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.</span><br /> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></span></div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <b>Step#1: Adding CSS StyleSheet:</b></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/AVvXsEi9VIs8MFZ9YWlm7A4KkquKjzlX9KNz_CqzRNpC8XUmpwGX8RgMMd6GmU749V37fq6bTDJtgaUWaAwU2crAvxNdlA5ouZW9mD2WoZurH34PxIS2vOqtnQ9XgDlbXgLBRdV1uvwdhALjNK4/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;"><span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Go to Blogger.com >> Template.</span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VIs8MFZ9YWlm7A4KkquKjzlX9KNz_CqzRNpC8XUmpwGX8RgMMd6GmU749V37fq6bTDJtgaUWaAwU2crAvxNdlA5ouZW9mD2WoZurH34PxIS2vOqtnQ9XgDlbXgLBRdV1uvwdhALjNK4/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;"><span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Select Edit HTML >> Proceed.</span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VIs8MFZ9YWlm7A4KkquKjzlX9KNz_CqzRNpC8XUmpwGX8RgMMd6GmU749V37fq6bTDJtgaUWaAwU2crAvxNdlA5ouZW9mD2WoZurH34PxIS2vOqtnQ9XgDlbXgLBRdV1uvwdhALjNK4/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;"><span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Now within the template search for <b>]]></b:skin></b> 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. </span></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==*/<br /> <br /> body {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>font-family:sans-serif;<br /> }<br /> a {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-decoration:none;<br /> }<br /> .mblmetromenu {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:960px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:auto;<br /> }<br /> @media screen and (max-width:960px) {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>.mblmetromenu {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:100%;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> }<br /> <br /> /* MblMetroMenu */<br /> .MblMetroMenu {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:relative;<br /> }<br /> .om-nav {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:absolute;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:100%;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>z-index:999;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:none;<br /> }<br /> .om-ctrlbar {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:100%;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> }<br /> .om-ctrlitems {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:auto;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding:0px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:inline-block;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-align:center;<br /> }<br /> .om-ctrlitem {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:none;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>cursor:pointer;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>float:left;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:0.5;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>filter: alpha(opacity=50) !important; /* For IE8 and earlier */<span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> .om-ctrlitem:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:0.8;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>filter: alpha(opacity=80) !important; /* For IE8 and earlier */<span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> .om-activectrlitem {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:1 !important;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>filter: alpha(opacity=100) !important; /* For IE8 and earlier */<span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> .om-controlitems {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:960px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:auto;<br /> }<br /> .om-controlitem {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>cursor:pointer;<br /> }<br /> .om-closenav {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>float:left;<br /> }<br /> .om-movenext {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>float:right;<br /> }<br /> .om-itemholder {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:auto;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding:20px 0px;<br /> }<br /> @media screen and (max-width:960px) {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>.om-closenav {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:absolute;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>z-index:9999;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>left:0;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>top:0;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>.om-movenext {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:absolute;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>z-index:9999;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>right:0;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>top:0;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>.om-controlitems {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:100%;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>.om-itemholder {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:100%;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>}<br /> .om-centerblock {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:inline-block;<br /> }<br /> .om-item {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:none;<br /> }<br /> .om-showitem {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:5px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>float:left;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:none;<br /> }<br /> /* END MblMetroMenu */<br /> <br /> /* TILE BUTTONS */<br /> /* Standar Buttons */<br /> .tile-bt {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-align:center;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>cursor:pointer;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:90px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:90px;<br /> }<br /> .tile-bt a {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-top:12px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-decoration: !important;<br /> }<br /> .tile-bt img {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:0 auto 0 auto;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-bottom:5px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:relative;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> }<br /> .tile-bt span {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>font-size:12px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-bottom:10px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> }<br /> .tile-bt:active {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:0.5;<br /> }<br /> /* End Standard Buttons */<br /> <br /> <br /> /* Large Buttons */<br /> .tile-bt-large {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:190px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:90px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>line-height:90px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-align:center;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>cursor:pointer;<br /> }<br /> .tile-bt-large a {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-decoration: !important;<br /> }<br /> .tile-bt-large img {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>vertical-align: middle;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:auto;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding:0px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:relative;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:48px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:48px;<br /> }<br /> .tile-bt-large span {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>vertical-align: middle;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:inline;<br /> }<br /> .tile-bt-large:active {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:0.5;<br /> }<br /> /* End Large Buttons */<br /> /* Extralarge Buttons */<br /> .tile-bt-extralarge {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-align:center;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>cursor:pointer;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:190px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:190px;<br /> }<br /> .tile-bt-extralarge a {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-top:52px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>text-decoration: !important;<br /> }<br /> .tile-bt-extralarge img {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>margin:0 auto 0 auto;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-bottom:22px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>height:80px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>width:80px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>position:relative;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> }<br /> .tile-bt-extralarge span {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>font-size:14px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>padding-bottom:20px;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>display:block;<br /> }<br /> .tile-bt-extralarge:active {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>opacity:0.5;<br /> }<br /> /* End Extralarge Buttons */<br /> <br /> /* END TILE BUTTONS */<br /> <br /> /* SHADOW LIST */<br /> .shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>/*display:inline-block;*/<br /> }<br /> .shadow-white:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>box-shadow:0px 0px 6px 3px #fff;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-webkit-box-shadow:0px 0px 6px 3px #fff;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-moz-box-shadow:0px 0px 6px 3px #fff;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-o-box-shadow:0px 0px 6px 3px #fff;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-box-shadow:0px 0px 6px 3px #fff;<br /> }<br /> .shadow-blue:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>box-shadow:0px 0px 6px 3px #38D1F7;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-webkit-box-shadow:0px 0px 6px 3px #38D1F7;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-moz-box-shadow:0px 0px 6px 3px #38D1F7;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-o-box-shadow:0px 0px 6px 3px #38D1F7;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-box-shadow:0px 0px 6px 3px #38D1F7;<br /> }<br /> .shadow-green:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>box-shadow:0px 0px 6px 3px #AACA37;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-webkit-box-shadow:0px 0px 6px 3px #AACA37;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-moz-box-shadow:0px 0px 6px 3px #AACA37;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-o-box-shadow:0px 0px 6px 3px #AACA37;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-box-shadow:0px 0px 6px 3px #AACA37;<br /> }<br /> .shadow-red:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>box-shadow:0px 0px 6px 3px #E81750;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-webkit-box-shadow:0px 0px 6px 3px #E81750;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-moz-box-shadow:0px 0px 6px 3px #E81750;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-o-box-shadow:0px 0px 6px 3px #E81750;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-box-shadow:0px 0px 6px 3px #E81750;<br /> }<br /> .shadow-black:hover {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>box-shadow:0px 0px 6px 3px #444;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-webkit-box-shadow:0px 0px 6px 3px #444;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-moz-box-shadow:0px 0px 6px 3px #444;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-o-box-shadow:0px 0px 6px 3px #444;<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>-ms-box-shadow:0px 0px 6px 3px #444;<br /> }<br /> /* END SHADOW LIST */<br /> /* BACKGROUND LIST */<br /> /* Solid Colors */<br /> .solid-blue { background:#00BBE2; }<br /> .solid-blue-2 { background:#2C84EE; }<br /> .solid-darkblue { background:#044E94; }<br /> .solid-violetred { background:#781766; }<br /> .solid-red { background:#E51400;}<br /> .solid-red-2 { background:#E81750; }<br /> .solid-pink { background:#FF539B; }<br /> .solid-purple { background:#D02090; }<br /> .solid-orange { background:#FB8F02; }<br /> .solid-orange-2 { background:#FF6600; }<br /> .solid-orange-3 { background:#DD5F37; }<br /> .solid-coral { background:#CD5B45; }<br /> .solid-green { background:#67B239; }<br /> .solid-green-2 {background:#96BF01; }<br /> .solid-darkgreen { background:#016C38; }<br /> .solid-olive { background:#999900}<br /> .solid-grass { background:#CDCD00; }<br /> .solid-darkred { background:#5F0000; }<br /> .solid-gold { background:#FEE9AE; }<br /> .solid-yellow { background:#F7D100; }<br /> .solid-black { background:#000; }<br /> .solid-smoke { background:#F5F5F5; }<br /> /* End Solid Colors */<br /> <br /> /* MISC */<br /> .clearspace { clear: both; }<br /> .floatleft { float:left; }<br /> .floatright { float:right; }<br /> .none { display: none !important; width:0px !important; }<br /> .light-text {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>color:#fff;<br /> }<br /> .dark-text {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>color:#1e1e1e;<br /> }<br /> .gradient {<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>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+ */<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span>background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */<br /> }<br /> .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;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <b>Step#2: Adding METRO Menu in Blogger:</b></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/AVvXsEi9VIs8MFZ9YWlm7A4KkquKjzlX9KNz_CqzRNpC8XUmpwGX8RgMMd6GmU749V37fq6bTDJtgaUWaAwU2crAvxNdlA5ouZW9mD2WoZurH34PxIS2vOqtnQ9XgDlbXgLBRdV1uvwdhALjNK4/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;"><span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">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.</span></li> </ul> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> <blockquote class="tr_bq"> <!-- mblmetromenu --><br /> <div class="mblmetromenu"><br /> <br /> <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9rHQaiAxqhwKuoiMXTiYYu3hWDOeggWISh6m6voHCcjA-RcWweOzSeYTI77FuSibVlu1ttNyPYwEwo1EHaQBO4SbZjxNiahp2tN2ToTMkZIhR13F6jEz3E5mM83KhDzlJnCWxx8NzIoc/s1600/home.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Homepage</span></span><br /> </a><br /> </div><br />   <br /> <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hfwqnMBGK_70rBgLpFR6xaa1euIwn84XDW5yG1LkLxd0hlFIKqjhu5bf3H96B7v11ugZO6ZImD3i301pQSQnWqcxSNbnoBcOYQL27dp19zPyjpHUSXswFms6DeDv_ea6SjkKcPg2UUc/s1600/messanger.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">About US</span></span><br /> </a><br /> </div><br />   <br /> <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7bziwrRYCymMBNhDhQ8TS_vzwxTBSb4MG1eFtxh512fpiJo_whtztQZAiynOPcfXUVO8xXJZqsj4l5x5n31Ul4CLSMhlbNkidbVE0tuEdomWdF3vOFGVbfOfohLSVoszqVhABllLuxg/s1600/rss.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Rss Feeds</span></span><br /> </a><br /> </div><br />   <br />  <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglb6znWSQqNi4FFKAVcZzC9gljIoVmaiO-N1hjuE1s3fKT6LIrXqhJ4t6t1grsji2NjfZZWfqAYTMiLteOWmXDVGEPQtg_yx7D4S0gOHn-ZkUU5ctKH0ROHL_QMfEtgSgLIo29nuWiY8A/s1600/search.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Search</span></span><br /> </a><br /> </div><br />     <br />  <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoPX3wJB8AgN1hnO_qhW8w4FIfpEnXBRDGwcbsl0KU1oyizZdmtQLuZhD_h5VdE5T2x7TEwWPryAN19b1Ik7ETxqC8CF79D4R3C0L1EW9zCqBhChhB55hb72_jnhO1PuD-iaX-aq-urwk/s1600/mail.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Contact US</span></span><br /> </a><br /> </div><br />     <br /> <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7nO8TIz_s1aUO8G4OwHqG1tPMO7SbG6jckmYS_kM6aZ5swvsSuwDR4CVm5Rwbmak0D-ye8U-sYfsWFYtLGBIblhN9yL0LBv_lNe7yw7GSipCW7befDmBXH0vvcfiQNLw-s1PS83CrPc/s1600/help.pn" alt="" /><br />  <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Get HELP</span></span><br /> </a><br />  </div><br />     <br /> <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChiNOnZe-6Wi8rXGnkWPUvCH3Uc0FVY2ysumuLwIHZrjTJ26Csnkm7HY0QAtXP_Ffz0k4AeLOhqa1DgZh1VYpCiYBKfEoHq4x2E8Gw4jXidv_TJSYsHIDfFV6Fsd741YeeSaqD9UtQKI/s1600/youtbe.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">YouTube</span></span><br /> </a><br /> </div><br />     <br /> <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUXQcCtZFn8R4XO5Aq4kmXH3ut8i-85a16Qom6ar0wYJk6cOSICKSbmpPHdHbOehdaXYWCPwkotMvhfQfnLBJftFUMFrZhg9VVi1TkCGRMgueEIT2d2nTf0jdVorcg67ib0-USvlN6C8/s1600/face.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Facebook</span></span><br /> </a><br /> </div><br />     <br /> <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnXtUnpfjaFG__Ox0_xp9lz8wdKwZ70nN82wU2WHA3ED1Ho_NyUPVuyrR6x3wvgAYTb22xeN9efZ-YjctYlpBL60AvF16s8vOPpYuYxQiW6axQELbOxHzcgwWmR9z7aGWdmnlbXG5_Pn4/s1600/photo.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Photos</span></span><br /> </a><br /> </div><br />     <br /> <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"><br /> <a href="<span style="background-color: orange; list-style: none; margin: 0px; outline: none; padding: 0px;">#</span>" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSZPhhbgDbibYP-uPXl_F5KxD317FzQaRpOTUfKcTJwoGavaDiI9urxd6uqa-KFxPx2XCtLAivr058VSJH3OaFw8RZ0-LUOg6UUQnRNahunCRErylvqp_PI8D908lVohWAMP9zGOWUJU/s1600/music.png" alt="" /><br /> <span class="light-text"><span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">Music</span></span><br /> </a><br />  </div><br />     <br /> <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"><br /> <a href="http://www.muhammadakbar1.blogspot.com" class="gradient"><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbKaaN4pglWG8WFBicEYuzcb_xDbs8KQoT3X0u-D5RlYDlecwrcjMfx8LOTaNz1GOiAASIyLZfjlESjRvrgOI8sP0w8xDctE8bTDt867JR3JpqG1mYejDDmrHxAcgSdYC1N01ILCwbqw/s1600/MBL.png" alt="" /><br /> <span class="light-text">Uhammad Akbar</span><br /> </a><br /> </div><br />         <!-- End MblMetroMenu --><br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span></div><br /> <!-- END mblmetromenu --></blockquote> </div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>All Done: </b>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.</span></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 reva...

Read more »

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;"> <span style="font-size: large;"><span style="color: #cc0000;">Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</span></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FP4dJrr-OwpIsZ2XcN3-1kxrFvY39_gfe_qHqCJPJvYDQkFq50wsGgjN1s5oB8AynOEqd_Sl1tVNj5_s6p_Wj6Z6rKIVlDodNUZOhe4zSTnz4vfDx6JcvsSsUI-AjUyW6Q7qJExnRrBR/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/AVvXsEg-FP4dJrr-OwpIsZ2XcN3-1kxrFvY39_gfe_qHqCJPJvYDQkFq50wsGgjN1s5oB8AynOEqd_Sl1tVNj5_s6p_Wj6Z6rKIVlDodNUZOhe4zSTnz4vfDx6JcvsSsUI-AjUyW6Q7qJExnRrBR/s320/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" width="305" /></a></div> <div style="text-align: left;"> <br /></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;"> <br /></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/AVvXsEhjpC7gHzdJYVyLCRJxCzsDrYpuTUzvQB0m0FBi_4WeCDHWOLLoMAKqyiFmMZRuXJHkqufxRjBb4guZkz1ui8HbB8zTOjkbiJJPBPV2Ey7xw-lYLWQ1o1cy5cR9tJGCUEBU73yASP8g7yZ9/s1600/demo-button-s2free.gif" /></a></div>   <br /> After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site..<br /> <div style="text-align: left;"> <br /></div> <h4 style="text-align: left;">  How to Add Metro UI Drop Down Menu With Sliding Effect Into Your Blog:<br /> </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><br /> <br /> /* demo page styles */<br /> .mjn-tab1<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifx0sMrWGXKYtR-Y5-Mn7SO45oQEV6hyphenhyphenbSrycSt8R8AShB7wqlU2AXDLexAEMGI54PSIWHSS1Yktqti-MHXlekxJdrV8ago8lvYeqk18-pV43PAVPAFjd0F67dGTokPAJi2LpAulnlP6Q/h120/home.png) no-repeat center center #4d90fe;<br /> }<br /> .tab1:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifx0sMrWGXKYtR-Y5-Mn7SO45oQEV6hyphenhyphenbSrycSt8R8AShB7wqlU2AXDLexAEMGI54PSIWHSS1Yktqti-MHXlekxJdrV8ago8lvYeqk18-pV43PAVPAFjd0F67dGTokPAJi2LpAulnlP6Q/h120/home.png) no-repeat center center #3682FC;<br /> }<br /> .mjn-fb<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4HFei89pjcXqnF003f8QP-5NTZF5_-SJmTrYPAoSphmEOKwD8d_Uqhp3UmNSEtM-ZmRBkJuJi5hhu8ba8aBpXofgm1VQ2pHJG7UR3PQgDvYNoD7HDYugiKaauTwNfArSecwgZQ_5O6g/s1600/facebook2.png) no-repeat center center #2A82D9;<br /> }<br /> .mjn-fb:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4HFei89pjcXqnF003f8QP-5NTZF5_-SJmTrYPAoSphmEOKwD8d_Uqhp3UmNSEtM-ZmRBkJuJi5hhu8ba8aBpXofgm1VQ2pHJG7UR3PQgDvYNoD7HDYugiKaauTwNfArSecwgZQ_5O6g/s1600/facebook2.png) no-repeat center center #1f69b3;<br /> }<br /> .mjn-tw<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jdlLbmKGVT27KQFzJoZrDd2iOE7afxtrLKnHiOvTtrlDEwj71bSvYXSWCgPAjrgtetaCBxXTqOei_bdyvFtz2ADB7gWEVencabfdPVffD7yX68pvgG-eFBBAabPiC93Bh3Ax8T0Y0h0/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0;<br /> }<br /> .mjn-tw:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jdlLbmKGVT27KQFzJoZrDd2iOE7afxtrLKnHiOvTtrlDEwj71bSvYXSWCgPAjrgtetaCBxXTqOei_bdyvFtz2ADB7gWEVencabfdPVffD7yX68pvgG-eFBBAabPiC93Bh3Ax8T0Y0h0/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;<br /> }<br /> .mjn-g<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizn07PFOyPwzmBvomkbH9BX64FSFjPI-0suD6jNlhH00cXW2OEXl9JNMKUikBPiP00VRDIvPxn2Z1SQdwV0Z5giEOfzySkOwQugI_4rBY9fl9fF0VoA_rYLFWpA6PdLppO84QW5fP3Mc0/s1600/google+plus2.png) no-repeat center center #DC321E;<br /> }<br /> .mjn-g:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizn07PFOyPwzmBvomkbH9BX64FSFjPI-0suD6jNlhH00cXW2OEXl9JNMKUikBPiP00VRDIvPxn2Z1SQdwV0Z5giEOfzySkOwQugI_4rBY9fl9fF0VoA_rYLFWpA6PdLppO84QW5fP3Mc0/s1600/google+plus2.png) no-repeat center center #c53727;<br /> }<br /> .mjn-rss<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0VhdycBAbEjEKRi_B_RmE0L0vOR4L50WoyBJKjFCQ7HzEOYW1jdyKJ1a9pHYFmK5AaLsSSrOXJ6VIRELLbJnoiYRR9DnHS1B9942eHSl1XA1sfrbyMvahEAY2J7bwycYLAWbycoFQ5g/s1600/feed2.png) no-repeat center center #E9A01C;<br /> }<br /> .mjn-rss:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0VhdycBAbEjEKRi_B_RmE0L0vOR4L50WoyBJKjFCQ7HzEOYW1jdyKJ1a9pHYFmK5AaLsSSrOXJ6VIRELLbJnoiYRR9DnHS1B9942eHSl1XA1sfrbyMvahEAY2J7bwycYLAWbycoFQ5g/s1600/feed2.png) no-repeat center center #F9A914;<br /> }<br /> .mjn-tab2<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXK8Kz6adRH7WuRIbkiFIMYaEch4kQphKC2EEuFa11AJTzsud3MOpmSwvKvtfqcKzdHo10cOvEYg7Y3QhnM4qpyr773r3lzJ-9B_tZDttPVq4h-C150DB4MDdxklkutwgj9JWgkeKQwg/h120/Tag.png) no-repeat center center #35aa47;<br /> }<br /> .mjn-tab2:hover{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXK8Kz6adRH7WuRIbkiFIMYaEch4kQphKC2EEuFa11AJTzsud3MOpmSwvKvtfqcKzdHo10cOvEYg7Y3QhnM4qpyr773r3lzJ-9B_tZDttPVq4h-C150DB4MDdxklkutwgj9JWgkeKQwg/h120/Tag.png) no-repeat center center #1d943b;<br /> }<br /> .mjn-tab2sub<br /> {<br /> background: #35aa47;<br /> }<br /> .mjn-tab2sub:hover{<br /> background: #1d943b;<br /> }<br /> .mjn-tab3<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ2q4TequjjkBFy0_1-4SC_D89GwzEk4voL2wksuHy7dGSByXdDKugfpCSVR0Y0rTw_5UMEzSjKWXC98zqBUh7awsvYmFq0li9MWGofGmo-xQTdMYa9voMPgI8rTYJUXV9EbVap4zAEBM/h120/archives.png) no-repeat center center #852b99;<br /> }<br /> .mjn-tab3:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ2q4TequjjkBFy0_1-4SC_D89GwzEk4voL2wksuHy7dGSByXdDKugfpCSVR0Y0rTw_5UMEzSjKWXC98zqBUh7awsvYmFq0li9MWGofGmo-xQTdMYa9voMPgI8rTYJUXV9EbVap4zAEBM/h120/archives.png) no-repeat center center #6d1b81;<br /> }<br /> .mjn-tab3sub<br /> {<br /> background: #852b99;<br /> height:70px;<br /> }<br /> .mjn-tab3sub:hover<br /> {<br /> background: #6d1b81;<br /> }<br /> .mjn-tab4<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8bKhBTifZiL-VURhL13o-3-DNoYNbRHDHm2BOUTeS1lkypb_bhnl5cu-kVC4kKAnuyZmtSVSwr9fbKlPhWp48EqQ-H34ck2yQwmAU-3AEsAl2dCs5yZUeHY8mRFokdeKw9BYlYiLSOI/h120/contact.png) no-repeat center center #d84a38;;<br /> }<br /> .mjn-tab4:hover{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8bKhBTifZiL-VURhL13o-3-DNoYNbRHDHm2BOUTeS1lkypb_bhnl5cu-kVC4kKAnuyZmtSVSwr9fbKlPhWp48EqQ-H34ck2yQwmAU-3AEsAl2dCs5yZUeHY8mRFokdeKw9BYlYiLSOI/h120/contact.png) no-repeat center center #c53727;<br /> }<br /> .mjn-tab4sub<br /> {<br /> background: #d84a38;;<br /> }<br /> .mjn-tab4sub:hover{<br /> background: #c53727;<br /> }<br /> .mjn-tab5<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6lRn5cVM_O1CL1R9j8mpbEeGwdInckLHxI-YjZH4MasNbdM-I4MIx8Meg9_CvXlXLUGRiuZ_c0P_aa_2V0zSRyfk5eufPDwUDmhYs0agMVUmWkWR10VNnXEp4ktb-o1LG-i59XxpbO0/h120/Menu.png) no-repeat center center #555;<br /> }<br /> .mjn-tab5:hover<br /> {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6lRn5cVM_O1CL1R9j8mpbEeGwdInckLHxI-YjZH4MasNbdM-I4MIx8Meg9_CvXlXLUGRiuZ_c0P_aa_2V0zSRyfk5eufPDwUDmhYs0agMVUmWkWR10VNnXEp4ktb-o1LG-i59XxpbO0/h120/Menu.png) no-repeat center center #222;<br /> }<br /> <br /> body {<br />     background:none;<br />     margin:0;<br />     padding:0;<br />     font-family: Helvetica,Arial,sans-serif;<br />     font-size: 11px;<br /> }<br /> .mjn-metro-menu {<br />     position:relative;<br />     background:none;<br />     width:500px;<br />     height:90px;<br />     border:none;<br />     margin:20px auto;<br />     padding:20px;<br /> float:left;<br /> }<br /> <br /> /* navigation menu styles - main styles */<br /> ul.navi {<br />     position:relative;<br />     z-index:100;<br />     padding:0;<br />     margin:0 0 0 60px;<br />     list-style:none;<br />     width:auto;<br />     height:30px;<br /> }<br /> ul.navi > li {<br />     width:70px;<br />     height:70px;<br />     position:absolute;<br />     left:0;<br />     top:0; <br />     -moz-transition: -moz-transform 0.5s ease-in-out;<br />     -ms-transition: -ms-transform 0.5s ease-in-out;<br />     -o-transition: -o-transform 0.5s ease-in-out;<br />     -webkit-transition: -webkit-transform 0.5s ease-in-out;<br />     transition: transform 0.5s ease-in-out;<br /> }<br /> ul.navi a {<br />     display:block;<br />     width:70px;<br />     height:70px;<br />     position:absolute;<br />     left:0;<br />     top:0;<br />     line-height:30px;<br />     text-align:center;<br />     text-decoration:none;<br /> }<br /> ul.navi a img {<br />     border:0;<br /> }<br /> ul.navi a span {<br />     position:relative;<br />     top:30%;<br />     font: 14px Segoe UI, Helvetica, Arial, sans-serif;<br />     color:#fff;<br /> }<br /> <br /> /* top line - hover styles */<br /> ul.navi:hover {<br />     height:200px;<br /> }<br /> ul.navi:hover li#n1 {<br />     -moz-transform: translatex(0px);<br />     -ms-transform: translatex(0px);<br />     -o-transform: translatex(0px);<br />     -webkit-transform: translatex(0px);<br />     transform: translatex(0px);<br /> }<br /> ul.navi:hover li#n2 {<br />     -moz-transform: translatex(90px);<br />     -ms-transform: translatex(90px);<br />     -o-transform: translatex(90px);<br />     -webkit-transform: translatex(90px);<br />     transform: translatex(90px);<br /> }<br /> ul.navi:hover li#n3 {<br />     -moz-transform: translatex(180px);<br />     -ms-transform: translatex(160px);<br />     -o-transform: translatex(160px);<br />     -webkit-transform: translatex(160px);<br />     transform: translatex(180px);<br /> }<br /> ul.navi:hover li#n4 {<br />     -moz-transform: translatex(260px);<br />     -ms-transform: translatex(270px);<br />     -o-transform: translatex(270px);<br />     -webkit-transform: translatex(270px);<br />     transform: translatex(270px);<br /> }<br /> ul.navi:hover li#n5 {<br />     -moz-transform: translatex(360px);<br />     -ms-transform: translatex(360px);<br />     -o-transform: translatex(360px);<br />     -webkit-transform: translatex(360px);<br />     transform: translatex(360px);<br /> }<br /> <br /> /* submenus - common styles */<br /> ul.sub {<br />     padding:0;<br />     margin:0;<br />     list-style:none;<br />     width:100%;<br />     height:200px auto;<br />     position:absolute;<br />     left:0;<br />     top:0;<br />     z-index:-1;<br />     opacity:0;<br /> <br />     -moz-transition: opacity 0s linear 1s;<br />     -ms-transition: opacity 0s linear 1s;<br />     -o-transition: opacity 0s linear 1s;<br />     -webkit-transition: opacity 0s linear 1s;<br />     transition: opacity 0s linear 1s;<br /> }<br /> ul.sub li {<br />         width:80px auto;<br />        height:80px;<br />        position:absolute;<br />        left:0;<br />       top:0;<br />       z-index:-1;<br />     -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;<br />     -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;<br />     -o-transition: -o-transform 0.5s ease-in-out 0.5s;<br />     -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;<br />     transition: transform 0.5s ease-in-out 0.5s;<br /> }<br /> <br /> /* submenus - hover styles */<br /> ul.navi > li:hover ul {<br />     opacity:1;<br /> <br />     -moz-transition: opacity 0s linear 0.5s;<br />     -ms-transition: opacity 0s linear 0.5s;<br />     -o-transition: opacity 0s linear 0.5s;<br />     -webkit-transition: opacity 0s linear 0.5s;<br />     transition: opacity 0s linear 0.5s;<br /> }<br /> ul.navi li:hover ul li.l {<br />     -moz-transform: translatex(-70px) translatey(90px);<br />     -ms-transform: translatex(-70px) translatey(90px);<br />     -o-transform: translatex(-70px) translatey(90px);<br />     -webkit-transform: translatex(-70px) translatey(90px);<br />     transform: translatex(-70px) translatey(90px);<br /> }<br /> ul.navi li:hover ul li.c {<br /> -moz-transform: translatex(2px) translatey(90px);<br />     -ms-transform: translatex(2px) translatey(90px);<br />     -o-transform: translatex(2px) translatey(90px);<br />     -webkit-transform: translatex(2px) translatey(90px);<br />     transform: translatex(2px) translatey(90px);<br /> }<br /> ul.navi li:hover ul li.r {<br />     -moz-transform: translatex(74px) translatey(90px);<br />     -ms-transform: translatex(74px) translatey(90px);<br />     -o-transform: translatex(74px) translatey(90px);<br />     -webkit-transform: translatex(74px) translatey(90px);<br />     transform: translatex(74px) translatey(90px);<br /> }<br /> ul.navi li:hover ul li.r1 {<br />     -moz-transform: translatex(146px) translatey(90px);<br />     -ms-transform: translatex(146px) translatey(90px);<br />     -o-transform: translatex(146px) translatey(90px);<br />     -webkit-transform: translatex(146px) translatey(90px);<br />     transform: translatex(146px) translatey(90px);<br /> }<br /> </style><br /> <br /> <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <br /> <br />   <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><br /> <br /> <br /> <div class="mjn-metro-menu"><br /> <br /> <!-- defining top menu elements --><br /> <ul class="navi"><br />  <li id="n1"><a class="mjn-tab1" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/</span>" title="Home" ></a><br /> <!-- defining sub menu elements --><ul class="sub"><br />  <li class="l"><a class="mjn-fb" href="<span style="color: #0b5394;">https://www.facebook.com/yourlink</span>" title="Like Us on Facebook"></a></li><br />  <li class="c"><a class="mjn-tw" href="<span style="color: cyan;">https://www.twitter.com/yourlink</span>" title="Follow Us on Twitter"></a></li><br />   <li class="r"><a class="mjn-g" href="<span style="color: red;">https://plus.google.com/u/0/123456789</span>"></a></li><br /> <li class="r1"><a class="mjn-rss" href="<span style="color: orange;">https://feeds.feedburner.com/yourlink</span>"></a></li><br /> </ul><br /> </li><br /> <li id="n2"><a class="mjn-tab2" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/</span>" title="Tags" ></a><br /> <ul class="sub"><br /> <li class="l"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/Windows</span>"title="Windows"><span><span style="color: magenta;">Windows</span></span></a></li><br /> <li class="c"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/label/Blogger</span>" title="Blogger"><span><span style="color: magenta;">Blogger</span></span></a></li><br />  <li class="r"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/CSS3</span>" title="CSS/HTML"><span><span style="color: magenta;">CSS/HTML</span></span></a></li><br /> <li class="r1"><a class="mjn-tab2sub" href="<span style="color: red;">http://</span><span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/search/label/Softwares</span>" title="Softwares"><span><span style="color: magenta;">Softwares</span></span></a></li><br /> </ul><br /> </li><br /> <li id="n3"><a class="mjn-tab3" href="<span style="color: red;">s2free.blogspot.com</span><span style="color: red;">/2013/</span>" title="Blog Archive" ></a><br /> <ul class="sub"><br /> <li class="l"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2013</span></span></a></li><br /> <li class="c"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2012</span></span></a></li><br /> <li class="r"><a class="mjn-tab3sub" href="<span style="color: red;"><span style="color: red;">s2free.blogspot.com</span>/2013/</span>"><span><span style="color: magenta;">2011</span></span></a></li><br /> <li class="r1"><a class="mjn-tab3sub" href="<span style="color: red;">s2free.blogspot.com/2013</span>"><span><span style="color: magenta;">2010</span></span></a></li><br /> </ul><br /> </li><br /> <li id="n4"><a class="mjn-tab4" href="<span style="color: red;">http://mjntechtips.blogspot.in/p/blog-page.html</span>" title="Contact Us" ></a><br /> <ul class="sub"><br /> <li class="l"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 1</span></span></a></li><br /> <li class="c"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 2</span></span></a></li><br /> <li class="r1"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 3</span></span></a></li><br /> <li class="r"><a class="mjn-tab4sub" href="<span style="color: red;">#</span>"><span><span style="color: magenta;">LINK 4</span></span></a></li><br /> </ul><br /> </li><br /> <li id="n5"><a class="mjn-tab5" href="<span style="color: red;">#</span>" ><span></span></a><br /> </li><br /> </ul><br /> <div style="clear:both"></div><br /> </div><br /> </!doctype></div> </blockquote> <br /> <ul style="text-align: left;"> <li>Now Click Save and Drag it to your desired position..</li> </ul> <br /> <h4 style="text-align: left;"> Customization : </h4> Now Replace Links Text Highlighted in Color <span style="color: #0b5394;">Facebook</span>,<span style="color: cyan;">Twitter</span>,<span style="color: red;">Google+</span>,<span style="color: orange;">RSS</span> and other in <span style="color: red;">Red</span> with your Link..  <br /> Replace the Names Highlighted in  <span style="color: magenta;">Pink <span style="color: black;">with your Words appropriate to link given..</span></span></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 m...

Read more »

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;"> <span style="color: #cc0000;"><span style="font-size: large;">Stylish Gradient CSS3 Buttons With Animated Shiny Line Spinning Effect On Hover Version 1.1</span></span></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHswKhC-gkW1syw6-ZpSXeb6SiU1-a-196ABnNJd4g3Rr6Gy2etiwFH5oiQf_IwzMcfcOPK1QLg3yoHz8-s4fGF_gnd7Cf_v2cVgwuS2dM-1VXhhaoi5fh81F8WcDqQv-TkqLWzOI8MR-u/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/AVvXsEhHswKhC-gkW1syw6-ZpSXeb6SiU1-a-196ABnNJd4g3Rr6Gy2etiwFH5oiQf_IwzMcfcOPK1QLg3yoHz8-s4fGF_gnd7Cf_v2cVgwuS2dM-1VXhhaoi5fh81F8WcDqQv-TkqLWzOI8MR-u/s320/Demo-Of-Shiny-CSS3-Buttons-Gradient-Buttons-With-Shiny-Spinning-Effect-On-Hover.gif.gif" width="304" /></a></div> <br /> <br /> <br /> Make your Blog Stylish With These Buttons As per your blog color Theme or Use it for Demo Click<br />  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..<br />   <br /> 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..<br /> <br /> <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 "<span style="background-color: #cccccc;">]]></b:skin></span>" by clicking "Ctrl+F" in your Blogger Template Codes..</li> <li>Now place Below Set of CSS Code above "<span style="background-color: #cccccc;">]]></b:skin></span>"..</li> </ul> <blockquote class="tr_bq"> <br /> <div class="codebox"> .mjn-button{<br />     height:2em;<br />     padding:15px 50px;<br />     margin:20px 40px;<br />     cursor:pointer;<br />     display:inline-block;<br />     color:#FFF !important;<br />     font-size:1em;<br />     border:1px solid #eee;<br />     background:#eee;<br />     border-radius:4px;<br />     line-height:2em;<br />     border:1px solid #aaa;<br />     text-decoration:none;<br />     -webkit-transition: all 0.3s linear;<br />      -khtml-transition: all 0.3s linear;<br />        -moz-transition: all 0.3s linear;<br />          -o-transition: all 0.3s linear;<br />             transition: all 0.3s linear;<br /> }<br /> /********************************************************<br />           Green Background<br /> *********************************************************/<br /> .green{<br />     background: #cdeb8e; /* Old browsers */<br />     background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */<br />     background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */<br /> }<br /> /***********************************************************<br />               Red Background<br /> ***********************************************************/<br /> .red{<br />     background: #ff3019; /* Old browsers */<br />     background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */<br />     background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */<br /> }<br /> /*************************************************<br />              Yellow Background<br />  ************************************************/<br /> .yellow{<br />     background: #ffd65e; /* Old browsers */<br />     background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */<br />     background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */<br /> }<br /> /******************************************<br />               Grey Background<br />  ******************************************/<br /> .grey{<br />     background: rgb(238,238,238); /* Old browsers */<br />     background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */<br />     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+ */<br />     background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */<br />     background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */<br /> }<br /> /******************************************<br />          Black Background<br />  ******************************************/<br /> .black{<br />     background: #7d7e7d; /* Old browsers */<br />     background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */<br />     background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */<br /> }<br /> /******************************************<br />         Brown Background<br />  ******************************************/<br /> .brown{<br />     background: #f6e6b4; /* Old browsers */<br />     background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */<br />     background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */<br /> }<br /> /**********************************************<br />              Blue Background<br />  **********************************************/<br /> .blue{<br />     background: #7abcff; /* Old browsers */<br />     background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */<br />     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */<br />     background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */<br />     background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */<br />     background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */<br />     background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */<br /> }<br /> /*****************************************<br />       Dark Red Background<br />  *****************************************/<br /> .darkred{<br />     background: rgb(169,3,41); /* Old browsers */<br />     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+ */<br />     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+ */<br />     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+ */<br />     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+ */<br />     background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */<br />     background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */<br /> }<br /> /*******************************************<br />              Purple Background<br />  *******************************************/<br /> .purple{<br />     background: rgb(203,96,179); /* Old browsers */<br />     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+ */<br />     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+ */<br />     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+ */<br />     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+ */<br />     background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */<br />     background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */<br /> }<br /> .mjn-button:hover{<br />     -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />      -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />        -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />          -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br />             box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;<br /> }<br /> .mjn-button:active {<br />     -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;<br />      -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;<br />        -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;<br />          -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;<br />             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;<br />     text-shadow:1px 1px 1px #eee;<br /> }<br /> .light {<br />     display: block;<br />     position: relative;<br />     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+ */<br />     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+ */<br />     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+ */<br />     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+ */<br />     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+ */<br />     background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */<br />     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */<br />     padding: 1px 9px;<br />     top: -16px;<br />     left: -53px;<br />     height: 0px;<br /> }<br /> .mjn-button:hover .light{<br />     padding:1px 5px;<br />     -webkit-animation-name: shine;<br />     -webkit-animation-duration: 0.6s;<br />     -webkit-animation-timing-function: linear;<br />     -khtml-animation-name: shine;<br />     -khtml-animation-duration: 0.6s;<br />     -khtml-animation-timing-function: linear;<br />     -moz-animation-name: shine;<br />     -moz-animation-duration: 0.6s;<br />     -moz-animation-timing-function: linear;<br />     -o-animation-name: shine;<br />     -o-animation-duration: 0.6s;<br />     -o-animation-timing-function: linear;<br />     -webkit-animation-name: shine;<br />     -webkit-animation-duration: 0.6s;<br />     -webkit-animation-timing-function: linear;<br />     left:45px;<br /> }<br /> @-webkit-keyframes shine {<br />     0% { top: -15px; left: -48px; }<br />     10% { top: -5px; }<br />     20% { top: 5px; }<br />     30% { top: 15px; }<br />     40% { top: 25px; }<br />     50% { top: 35px; }<br />     60% { top: 25px; }<br />     70% { top: 15px; }<br />     80% { top: 5px; }<br />     90% { top: -5px; }<br />     100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }<br /> }<br /> @-khtml-keyframes shine {<br />     0% { top: -15px; left: -48px; }<br />     10% { top: -5px; }<br />     20% { top: 5px; }<br />     30% { top: 15px; }<br />     40% { top: 25px; }<br />     50% { top: 35px; }<br />     60% { top: 25px; }<br />     70% { top: 15px; }<br />     80% { top: 5px; }<br />     90% { top: -5px; }<br />     100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }<br /> }<br /> @-moz-keyframes shine {<br />     0% { top: -15px; left: -48px; }<br />     10% { top: -5px; }<br />     20% { top: 5px; }<br />     30% { top: 15px; }<br />     40% { top: 25px; }<br />     50% { top: 35px; }<br />     60% { top: 25px; }<br />     70% { top: 15px; }<br />     80% { top: 5px; }<br />     90% { top: -5px; }<br />     100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }<br /> }<br /> @-o-keyframes shine {<br />     0% { top: -15px; left: -48px; }<br />     10% { top: -5px; }<br />     20% { top: 5px; }<br />     30% { top: 15px; }<br />     40% { top: 25px; }<br />     50% { top: 35px; }<br />     60% { top: 25px; }<br />     70% { top: 15px; }<br />     80% { top: 5px; }<br />     90% { top: -5px; }<br />     100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }<br /> }<br /> @-keyframes shine {<br />     0% { top: -15px; left: -48px; }<br />     10% { top: -5px; }<br />     20% { top: 5px; }<br />     30% { top: 15px; }<br />     40% { top: 25px; }<br />     50% { top: 35px; }<br />     60% { top: 25px; }<br />     70% { top: 15px; }<br />     80% { top: 5px; }<br />     90% { top: -5px; }<br />     100% { top:-15px; left:45px; transform: rotate(-360deg); }<br /> }<br />    </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> <br /> <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> <br /> <h4 style="text-align: left;"> Green Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button green"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a> </div> <br /> <h4 style="text-align: left;"> Red Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button red"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> <h4 style="text-align: left;"> Blue Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button blue"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> <h4 style="text-align: left;"> Yellow Button </h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button yellow"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> <h4 style="text-align: left;"> Grey Button </h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button grey"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a> </div> <br /> <h4 style="text-align: left;"> Black Button </h4> <div style="text-align: left;"> </div> <div class="codebox"> <div style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button black"></div> <div style="text-align: left;"> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> </div> <br /> <h4 style="text-align: left;"> Brown Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button brown"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> <h4 style="text-align: left;"> Dark Red Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button darkred"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> <h4 style="text-align: left;"> Purple Button</h4> <div style="text-align: left;"> </div> <div class="codebox" style="text-align: left;"> <a href="<span style="color: red;">Url-Here</span>" class="mjn-button purple"><br /> <div class="light"></div><span style="color: magenta;">Your Text</span></a></div> <br /> That's it ..All Done!!..<br /> <br /> <div class="note"> <h4 style="text-align: left;"> <b>  </b><b> </b>Customization :</h4> <ul style="text-align: left;"> <li>Now Replace "<span style="color: red;">URL Here</span>" Text Highlighted <span style="color: red;">Red</span> with your Link.. </li> <li>And Replace "<span style="color: magenta;">Your Text</span>" in<span style="color: magenta;"> pink</span> 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 But...

Read more »