Tutorial Tab Menu di sidebar

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

6 comments:

Powered by Blogger.