Tutorial :Tab Menu di Sidebar

Apabila tab menu ditekan, maka paparan yang korang lihat akan terkeluar.

1. Dashboard --> Layout --> Add Gadjet --> HTML/ Java Script --> copy coding ni.

<style>

.kotak navigation {

text-align:left;

width:290px;

color:#333333

}

a.navigation {

cursor:vertical-text;

background-image:url(URL BACKGROUND);

width:75px;

text-decoration:none;

color:#333333;

display:inline-block;

border:2px outset #cecece;

text-align:center;

font:14px Yanone Kaffeesatz;

letter-spacing:2px;

-webkit-transition-duration:0.5s;

}

a.navigation:hover {

border:2px ridge #cecece;

background-image:url(URL BACKGROUND);

background-position:50% 80%;

background-size:400px;

color:#fff;

-webkit-transition-duration:0.5s;

}

#fh img { max-width:260px;}

 </style>

<center><div class="kotaknavigation">

<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('a').innerHTML" >Tajuk 1 </a>

<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('b').innerHTML" >Tajuk 2</a>

<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('c').innerHTML" >Tajuk 3</a>

</div></center>

<div id="fh" style="width:270px;color:#333333;font:12px verdana;">

<br /><br /><br />

<center>

Something yang korang nak paparkan before menu tab di click

 </center>

</div>

</center></div>

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

Something yang korang nak paparkan di tajuk 1

</div>

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

Something yang korang nak paparkan di tajuk 2

</div>

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

Something yang korang nak paparkan di tajuk 3

</div>

Paste di ruangan content --> Save