Kata pepatah, "Banyak jalan menuju Roma", demikian pula banyak cara untuk memperindah tampilan sebuah blog. Tidak bisa kita pungkiri bahwa setiap kali kita mengunjungi sebuah blog baru, yang pertama kali kita lihat adalah tampilan, setelah itu baru konten.
Saat kita menelusuri artikel lain atau ingin mengetahui halaman lain dari blog tersebut, tentu kita akan mencari menu yang berhubungan. Menu tersebut dapat berupa text link, image, atau tombol menu yang tertuju pada URL yang bersangkutan.
Tombol Menu yang menarik merupakan salah point untuk mempercantik tampilan sebuah blog, meskipun tentu saja kapasitas file atau script untuk keperluan itu harus tetap diperhitungkan agar loading blog tetap optimal.
Berikut ini adalah salah satu cara untuk Membuat Tombol Menu pada Header sebuah blog:
- Siapkan 3 macam image/ gambar (gambar header, gambar tombol dalam keadaan normal, dan gambar tombol dalam keadaan hover). Gambar tersebut dapat Anda buat dengan program Photoshop atau program Image Design lainya. Aturlah agar kapasitas gambar-gambar tersebut tidak terlalu besar. Jumlah image yang dibutuhkan akan tergantung pada jumlah menu yang akan dibuat. . Pada contoh berikut, gambar yang saya gunakan adalah format GIF dengan nama file :
- Header.gif : Gambar Header.
- Menu1-link.gif : Tombol MENU-1 dalam keadaan normal.
- Menu1-hover.gif : Tombol MENU-1 dalam keadaan mouse hover.
- Menu2-link.gif : Tombol MENU-2 dalam keadaan normal.
- Menu2-hover.gif : Tombol MENU-2 dalam keadaan mouse hover.
- Dan seterusnya.
- Setelah semua gambar yang diperlukan selesai, lanjutkan dengan membuat kode CSS dan HTML untuk mengatur gambar tersebut sebagai tombol menu.
- Kode CSS dan HTML untuk setiap template blog akan sedikit berbeda tetapi pada prinsipnya sama. Di bawah ini adalah kode CSS yang saya tulis sendiri dengan sederhana, tanpa optimasi dan tanpa kompresi agar lebih mudah dipahami oleh pemula. Anda juga nantinya dapat meyederhanakan kode- kode tersebut dan di-customize sesuai kebutuhan.
Kode CSS Kode HTML - Penulisan kode CSS pada Blogspot biasanya diletakan di atas tag </head> sedangkan penulisan HTML ditulis sebelum tag </body>. Caranya.....Login ke Blogspot, Click Layout pada Dashboard pilih Edit HTML.
- Setelah kode CSS dan HTML disisipkan pada template, Click Save Template. Perhatian!, Sebelum melakukan pengeditan template, sebaiknya back-up dulu template Anda.
- Pada Kode HTML di atas, MENU-1, MENU-2, MENU-3, dan MENU-4 dapat diganti sesuai kebutuhan misalnya HOME, ABOUT, CONTACT, PRIVACY. Demikian juga dengan URL untuk menu-1, URL untuk Mneu-2 dan seterusnya diganti dengan URL yang sesuai dengan MENU.
- Berikut adalah tampilan Tombol Menu pada Header setelah dipublish. Coba Anda dekatkan pointer mouse pada tombol menu kemudian click tombol menu tersebut.
Selamat mencoba dan semoga bermanfaat.
