How to add floating navigation to your blog - Style 3

Assalamualaikum and hi! Today I would like to teach you on how to add this cute floating navigation to your blog. Click here to view the live preview of the navigation. To get this navigation to your blog, simply follow these instructions.

1. If you are using classic template, paste the codes below under/before the codes </style>

2. If you are using template designer. paste the codes below into HTML/ Javascript (Home> Layout > Add a gadget)

<style> .raejun{ width:60px; padding:15px; margin-top:15px; box-shadow:2px 2px 4px #DFDFDF; background:#eee; font:8px tt; text-align:center; Text-decoration:none; color:#888; text-transform:uppercase; display:block; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; border-left:0px solid #000; -webkit-border-top-right-radius: 333px; -webkit-border-bottom-right-radius: 333px; -moz-border-radius-topright: 333px; -moz-border-radius-bottomright: 333px; border-top-right-radius: 333px; border-bottom-right-radius: 333px; } .raejun:hover{ width:66px; border-left:10px solid #aaa; } @font-face { font-family:tt !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } </style> <div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;"> <a class="raejun" href="LINK HERE">link 1</a> <a class="raejun" href="LINK HERE">link 2</a> <a class="raejun" href="LINK HERE">link 3</a> <a class="raejun" href="LINK HERE">link 4</a> </div>