Tuesday, June 7, 2011

Tutorial: Tab Menu View..

Bismillahirrahmanirrahim..
Assalamualaikum
♥ Hello silent reader ! ♥

Hye all. . have a nice day ok. :D
Hari ini ieyza ada wat something kat blog ieyza.. ieyza buat tab menu view.
so ieyza rasa nak share la kat korang.. before ni ieyza ada ternampak kat satu blog tu,
tapi ieyza tanya macam mana tutorial. dia tak nak bagitahu. tak pa. last ieyza search sendiri kat google. so jumpa. so ieyza nak share la dengan korang2 semua. okea.. ta kedekut punya. hee.
tapi kalau korang dah tahu tak pa la. saja nak share., 

eh, jap. korang tau ke tab menu view tu macam mana? ha tak tau.,
okea, ieyza gitau. tab menu macam pic kat bawah..





ha. macam kat atas nie la. kan ada tab Owner, My Banner, Jom Usha ..
so klik satu-satu tab tu dia akan muncul.. ta faham. tengak kat sidebar ieyza k. after guna tuto macam nie blog rasanya tak da la berat sangat. sebab page tak menampung banyak gadget kan. 
so, caranya senang saja. hee..

Firstly,, korang pergi Dashboard > Design > Edit Html 

dan seach code kat bawah..
]]></b:skin>
then,copy code kat bawah ni, paste di ATAS code yang korang jumpa tadi.
/* tab model 2 ateonsoft.com */ 
div.Tabateonsoft div.TFs 
{height: 30px; 
overflow: hidden;
}
div.Tabateonsoft div.TFs a
{float: left; 
display: block; 
text-align: center; 
text-decoration: none; 
font: normal 12px arial; 
padding:3px 5px 3px 3px; 
margin:0 5px 0 0;
letter-spacing:-0.07em;
background:url('URLBACKGROUND');
color: #ffffff;
border:5px groove #ffffff;
  -moz-border-radius: 12px 11px;
border-radius: 13px 12px;
}
div.Tabateonsoft div.TFs a:hover
{ background:url('URL BACKGROUND');
border:5px groove #ffffff;
  -moz-border-radius: 12px 11px;
border-radius: 13px 12px;
}
div.Tabateonsoft div.TFs a.Active
{ background:url('URL BACKGROUND');
color: ;
border:5px groove #ffffff;
  -moz-border-radius: 12px 11px;
border-radius: 13px 12px;
font-weight:bold;
}
div.Tabateonsoft div.Pages
{clear: both; 
overflow: hidden; 
height:240px; 
-moz-border-radius: 11px 11px;
border-radius: 11px 11px; 
padding:0;
background:url('') 
-moz-border-radius:5px;
}
div.Tabateonsoft div.Pages div.Page
{height: 100%;
padding: 0px; 
overflow: hidden;
}
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;
padding: 3px 5px; 
text-align:left;
}
yang warna merah tu korang gantikan dengan warna yang korang suka,
yang warna fuchsia tu untuk url background k.

pastu dah paste.
copy lagi code kat bawah. tapi paste kat bawah ]]></b:skin> k,, 
tadi kat atas ni kat bawah plak.
<script src='http://h1.ripway.com/andisyam/javascriptku/tabview2atensoft.js' type='text/javascript'/>
ok. save je. k..

pastu pergi ke design > add gadget > html/javascript
paste code kat bawah ni pula..
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
ok. korang ganti kan tajuk untuk tab korang kat tab 1,tab 2, tab 3, n tab 4 tu..
disini letakkan kode untuk tab tu. pastekan kode korang tu.
cth: shoutmix.  oke. siap. save k, kalau tak jadi gitau ieyza...

Bye..
Photobucket

9 comments:

  1. good info ni...t umi try ek...skrunk lum ada masa huhuhu...happy blogging yeh (",)

    ReplyDelete
  2. baeknye die niyh xkdikot ilmu...
    gud2~~huuu...p peneng lah ple nak wat..byk sgt step..aiyakkk...!!

    ReplyDelete
  3. @bila blog bercerita


    hehe.. sharing is caring,,huhu

    la tak susah la.. just copy and paste. then pilih background je. simple. hee

    ReplyDelete
  4. panjangnyer...hehe..akak nak try tapi kene tunggu hari x bz...tq ieyza...

    ReplyDelete
  5. thank ieyza...tutor ieyza bnyk mmbntu sy dlm mnyiapkn blog sy..hope dtg la mlwat blog sy 2...huhuhu..thank you so much....

    ReplyDelete

Terima kasih sudi komen :)
kerana 1 komen amat bernilai dan
mampu buat ieyza tersenyum ^_^