How to add Navigation Menu to your blog - Style 7

I will teach you on how to get the menu button of this style. This is the live preview of the button, you may hover your cursor over these menus to see the hover effect :)

link 1 link 2 link 3 link 4
To get this menu button, follow the instruction given below.

1. Edit the codes

To edit the codes, I recommend you to use http://htmledit.squarefree.com/ to edit while viewing the Live Preview immediately. The main codes that you need to change are - YOURLINKURL (Change this to your link url) & titlehere (Change this to your own menu title)

<style> .kevo{ background:#A2C898; width:50px; display:inline-block; text-align:center; color:#fff; margin-bottom:1px; font:11px arial; text-transform:uppercase; letter-spacing:2px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding:1px; border:1px solid #A2C898; text-decoration:none; } .kevo:hover{ background:#FFffff; border:1px solid #A2C898; color:#A2C898; } @font-face { font-family:tt !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } </style> <a class="kevo" href="YOURLINKURL">titlehere</a> <a class="kevo" href="YOURLINKURL">titlehere</a> <a class="kevo" href="YOURLINKURL">titlehere</a> <a class="kevo" href="YOURLINKURL">titlehere</a>

2. Apply the codes

For Blogger Template Designer user, you may put this navigation on your gadget section. Go to Home > Layout > Add a gadget > Choose HTML/Javascript > and paste the codes.  For blogskins/ Classic Template user, you may put the codes anywhere you wanted the navigation to be. Thank you :)