Hai, hari ni macam rajin lebih sikit untuk buat tutorial Navigatable Box. Nanti tak serabut la blog korang dengan macam-macam benda kan. Save space. Coding ini khas untuk Simple Template, denim dan lain-lain template Designer.


1. Copy code dalam textarea dibawah ni.

<style> .adv2 ul{background:url(http://www.easyfreepatterns.com/patterns/237/black-and-white-background-patterns-&171-free-patterns-237639.jpg);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555} .adv2 p{padding:5px;text-align:left;width:250px;color:#555;} a.tablo{ -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:#ffd700; width:50px; font:10px tt; padding:3px; text-decoration:none; color:#555;  display:inline-block; text-align:center; } a.tablo:hover{background:#000000;color:#fff;} ::-webkit-scrollbar { background:#eee; width: 6px; height: 7px; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background-color: #FFD7D7; } @font-face { font-family:tt; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf'); }  </style> <div style="width:250px;"> <center> <a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('1').innerHTML" >About</a>  <a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('2').innerHTML" >Cbox</a>  <a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('3').innerHTML" >Tutorial</a>  <a class="tablo" onclick="document.getElementById('aly').innerHTML=document.getElementById('4').innerHTML" >Contact</a> </center> <div id="aly" style="margin-top:5px;width:250px;"> Say Hi Or Anything Here</div> <div id="1" style="display: none;"> Put Your Code Here 1 </div> <div id="2" style="display: none;"> Put Your Code Here 2 </div> <div id="3" style="display: none;"> Put Your Code Here 3 </div> <div id="4" style="display: none;"> Put Your Code Here 4 </div> </div> 

2. Paste dalam HTML/Gadget untuk Simple Template. Kalau guna denim, korang cari code sidebar dan paste. 3.  code Merah : Tukar ke warna background korang nak di SINI code Hijau : Tukar tittle yang korang nak code Biru : Ganti ayat ataupun code korang nak 4. Lastly, korang boleh cuba tukar font size, width atau height mengikut kesesuaian blog korang. 5. Siap :) Thank you guys!