Navigation menu is one of the most important part of our blog, because with this our readers can find pages they want i.e contact us, feedback us, etc And if menu is animated then reader cant wait to click on it . creating a beautiful menu is not hard in these days but make it compatible with all major is browser is one of the question on these menus
STEPS
- Goto blogger and select your blog in which you want to add menu
- Now select layout tab and add a gadget
- The select html/javascript and paste below Code in it .
<style type="text/css">.exespotlightmenu{width: 100%;overflow:hidden;}.exespotlightmenu ul{margin: 0;padding: 0;font: bold 14px Verdana; /* font style and size */list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.exespotlightmenu li{display: inline-block;position:relative;padding: 5px;margin: 0;margin-right: 5px; /* right margin between menu items */}.exespotlightmenu li a{display:inline-block;padding: 5px;min-width:50px; /* horizontal diameter of spotlight */height:50px; /* vertical diameter of spotlight */text-decoration: none;color: black;margin: 0 auto;overflow:hidden;-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.exespotlightmenu li:hover a{color: white;background: #a71b15; /* background color of spotlight */-webkit-border-radius: 50%; /* large radius to create circular borders */-moz-border-radius: 50%;border-radius: 50%;}.exespotlightmenu li a exespan{position:relative;top:35%; /* move text down so it appears centered within menu item */}</style>
<div class="exespotlightmenu"><ul><li><a href="##########"><exespan>Home</exespan></a></li><li><a href="##########"><exespan>About</exespan></a></li><li><a href="##########"><exespan>Portfolio</exespan></a></li><li><a href="##########"><exespan>Privacy</exespan></a></li><li><a href="##########"><exespan>Contact Us</exespan></a></li></ul></div>
Now Replace RED colour to your desire text And replace ######## with your desire link.
