How to add sticky navigation bar to your blog - Style 1

Assalamualaikum and hi! As I mentioned in the title, in this entry I will teach you on how to add this sticky navigation bar to your blog. You can use this bar as the main navigation of your blog which will lead readers to other pages such as About Me, Freebies and Archive page. Click here to see Live Preview of the navigation bar. 

1.Edit the codes

To edit the codes, please use http://htmledit.squarefree.com/ because I swear it is the easiest and quickest way to edit some html codes. 

<style type="text/css"> .nav-bar-wnsby{ width:100%; background:#222; position:fixed; top:0px; left:0px; box-shadow:0 0 6px #000; text-align:center; padding:10px;} a.navbar-menu-button{ background:#444; text-decoration:none; color:#fff; padding:5px; font:11px arial; margin-left:5px; margin-right:5px; -webkit-transition:All 0.4s ease; -moz-transition:All 0.4s ease; -o-transition:All 0.4s ease; display:inline-block; width:60px;} a.navbar-menu-button:hover{background:#fff; color:#000; } </style> <div class="nav-bar-wnsby"> <a class="navbar-menu-button" href="YOURLINKHERE">OPTION</a> <a class="navbar-menu-button" href="YOURLINKHERE">OPTION</a> <a class="navbar-menu-button" href="YOURLINKHERE">OPTION</a> <a class="navbar-menu-button" href="YOURLINKHERE">OPTION</a> <a class="navbar-menu-button" href="YOURLINKHERE">OPTION</a> </div>

2. Apply the codes

For Blogger Template Designer user, paste the edited codes to a new gadget on your sidebar. Make sure to leave the title empty. To add a new gadget :  Home > Layout > Add a Gadget > Choose HTML/Javascript > Paste the codes > Save.

For classic template, simply paste the codes under </style>

Thank you for reading :)