Ini merupakan tutorial yang berkait rapat dengan entri sebelum ini iaitu Tutorial Effect Glossy Background Image Untuk Menubar. Bila nak ada background, baru la belajar macam mana nak pasang kan? Sebelum teruskan membaca entri kali ini, EB nak terangkan bahawa menu ada banyak jenis. Menu bar contohnya adalah seperti pada blog EastbulletDotCom ini sendiri. Satu lagi jenis menu yang selalu diguna blogger adalah jenis menu tab, dan contohnya adalah seperti di blog Lionteen. Memang kelihatan macam lebih kurang je, tapi hakikatnya dua jenis yang berbeza. Banyak lagi jenis menu lain macam dropdown, vertical text, horizontal text. Jadi buat masa sekarang ni, entri ni mengenai tutorial untuk tukar background adalah untuk jenis menu bar.
Ok jom kita teruskan tutorial kali ni. Dalam tutorial ini EB gunakan browser Google Chrome. Dan blog kedua EB sebagai contoh : http://eastbullet-shots.blogspot.com/
Tutorial Menukar Background Untuk Menu Jenis Bar
Sebelum menukar background menu jenis bar, kita kene tahu dulu saiz dan di mana kedudukannya. Oleh itu, buka laman blog masing-masing. Right-Click pada mana-mana bahagian menu sedia ada. Kemudian tekan “Inspect Element”.
Akan keluar satu tab baru di bawah dan beberapa line code akan dihighlight bewarna biru.
Disekitar baris code tu, kita dapat lihat macam-macam code tag yang berada di situ contohnya <div>, <ul>, <li>. Gerakkan pointer mouse pada tag code-tag code tersebut sambil tu kita lihat di atas iaitu pada bahagian menubar di blog. Sekiranya ada highlight biru yang memenuhi sepenuhnya bahagian tersebut, bermakna itu ada baris code yang kita perlu ubah. Biasanya bahagian yang perlu diubah akan ada <ul>. Untuk memastikan bahagian itu adalah yang betul, kita lihat pada bawah sebelah kanan tu akan ada bahagian yang boleh kita hilangkan tick, cuba hilang kan tick pada baris “background” dan lihat apa yang berlaku. Kalau hilang background pada menu tersebut, maka betullah baris code itu yang perlu diubah.
Sekarang ni kita bolehlah ke ruang edit HTML untuk blogspot dan Editor untuk wordpress. Sebagai contoh dalam blog kedua EB ni, background pada asalnya bewarna putih, dan EB nak tukarkan pada warna kuning. Jadi apa yang perlu lakukan tukar kan baris code “background” tu. Search pada edit HTML ( Crtl + F ) dengan carian .tabs-inner .widget ul .
Tukarkan baris pada “background” tu kepada seperti yang ditunjukkan di bawah :
.tabs-inner .widget ul {
background: #ffff00;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
Jika mahu tukar background menu kepada image seperti yang EB telah tunjukkan dalam Tutorial Membuat Glossy Imej Untuk Background Menu Bar, upload image terdahulu (Cara dapatkan url image untuk blogspot ) kemudian, tukar baris code nya akan jadi seperti di bawah :
.tabs-inner .widget ul {
background: url(URL KE IMAGE) repeat-x;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
Banyak lagi yang boleh diubahsuai dengan keadaan menu kita ni. Sebagai contoh lain, kalau nak ubah warna menu bila di klik pun boleh. Tapi EB nak pesan awal-awal, kalau nak godek-godek template blog tu jangan la terlalu berlebih. Fokus adalah lebih kepada content, template hanya untuk memudahkan pembaca. Sampai di sini sahaja Tutorial Menukar Background untuk menu jenis bar. Teruskan membaca dan mengikut blog EastbulletdotCom.
tutorial yg bagus. good sharing
thanks share tapi ada tak paham macm saya nak tukar warna font dekat tab menu tu..pg dekat inspect element tu and tukar tapi dia tak save ek? so nak save dia mcm mana yerrr?
yang inspect element hanya untuk kita check je supaya mudah untuk rujukan. nama pun inspect. jadi kalau nak tukar, kene pergi pada edit html pada dashboard, dan cari ruangan seperti yang ditunjukkan dalam inspect element tadi.