06 January 2013

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

8 comments:

  1. INSYAALLAH.. NANTI MAHU CUBA..

    ReplyDelete
  2. oppa risau kalau letak mcm gajet ,..
    nak memg nak tp takut berat laaaa..
    hahahaha.. sedih ..
    pape pun blog adik ni super duper pink ..oppa suke..

    ReplyDelete
  3. Wahh :) Berguna coding ni :)

    ReplyDelete
  4. @sabry oppa Kalau buat macam ni, berkurang la beratnya. ^^

    ReplyDelete
  5. Hye, I'm using this tuto thanks :)

    ReplyDelete

Maaf kalau tak dapat nak balas komen.