Cara mudah membuat FLOATING MENU FOOTER - Bagian 1
By Ndi Uke
Blog atau Situs Web yang banyak kita temui di internet tentunya memiliki tampilan yang berbeda-beda dengan ciri khas nya masing-masing, para blogger berlomba-lomba menarik banyak pengunjung dengan banyak cara, selain membuat artikel yang menarik para blogger juga men-desain situs mereka semenarik mungkin agar pengunjung betah berlama-lama di situs mereka.
Sampai saat ini situs web masih bersifat terbuka dalam hal desain dan modifikasi kita ambil contoh salah satu blog dari google yaitu blogspot, saat kamu membuat atau membangun sebuah website yang paling simpel dan mudah yaitu blogspot, karena masih gratis 😄 . meskipun gratisan kamu dapat membangun situs web kamu menjadi lebih cantik dan professional.
Kamu bisa memodifikasi banyak bagian dari website kamu seperti header body sidebar footer dan lainnya, selain layout dasar tersebut situs web tentunya harus memiliki menu navigasi untuk menavigasi pengunjung menjelajahi situs web kita. umumnya menu navigasi terletak pada bagian kiri header namun kamu bisa menempatkannya dimana saja asalakan mudah dijangkau pengunjung website kamu.
Dan pada kesempatan kali ini saya mau ngasih tutorial cara membuat floating menu footer pada situs blogspot, floating menu footer ini maksudnya menu yang berada pada baris footer atau terletak di bawah halaman dan mengambang di layar seperti yang tampak pada gambar di atas dan hampir mirip dengan yang saya gunakan di blog ini.
Mengapa saya membuat beberapa bagian untuk tutorial ini !? karena jika saya bahas langsung, mungkin kamu akan pusing jadi saya membuat beberapa bagian pada tutorial di antaranya yaitu.
- Floating Menu Dasar dan mengganti icon
- Menambahkan Tabel Menu
- Menambahkan Search box Icon
- Mem-fungsikan comment button
- Dan masih banyak lagi
Jadi saya akan membuat tutorial nya secara terpisah supaya kamu bisa mengerti dan bisa ber eksperimen sendiri nantinya. ok langsung saja untuk membuat dasar Floating Menu Footer Kamu hanya perlu menambahkan beberapa skrip HTML dan CSS berikut ini.
Tapi sebelum nya pasang dulu 2 script berikut dibawah tag <head> pada template agar icon dapat muncul, tapi kalau di tamplate kamu sudah ada lewatin saja.
doble click to select
Berikut ini adalah skrip html dan css untuk floating menu footer yang akan kita pasang
HTML & CSS
HTML / doble click to select
CSS / doble click to select
TUTORIAL
Untuk menambahkan sekrip tersebut kamu bisa edit HTML atau Meletakannya pada Widget. ok kita bahas satu persatu kita mulai dari dengan cara edit html
Via Edit HTML
Pertama kamu pergi ke dashboard > Thema > Edit Html seperti gambar berikut.
Kemudian cari tag </body> letaknya dibagian paling akhir template atau gunakan fitur pencarian, jika sudah ketemu kemudian tempel code HTML yang sudah saya sediakan di atas tepat diatas (sebelum) tag </body> seperti gambar berikut.
Kemudian cari lagi tag </b:skin> dan letakan CSS yang saya sediakan di atas tepat di atas (sebelum) tag </b:skin> jika sudah kemudian simpan template (tema) dan lihat hasilnya.
Jika cara di atas terlalu ribet tenang saja ada cara yang lebih simpel yaitu meletakkannya di dalam widget, caranya yaitu kamu cukup membuat widget baru kemudian tempelkan kedua kode (skrip) di atas di dalam widget. hanya saja pada bagian skrip CSS harus ditambahkan sedikit perubahan. untuk lebih jelasnya seperti berikut.
Isikan kode CSSnya di tengah-tengah kode berikut.
HTML / doble click to select
Hingga hasilnya akan seperti ini.
kemudian buka Dashboard pilih Tata Letak lalu tambahkan Gadget seperti gambar berikut.
Selanjutnya Masukan kode HTML dan CSS yang barusan telah di edit, masukan keduanya kedalam gadget seperti gambar berikut.
Sampai sini kamu udah punya Floating Menu Dibawah halaman. kamu bisa modifikasi warna ikon ukuran dan lainnya. untuk mengaktifkan tombol menu akan kita bahas di atikel berikutnya.
Post a Comment for "Cara mudah membuat FLOATING MENU FOOTER - Bagian 1"