Sunday, October 10, 2010

Tutorial: Membina Tab Menu Horizontal


Kita sambung lagik dengan entri tutorial Membina Tab Menu hasil request dari rakan blogger blog Amyna. Haku dah lupa siapa lagik request.. yang ingatnya CtNurkhijah & Fauzan. Ingat sebab ada bukti di simpan. Mana yang sound kat SM & CB nun.. harus tenggelam sudah. tapi x apa lah.. rakan² yang memerlukan sila lah ya. Cheq tak marah aihhh!

Membina Tab Menu

Tab Menu horizontal yang dimaksudkan adalah tab menu yang berbentuk begini ya. Mendatar..

tutorial Membina Tab Menu
Fauzan request di inbox fb.

tutorial Membina Tab Menu horizontal
Ct request di ruangan komen.

Haku kategorikan step tutorial nih kepada 3 bahagian..

Bahagian i = Jenis2 Button Tab Menu mengikut warna
============================================

Sebelum bermain dengan aktiviti kopipes Coding, haruslah design dulu Button Tab Menu. Design ikut citarasa sendirik. Banyak software boleh guna untuk design button nih. Antaranya :
  • Adobe Photoshop
  • Photoscape.
  • picnik
Ini adalah antara button yang telah disediakan mengikut warna.. Kalau nak lebih baik design lah sendiri ya!


tab menu BlackLeft.gif BlackRight BlackRight.gif


GreenLeft.gif Cara Membina Tab Menu GreenRight.gif


RedLeft.gif Langkah Membina Tab Menu RedRight.gif


PepelLeft.gif step by step Membina Tab Menu PepelRight.gif


YellowLeft.gif tutorial Membina Tab Menu YellowRight.gif


BlueLeft.gif Membina Tab Menu blogspot BlueRight.gif



Bahagian ii - Memasukkan Coding Jenis Design Button Tab menu
================================================

Langkah/qoedah² untuk memasukkan coding button Tab Menu tersebut :-

a) Log in ur blog ==> Page Layout (Design) ==> Edit HTML. Seterusnya, Tick [/]Expand Widget Templates pada kotak kecik di sebelah tuh.

b) Cari Keyword/Code ini: ]]></b:skin>

NOTE: Untuk memudahkan pencarian keyword anda tekan Function key CTRL+F pada keyboard dan taip keyword/code yang di perlukan.


#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://2.bp.blogspot.com/_kNeOD7hUxkE/TLEnYbZRI4I/AAAAAAAACy4/mq5ChqZLdNE/s1600/BlackLeft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display :block;
background: url("http://3.bp.blogspot.com/_kNeOD7hUxkE/TLEnYtjRFhI/AAAAAAAACzA/pskD0jGtyeo/s1600/BlackRight.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}



c) Kemudian paste kan coding dalam kotak pink nie di Atas keyword/Code:]]></b:skin> .Ingat!! DiATAS tau!

Bahagian yang tulisan biru tu.. boley di gantikan dengan Url design button mengikut kesukaan anda. Untuk mendapatkan Url tersebut boley rujuk pada button² di atas tu ehh. kemudian right klik ==> Properties (Rujuk gambar di bawah)..

Membina Tab Menu

Automatik akak keluar box ini..



Copy url yang di select (Location) dan paste kan gantikan dekat bahagian tulisan warna biru tu..

okeh, selesai bahagian ii..

Bahagian iii = Menamakan Button Tab Menu
================================================

Bahagian nih yang mungkin menyebabkan Button menu anda tak berfungsi. Apapun cuba perhatikan bebaik coding tu dan ikut step yang haku tunjuk. mesti boley punya..InsyaAllah :)

a) Copy coding dalam kotak pink nie di Atas keyword/Code: <div id='content-wrapper'> .Ingat!! DiATAS juga tau!


<div id='tabshori'>
<ul>
<li><a href='http://amyna2109.blogspot.com'><span>Utama</span></a></li>
<li><a href='http://amyna2109.blogspot.com'><span>Tentang Amyna</span></a></li>
<li><a href='http://amyna2109.blogspot.com/search/label/PEtuA%20vs%20Info'><span>Petua vs info</span></a></li>
<li><a href='http://amyna2109.blogspot.com'><span>Contest</span></a></li>
<li><a href='http://amyna2109.blogspot.com'><span>Award</span></a></li>
<li><a href='http://amyna2109.blogspot.com/search/label/tutorial'><span>Tutorial Amyna</span></a></li>
<li><a href='http://amyna2109.blogspot.com'><span>Tag</span></a></li>
</ul>
</div>


NOTE: Untuk memudahkan pencarian keyword anda tekan Function key CTRL+F pada keyboard dan taip keyword/code yang di perlukan. kemudian enter.. pasti jumpa. sangat mudah kan!

c) Kemudian paste kan coding dalam kotak pink nie di atas keyword/Code: <div id='content-wrapper'>. Contoh seperti Gambar di bawah.


Bahagian yang di highlight tuh, adalah coding yang perlu dimasukkan. Ingat ya.. letak di atas keyword/Code : <div id='content-wrapper'>

Nama button terpulang pada anda nak letak dengan nama apa. Jadik tulisan Pepel tersebut adalah bahagian yang boleh ditukar nama button tab menu. Contoh nama button 'utama' tu di tukarkan kepada 'home'.. Opss! url blog haku tu perlu digantikan dengan url blog anda..Mudah kann!!

Jika ada pertambahan Button Tab Menu lagik just kopipes kan coding nie href='http://amyna2109.blogspot.com'><span>Utama</span></a></li><li><a dan susun mengikut turutan yang kita mahu.


selesai sudah... Preview & Save Template ^_^


Nota tambahan:

Button Tab Menu tersebut boley juga di link kan dengan Url Label Blog.. Cara untuk mendapat kan Url label blog adalah :-

a) Tentukan label pada Link blog anda.

Membina Label Tab Menu

yang haku bulatkan pink tu adalah label untuk family. Bila klik pada label tersebut Automatik cerita ceriti yang diletakkan bawah label family akan dipamerkan dalam url label blog yang sama.

b) Klik pada url label blog tersebut dan Copy..

Label Tab Menu
c) Kemudian Paste kan pada Link Button Tab Menu. Kira anda gantikan Url Blog dengan Url Label Blog.

contoh :

Url Blog

<li><a href='http://amyna2109.blogspot.com'><span>Utama</span></a></li>

Url Label Blog

<li><a href='http://amyna2109.blogspot.com/search/label/fAmiLy'><span>Utama </span></a></li>


Di bawah nama Button menu yang sama iaitu 'Utama' tapi cerita ceriti dari url blog & url label blog berbeza.. Jelaskan perbezaan yang haku maksudkan..

Selain itu boley juga rujuk disini http://www.global4life.com , Okehh semoga bermanfaat ^_^



sayang @myn@ ^_^

5 comments:

azhar said...

thanks for sharing...

Amyna said...

welcome =D

ctnurkhijah said...

TQ...
jap lagi ct try buat....la ni nak siapkan koje dulu..

Amyna said...

welkam..
Okehh, kalau ada yang kabur² inform ehh.. :-)

Kuman Chaos said...

fullamak.. turotial yang panjang.. respect kak.. nnt bleh try
kuman "Raba-raba..." Entry

LinkWithin

Related Posts Plugin for WordPress, Blogger...