Tutorial : Cara Buat Menu Tab Di Blog

Assalamualaikum & salam sejahtera to all readers

Entry ini ditujukan kepada mereka yang ingin membuat menu tab di blog mereka secara manual.. Bila kita buat carian di search engine, memang terdapat bermacam-macam version untuk membuat menu tab ini. Namun, saya cadangkan 2 cara ini yang agak mudah iaitu cara pertama tidak melibatkan penambahan / pengubahsuaian kod HTML manakalan cara kedua melibatkan penambahan / pengubahsuaian kod HTML.

CARA 1 - Tidak melibatkan penambahan / pengubahsuaian kod HTML

1. Sign in Blogger

2. Dashboard > Add Gadget > HTML/Javascript

3. Copy kod berikut dan paste di  ruang HTML/Javascript tadi

<center>

<span style="font-normal Arial,sans-serif;font-size:20px;"><span style="font-clour:#FFFFFF;">

<p><div style="background-color:#000000;height:35px;"> <a href="http://(url blog anda)/search/home" " title='home'>HOME</a>

<a href="http://(url blog anda)/search/label/tutorial blog" title='tutorial blog'>TUTORIAL BLOG</a>

<a href="http://(url blog anda)/search/label/resepi" title='resepi'>RESEPI</a> | <a href="http://(url blog anda)/search/labelhubungikami" title='hubungikami'>HUBUNGI KAMI</a>

 <br /> </div> </p></span></span></center>

4. Anda boleh tukar saiz text dan saiz tab menu pada kota yang berwarna hijau.

5. Gantikan dengan nama url blog anda

6. Ubah tajuk tab mengikut menu anda (cth : perkataan berwarna biru di atas)

7. Sekiranya anda ingin menukar warna tab mengikut warna pilihan anda, sila rujuk kod warna di sini. 

Dan

CARA 2 - Melibatkan penambahan / pengubahsuaian kod HTML 

1. Dashboard > Template > Edit HTML

2. Tekan Ctrl F then cari kod berikut di ruang searchh box or anda boleh cari secara manual satu per-satu..

]]></b:skin>

3. Then, copy code di bawah ini :

a.menutab {
background:url(URL BACKGROUND IMAGE);
display: inline-block;
font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 2px solid #eee;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 4px 9px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #ccc;
background:#e23767;
color:#fff;
}

# warna ini - untuk tukar warna hover menutab. Sila rujuk code warna HTML di sini.

4. Paste kod tersebut di atas atau sebelum kod  ]]></b:skin> tadi

5. Sila semak hasilnya di 'Preview', sekiranya tiada error, bolehlah 'Save'

6. Seterusnya pergi ke Layout > Add gadget > HTML/Javascript

7. Copy code di bawah ini dan paste di dalam ruang HTML/Javascript tadi 

<center>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
</center>

8. Sekiranya anda ingin menambah menu di tab anda, hanya copy and paste kod berikut dan letakkan sebelum kod </center> : 

 <a class="menutab" href="URL LINK">NAMA TAB</a>  

URL LINK - Sila ganti Url Link ini dengan link anda (cth : http://www.myexclusiveboutique.com)

NAMA TAB - Nama tab itu pula anda gantikan dengan nama tab pilihan anda (cth : Resepi, Hubungi Kami)

 

9. Semak semula kod-kod yang diletakkan tadi. Bila dah habis buat semua boleh 'Save'. Bolehlah tengok hasilnya.

Semoga tutorial ini dapat membantu anda untuk membuat tab menu di blog anda.

Selamat mencuba & semoga berjaya.