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

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.
<style type="text/css"> a.navigateable-box-menu{ -webkit-transition: all 0.5s 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:#FFDDDD; width:50px; font:8px tt; padding:3px; text-decoration:none; color:#555; display:inline-block; text-align:center; } a.navigateable-box-menu:hover{background:#FF7171;color:#fff;} </style> <div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTQ8lzt8qrXLyrSBtPtGcTYW6oqVE2LgzTkEg5zNGHwJ8MoN6cfzT1v6UaNiiGuzsLAXZ4jPmqP4pcUNiY-YKzZpO2BEiGcu1oKM56SWRuwxFP1lB3nTbHB0pBTY1KA7AhD2Pkw6V0rgp/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:100%;padding:2px; "> </div> <center> <a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a> <a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a> <a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a> <a class="navigateable-box-menu" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a> </center> <div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTQ8lzt8qrXLyrSBtPtGcTYW6oqVE2LgzTkEg5zNGHwJ8MoN6cfzT1v6UaNiiGuzsLAXZ4jPmqP4pcUNiY-YKzZpO2BEiGcu1oKM56SWRuwxFP1lB3nTbHB0pBTY1KA7AhD2Pkw6V0rgp/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:100%;padding:2px;margin-top:5px; "> </div> <div id="wnsb" style="margin-top:5px;padding:10px;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;"> This navigation no.3 </div> <div id="4" style="display: none;"> This navigation no.4 </div> </div>  
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.