Navigate-able Box for Sidebar


Assalamualaikum ! Pagi tadi Liyana dapat komen yang Liyana menang top rafferal   dan 1 doodle . Tak sangka ! Petang ni Liyana nak buat tutorial Navitagation , Navigation nya macam bawah ni :-


<style>.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);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:#fff;width:20px;text-decoration:none; border:1px dashed #BBBBBB; border-radius:33px;color:#555; display:inline-block;text-align:center;}a.tablo:hover{background:#ccc;color:#fff;} </style><div id="adv2" class="adv2"><ul><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> </ul><div id="wnsb" style="width:250px;">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>



  First, edit code benda ni dekat http://htmledit.squarefree.com/
  Paste codes yang selesai diedit tu dekat dalam HTML/Gadget.
  lepas paste dekat HTML/GADGET tu, jangan click 'Rich Text' . Terus save. Kalau tak, codes tak jadi.
 Background,color, semua boleh tukar. Kalau tak tau macam mana nak tukar, boleh tanya saya ^^


Disebabkan pengguna template designer takde tab ala-ala blogskin , so saya try buat benda ni untuk diletakkan disidebar . Style yang lain akan diupdate . Blogskins / classic template pun boleh guna .