Menu Tab Navigasi Dengan Kode CSS

July 6, 2009 · Posted in Tutorial Blog

Kali ini aku akan memberikan sedikit tips yang juga baru saja aku praktekan sendiri. Bagaimana cara membuat menu tab navigasi seperti yang ada dalam Blogger Sragen. Cara ini tergolong sangat mudah, karena di samping hanya menggunakan Kode CSS dan Kode HTML yang ada. Cara ini juga mampu memberikan sedikit fasilitas yang hampir sama dengan kode javascript.

Baik, nggak usah bertele – tele lagi. Mari kita simak bagaimana membuat Membuat Menu Tab Navigasi Dengan Kode CSS. Oh ya, cara ini aku khususkan buat Blogger atau blog di blogspot.

Download dahulu kode CSS, gambar template dan kode htmlnya di sini. Untuk contoh jadinya download saja di sini.
Lihat – lihat saja dulu seperti apa contoh jadinya. Kalau sudah kamu tentukan, kamu bisa lihat kode CSS dan Kode htmlnya. Pilih saja antara semua pilihan yang ada. Dari A sampai K yang ada juga tersedia gambarnya masing – masing. Lihat saja contoh jadi dari beberapa Menu Tab Navigasi di bawah:
Kalau pilihanmu sudah mantap. Barulah kamu cari gambar yang sesuai dengan pilihan kode CSS yang kamu tentukan. Dalam kode CSS tersebut pasti ada url yang mengarah pada gambar yang ikut terextract dengan contoh hasil jadi dan dalam satu paket download. Semisal namanya tabC.gif, maka kamu cari saja gambar sesuai dengan nama tersebut. Kalau sudah ketemu, upload gambar tersebut ke imagehosting terdekat. Kalau nggak mau ribet, kamu pakai saja image hosting yang ada di imagehosting.com. Sesudah di upload jangan lupa untuk mengopy URL gambar tersebut.
Masuk ke account Google Blogger.com
Sesudah log in. Langsung saja menuju ke Tata Letak – Edit HTML
Sebelum kamu mulai merubah – rubah kode template yang ada. Aku sarankan banger untuk MENDOWNLOAD TEMPLATE LENGKAP atau membackup data template Anda.
Sesudah itu barulah kamu pilih kode CSSnya sesuai yang kamu pilih dan pasang tepat di atas kode /head. Buat yang sudah familiar dengan kode CSS taruh saja sesukanya. Jangan lupa untuk merubah URL GAMBAR yang ada dengan URL GAMBAR yang sudah kamu simpan dari URL Image Hosting yang ada. Oh ya, jangan sampai salah peletakan lho. Bagian right dan left harus sesuai. Selesai dan simpan. Lihat saja contoh kode CSS yang ada di gambar:
Agar lebih ribet. Masuk lagi ke Tata Letak – Elemen. Tambahkan elemen tambahan di mana tempat kamu mau meletakan Menu Tab tersebut yang biasanya berada di atas content juga sich.
Sesudah itu copy dan paste kode HTML yang kamu download tadi di elemen tambahan tersebut. Jangan lupa untuk merubah semua link dan auchor text link yang ada. Lihat saja contoh kode yang ada di gambar ini:
Sesudah semua selesai. Simpan dan lihat hasilnya. Kalau belum maaf saya nggak bisa membantu lagi.

Mungkin gambar mau pun background dari Menu Tab tersebut dapat di ubah sesuai kehendak kita. Karena gambarnya hanya sebagai background Menu tersebut. Namun agar sepadan kayaknya kamu harus sedikit main otak untuk membuat warna yang ada sepadan dan serasi dengan gambar yang mau kamu ubah. Kalau secara ngawur aku jelaskan. Semisal gambar kita modif dengan warna yang berbeda, tentu saja kita juga harus merubah warna yang ada di kode CSSnya. Kalau nggak di ubah kode CSSnya, aku bisa yakinin kalau warnanya pasti agak aneh.

Selamat Mencoba dan berpusing ria.