How to add navigate-able box to your blog's sidebar

Assalamualaikum and hi! This post will guide you on how to add this navigate-able box to your blog's sidebar. You can also put this box somewhere else!

Click here to see live preview

<style type="text/css"> body{ width:350px; } .navigate-ablebox1{ width:100%; } .navigate-ablebox1-header{ background:#f2e1e1; text-align:center; padding:10px; } a.navigate-ablebox1-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:#fff; width:20px; text-decoration:none; border-radius:50%; color:#555; padding:10px; display:inline-block; text-align:center; margin-left:10px; margin-right:10px; } a.navigate-ablebox1-menu:hover{ background:#cccccc; color:#ffffff; } #navigate-ablebox1-content{ padding:10px; border:1px solid #eeeeee; text-align:justify; border-top:none; } </style> <div class="navigate-ablebox1"> <div class="navigate-ablebox1-header"> <a class="navigate-ablebox1-menu" onclick="document.getElementById('navigate-ablebox1-content').innerHTML=document.getElementById('1').innerHTML" >1</a> <a class="navigate-ablebox1-menu" onclick="document.getElementById('navigate-ablebox1-content').innerHTML=document.getElementById('2').innerHTML" >2</a> <a class="navigate-ablebox1-menu" onclick="document.getElementById('navigate-ablebox1-content').innerHTML=document.getElementById('3').innerHTML" >3</a> <a class="navigate-ablebox1-menu" onclick="document.getElementById('navigate-ablebox1-content').innerHTML=document.getElementById('4').innerHTML" >4</a> </div> <div id="navigate-ablebox1-content"> This is the first page. </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.