Tutorial : Navigation #2

- You always make me crazy [ KitKat & Ribena ] -

 Step By Step 

1. Log in  Dashboard  Reka Letak  Tambah Alat  HTML/JavaScript

2. Copy kod di bawah

<div class="widget-content">

<style>

.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:220px;color:#555}

web 

.adv2 p{padding:5px;text-align:left;width:220px;color:#555;}

.babo{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:3px solid #FF668A;text-align:center;width:220px;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:#ff668a;

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 id="adv2" class="adv2">

<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>

<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('5').innerHTML">5</a></div>

<center>

<div id="wnsb" style="width:220px;color:#666666; padding:5px;border:3px solid rgb(228, 228, 228);border-top:none;font:11px fingerlinger; letter-spacing:1px;">

AYAT KORANG♡ ツ <br /><br />

1. TAJUK 1<br />

2. TAJUK 2<br />

3. TAJUK 3<br />

4. TAJUK 4<br />

5. TAJUK 5<br />

</div>

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

<div style="background: #FFFFFF repeat;"><center><div class="separator" style="clear: both; text-align: center;">AYAT KORANG♡ ツ <br /><br>

1. TAJUK 1<br />

2. TAJUK 2<br />

3. TAJUK 3<br />

4. TAJUK 4<br />

5. TAJUK 5<br />

</div>

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

<div style="background: #FFFFFF repeat;">

<div class="separator" style="clear: both; text-align: center;">

LETAK KOD DI SINI</div></div></div></div>

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

<div style="background: #FFFFFF repeat;">

<div class="separator" style="clear: both; text-align: center;">

LETAK KOD DI SINI</div></div>

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

<div style="background: #FFFFFF repeat;">

<div class="separator" style="clear: both; text-align: center;">

LETAK KOD DI SINI</div></div></div>

<div id="5" style="display: none;">

<div style="background: #FFFFFF repeat;">

<div class="separator" style="clear: both; text-align: center;">

LETAK KOD DI SINI</div></div></div>

3. Pastekan dalam ruangan kotak kod HTML

4. Tekan SAVE!

5. Selesai sahaja tutorial ini! Assalamualaikum..