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 000 kuceng marie:

...sWeeT uMi... said...

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

ieyza afieyna said...

@...sWeeT uMi...

ok.. hee.. ;)

bila blog bercerita said...

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

ieyza afieyna said...

@bila blog bercerita


hehe.. sharing is caring,,huhu

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

amir aizat said...

terbaik laah!

ieyza afieyna said...

@amir aizat

hehe.. :)

Cik Puan Zura said...

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

ieyza afieyna said...

@Cik Puan Zura

hee.. ok kak .. ;)

along_anim said...

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