Add a Shining CSS3 Horizontal Menu

CSS3 is a new technology by which we can made new and professional widgets in just simple steps and very easily. Similarly we have a shining menu which is made by the CSS3 and it's hovering effect is too awesome and very shining that's why we have given it a name Shining Menu. It will give a new look and feel to your blog and visitors will love and ask for this widget OR menu.

Live Demo

Add Shining Horizontal Menu in Blogger

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

 <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/AVvXsEj6a0QIU1HkHuIa0zVxEsOa1GBSmvHWXHqZhKPDD4z08MZgJv4JDvM3xNPPtIFCRsQDK60wcA97aWziqfgxGR1H46bhD1oOr-wZ9e2zVy-sRZ3uw9yx_eOHEHlIhiXfwkgUuk281aTQqVk/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://widgetgenerators.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk15QyJpPUZJxny6bSPM7rLAph7fVpaUfEcvVTu3OM9TZNvLLh_ifMeQfMUiblI7o8WuDQFm9iwyFN0dKeGZAsY9PkXwT45uDgSa530txA0bP3m_qpS9ShgPMtgZBiT2psbWHdBsKO_As/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://widgetgenerators.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://widgetgenerators.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://widgetgenerators.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>

• Save Your Widget.

Make Changes....!

• Replace this Orange Color Link with your own link.
• Replace this Green link with your own tab name. 

If Any Problem Comes, Ask in Comments