Navigate-able Box 1

Assalammualaikum dan salam sejahtera

pagi-pagi buta nie Mira nak buat tutorial yang direquest..Mira sekarang boleh lar dikatakan rajin*nyampah dengar...haha..buat masa sekarang ja..nanti-nanti tak dah..haah..teruskan dengan tutorial dibawah okey..:)

Navigate-able Box diberi nama..hemtam aja lar..
ianya seperti ini

<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">
<center><style>
.babo{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:3px solid #F2F4F2;text-align:center;width:250px;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;
font:16px calibri;
}

a.tablo:hover{background:#F7E8DE;color:#fff;}

#wnsb img{max-width:245px;}
 </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="width:250px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
TULISAN DIHADAPAN SEKALI (CTH: CBOX,FANPAGE DLL)
</div>

<div id="1" style="display: none;">
KOTAK 1
</div>

<div id="2" style="display: none;">
KOTAK 2
</div>

<div id="3" style="display: none;">
KOTAK 3
</div>

<div id="4" style="display: none;">
KOTAK 4

</div>
</center>

1. Mula-mula edit code disini untuk memudahkan kerja http://htmledit.squarefree.com/
2. Dah selesai edit ,pastekan semua code korang tu dan letak di dalam HTML/Gadget.
3. Pastikan lepas paste dekat HTML/GADGET tu, jangan click 'Rich Text' . Terus save. Kalau tak, codes tak jadi.

PERHATIAN
tukarkan warna yang telah di warnakan diatas
PURPLE - URL IMAGE/BACKGROUND
MERAH - KOD WARNA (CARI SINI)
BIRU - SAIZ (IKUT KESESUAIAN SIDEBAR)
HIJAU - AYAT ANDA

okey selesai..tak faham atau nak request tuto..komen disini ok..:) insya allah ada masa Mira buatkan..