How To Add A Shining CSS3 Horizontal Menu For Blogger

How To Add A Shining CSS3 Horizontal Menu For Blogger

The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.Horizontal menu best alter

This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:

1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below:

........................................................................................................................................

<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/AVvXsEjOgKx_XNFdmLhDuiMjsVnnr2m0kybrMxQPgPdK1kO-vrsrMLAvwAzKIR5n4c4xEMaDop_QLhI7l12oMV-i6LYT2biX7yNEGlR3K0Z-4gUrUWP8O_49pLl3p9Eq1b_ecmX1JyS9WOcVt0Q/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://javaid1818.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3YgMbJipNeh1UP-6Mb2xDAl0-UfkqLi6RoZO9vAVOMAepa8jC3ouTiqOIZsfCWG2WmP1Ff70jrTXVVYo-uMd9dqgMt_GmkA8H3iyqufVOUYgCO1ekBnAdPI96S38_5ADYczRU1gA4fc/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://javaid1818.blogspot.com/">Home</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Features</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Products</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Contact</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Tips</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Tricks</a></li>
        <li><a href="http://javaid1818.blogspot.com/">About</a></li>
    </ul>

</div>

..................................................................................................................................................
NOTE: 
3. - Replace the URL in blue with your own.
    - Replace the tab name in red with your own.
4. Finally click on save.
Now you can see the result