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!

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

Fauzan request di inbox fb.


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!

BlackLeft.gif BlackRight.gif


GreenLeft.gif GreenRight.gif

RedLeft.gif RedRight.gif


PepelLeft.gif PepelRight.gif


YellowLeft.gif YellowRight.gif


BlueLeft.gif 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijpJ0pTMQ0racDUrpRBaWI0mHyWn266oU7j1I6lkbZ0HlGCvmbBU0R3qrU5pxK7Xstizei5PGE0UVlpqwYnrGLzdfI-cpKzkUxt9IjUMtv8X4I7EMEIyjGli5I1yDjQ6zerZofngg0_6k/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVPwwGP40n14yTfAy8g9tWKWj7LQ93adpSX3qH-RxIp_JXomyfVpibGJm3ZySqsL_B8poIBYsquaife6TzgD0cXugUjzY_RBE_qV9Rx3vV19ptQc7fSSkCkQ6YcO4Frkql6kMGfVvHiE/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)..

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.

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..

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@ ^_^