Tutorial : Navigation Able Box

Assalamualaikum ^^

Tadi ada orang Request Tutorial lagi , tapi kali ini dekat Facebook pulak.So , jom baca Request Tutorial dia :

Board of Me yang baru ? Yang mana satu ? Tengok bawah nie :

1.Dashboard > Layout > Add a gadjet > Html/JavaScript

2.Copy code bawah nie.Then , pastekan dalam kotak HTML/JavaScript tadi :

<style>
.adv2 ul{background:url(URL BACKGROUND);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:210px;color:#555}
.adv2 p{padding:5px;text-align:left;width:210px;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 #fff;
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(URL BACKGROUND);padding:5px;border:2px solid #fee2e8;text-align:center;width:210px;color:#cb8e92}
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:#db8c95;
width:20px;
text-decoration:none;
border:3px solid #ffdee2;
color:#fcaebf;
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:200px;}
 </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:210px;color:#ccc; padding:5px;border:2px solid #fee2e8;border-top:none;font:11px arial; letter-spacing:1px;">AYAT DEPAN SEKALI.
</div>
<div id="1" style="display: none;">
CODE CHATBOX</div>

<div id="2" style="display: none;">
<center>CODE CONTACT ME !
</center></div>

<div id="3" style="display: none;">
<center>CODE ASK FM</center>
</div>
<div id="4" style="display: none;">CODE CREDITS</a>
<br />
</div>

3.Tukarkan :

Hijau : URL background.
Biru   : Code warna.cari di SINI 
Merah : Tukar dengan ayat / code korang sendiri

Nak senang , korang edit semua dekat http://htmledit.squarefree.com/ dulu.Then , baru save.

4.Save ! 

Dah siap.Menjadi tak ? kalau menjadi tu komen dan credits lah ye.kalau tak menjadi , boleh tanya Nabilah di facebook , Twitter , Ask.Fm , kalau nak tanya kat ruangan komen bawah nie pun boleh.