- Amirah Azman -

Assalammualaikum dan salam sejahtera

harini nak post tentang tutorial Navigate-Able Box part 2..sesiapa yang tertinggal Part 1 tekan linki bawah ni
http://eira-shamiera.blogspot.com/2012/12/navigate-able-box-1.html

okey..untuk kali ini dia kelihatan seperti ini

teruskan dengan tutorial

<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:#FFDDDD;
width:50px;
font:8px tt;
padding:3px;
text-decoration:none;
color:#555;
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#FF7171;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;">
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2Ollg70UH4ag1JkgsP2AUvvtuanmhtqRbXsOFGIVIy5mY_TtsjeUVXUv77CR9e90omhdOShfbaK3V3mzjEwMfSHZ3GMakt5x8SSnU7V23JHdHt69zspax-swu9DzP2mD76j7RovvLgIN/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px; ">
</div>

<center><a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2Ollg70UH4ag1JkgsP2AUvvtuanmhtqRbXsOFGIVIy5mY_TtsjeUVXUv77CR9e90omhdOShfbaK3V3mzjEwMfSHZ3GMakt5x8SSnU7V23JHdHt69zspax-swu9DzP2mD76j7RovvLgIN/s1600/stripe_62c6ac6939f9a44527fb43f6f1c8ce64.png);width:250px;padding:2px; margin-top:5px; ">
</div>

<div id="wnsb" style="margin-top:5px;width:250px;">
Ayat Pertama contohnya cbox,fanpage dll</div>

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

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

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

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

</div>

Mula-mula edit code-code ini disini terlebih dahulu http://htmledit.squarefree.com/
setelah selesai,paste semua code yang telah korang edit di HTML/GADGET.
Pastikan lepas paste dekat HTML/GADGET tu, jangan click 'Rich Text' . Terus save. Kalau tak, codes tak jadi.
Peringatan

PURPLE - URL IMAGE/BACKGROUND

BIRU - SIZE (MENGIKUT SIDEBAR)
MERAH - CODE WARNA (CARI SINI)

KUNING - AYAT ANDA