Tutorial : Multitab Menu Di Sidebar

Fungsi : Benda ni akan menjimatkan sidebar dan mencepatkan loading blog. 

1.Layout-Add A gadget- HTML/JavaScript

2.Tambah code dibawah.

<style>

.kotak navigation {

text-align:center;

width:270px;

color:#333333

}

a.navigation {

cursor:vertical-text;

background-image:url(http://i.imgur.com/pj7k9.png);

width:60px;

text-decoration:none;

color:#333333;

display:inline-block;

border:2px outset #cecece;

text-align:center;

font:16px Yanone Kaffeesatz;

letter-spacing:2px;

-webkit-transition-duration:0.5s;

}

a.navigation:hover {

border:2px ridge #cecece;

background-image:url(http://i.imgur.com/uuOvb.jpg);

background-position:50% 80%;

background-size:400px;

color:#fff;

-webkit-transition-duration:0.5s;

}

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

 </style>

<center><div class="kotaknavigation">

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

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

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

</div></center>

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

CODE MENU 1

</div>

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

CODE MENU 1 LAGI SEKALI

</div></div>

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

CODE MENU 2

</div>

</div>

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

CODE MENU 3

</div></div>

</div>

Code yang di bold tu ialah background, code berwarna merah tu pula wajib diganti.

Tutorial ni bukan aku buat, credit to Fatin Hazwani. Kalau tak faham, boleh tengok dia punya.

---

You may leave your comment :)

---