Tutorial Tab Menu di sidebar

Friday, March 01, 2013


Assalamualaikum =D


Sebelum tu, huda nak minta maaf atas kelewatan updated tutorial yang korang request ni. Maaf ye, sebab kalau dekat kolej tak sempat, kalau dekat rumah baru sempat (sekarang tengah holiday =D). Ok, direct to the point, so macam tajuk dekat atas tu huda akan buat satu tutorial berkenaan dengan menu tab di sidebar (macam huda punya tu).


contoh menu tab (join?ask and banner)


Follow the step below :-

1. You must have the blogger account, then follow the step below.

2. Layout > Add a Gadget > then choose HTML/Java script box

3. Copy the code below and PASTE the code into your HTML/Java script box(step2).
<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" >TAB1</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('b').innerHTML" >TAB2</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('c').innerHTML" >TAB3</a>
</div></center>
<div id="fh" style="width:270px;color:#333333;font:12px verdana;">
<br />
ISI FRONT PAGE (SEBELUM tab 1 and etc)
</div>
<div id="a" style="display: none;">
ISI UNTUK TAB1
</div>
<div id="b" style="display: none;">
ISI UNTUK TAB2
</div>
<div id="c" style="display: none;">
ISI UNTUK TAB3
</div>

NOTA :
Warna Purple (URL BACKGROUND) - tukar dengan code background korang,
Warna Merah ( Isi untuk setiap tab) - tukar dengan code HTML/ ayat korang.
4. Then SAVE it. =D


New Tutorial (on 1/3/2012) --> Tutorial 1 | Tutorial 2 | Tutorial 3

You Might Also Like

6 comment di sini.

  1. bole tak tolong highlight kan ape yang kena tukar ? sbb anna tak taw laaa .

    ReplyDelete
  2. tak paham lh . highlight kan lh tolong mne yg nak kena tuka .

    ReplyDelete
  3. Salam perkenalan. Feel free to visit my blog :)

    ReplyDelete