How to add Navigate-able box to your blog - Style 3

Assalamualaikum,coding ini khasnya dibuat untuk Simple Template, denim dan lain-lain template Designer. Navigate dia macam classic template/blogskins tapi untuk diletakkan di sidebar template designer ^^

Click here to see live preview

<center> <style> .babo{background:url(http://i.imgur.com/idEbA.png);padding:10px;border:3px solid #F2F4F2;text-align:center;color:#555} a.tablo{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor:pointer;background:#F2F4F2; width:20px; text-decoration:none; border:3px solid #fff; color:#fff; box-shadow:1px 1px 3px #eee; border-radius:33px; display:inline-block; text-align:center; margin-left:5px; margin-right:5px; font:16px calibri; } a.tablo:hover{background:#F7E8DE;color:#fff;} #wnsb img{max-width:100%;} </style> <div class="babo"> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> <a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div> <div id="wnsb" style="color:#ccc; padding:15px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px; text-align:justify;"> Navigate around. Replace this with anything/your own words. </div> <div id="1" style="display: none;"> This navigation no.1 , remove this and replace with anything you want to be here. </div> <div id="2" style="display: none;"> You can also put cbox codes here. Just anything without messing the codes. </div> <div id="3" style="display: none;"> The third page </div> <div id="4" style="display: none;"> This forth page </div> </center>  

To have this kind of tab simply follow instructions below.

1. Copy and paste these codes to http://htmledit.squarefree.com/. In this website you may edit this tab the way you want, you may change the colors, the style, and the content of this tab box.
2. Once done, go to Home > Layout > Add a gadget > Pick HTML/Javascript
3. Paste the codes you have edited and save immediately. Do not click 'Rich Text' or else the codes will automatically corrupted. Goodluck! Any questions and problem you may comment down below or ask me on my Ask.fm.