
Want to see demo??Click the link below.
- Go to Design->Page Elements [Take Layout in new template]
- Click on Add gadget just below the Header

- Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
- You can change RED highlighted text with your Menu title and GREEN with LINK
Add Elemic Blue Menu
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjzV6qm_RraURJsYOJoFTywundDMHRaMKN42mUYkhhj4S2f8ILOg2huAKJwENGpZiD8168RBuR8NYjRFwK5WWARu4IMZkLGjlWlonWXZIu8WcSdUa1EdA35KqwTg7ka3jWVRTLGmxHD_k/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-blue">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="noop-menu-blue">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Green Menu
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikry0PMm2uenpBhp3-4uqpHLlHIx1Rf924MPLHldZuNWGnN_1yrsdmmQzcp1pKnnyd_IgXsKfgoN4Ls0rO-6ekQfooAsG9i2FC2-1Cll4jYILr9W6coWjMnuc1rJYlt6XbppLUb4tO6KI/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;
border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-green">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-green">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Grape Purple Menu
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_jakfxA207wF1_mhAZUmH6uTB__NXjHpIr0Ki2MYOCKKB3sgzELbIaqGIlGOMYb37_DfxSGGAXhJ3ojFdsW8qc7zHy7ei_PxhUuxiusINbpf4fEFKpI2UO0fUIWGOhH_8BV-pF0S9ZY/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;
border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-purple">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-purple">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Light-Dark SkyBlue Menu
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Ngv5Ua_K-ivwoY7Goaq9jbgfR2C8CT__2a6wvKxy24ENBPI-d8vLSrlMBzMbjRrfPofSqugadTt7n3C5qtdZYTFNLJ-I-ldl061XMwuIPQrDKeReGd5m3OvLQrfXMfMT1RKmtVwm8C8/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;
border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-skyblue">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-skyblue">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Add Tree Brown Menu
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-rgKoCLIaKEwqe1GoH7wBIMWdGkFj7ZP7mYpJU3SZHgJU06gFjwYGY2jHl9d1nGANlY2kYg0iPjVQZBUuPvpP2NCPhlsbp3V4OEBOXzXwNQk1ZPx_m1Sy0KZ6xVvEJSJzWFabW6TYz0/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-brown">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2pMpzbtnR0zyF21oN8QndpUrhpOGQT0pJQlJdWoB6jWvt4O895Yh3ls7larbv9907dqHdJGS5K_qjQ3Jk3bA3F6xOnKC3OPWkvrz5T3MzGPumyawr6TRRoSnTT6OxR6nxPs7II4iupw/s1600/1x1juice.png" /></a>
<div class="noop-menu-brown">
<ul class="menu">
<li><a href="http://www.netoopsblog.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
<li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
I hope you enjoyed this Menu and also except more from us.