How to add Sticky Navigation Bar to your Blog - Style 3

Straight to the point, click this link to see the live preview of the navigation bar -> Click here. 

For classic template, paste the code below under </style>

For blogger template designer, paste the code in add HTML/Javascript area.

<style type="text/css"> .floating-navi{ width:100%; background:#dddddd; position:fixed; top:0px; left:0px; height:20px; } .floating-navi-box{width:100%; position:fixed; text-align:center; top:20px; left:0px; height:20px; } a.floating-navi-menu{ background:#f3e1e1; text-decoration:none; color:#777777;border-top:none; 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;-webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; width:60px; } a.floating-navi-menu:hover{ background:#dcdcf2; color:#000; } </style> <div class="floating-navi-box"> <a class="floating-navi-menu" href="LINK">ABOUT</a> <a class="floating-navi-menu" href="LINK">TUTO</a> <a class="floating-navi-menu" href="LINK">LINKIES</a> <a class="floating-navi-menu" href="LINK">FREEBIES</a> <a class="floating-navi-menu" href="http://www.blogger.com/follow-blog.g?blogID=YOURBLOGID">FOLLOW</a></div> <div class="floating-navi"> </div>

New look

Assalamualaikum,