- Beranda
- Website, Webmaster, Webdeveloper
[SHARE] Cara Membuat Menu Tab Horisontal Keren Seperti Navbar Pada Blog
...
TS
semarbingung
[SHARE] Cara Membuat Menu Tab Horisontal Keren Seperti Navbar Pada Blog
Mimin, Momod, dan Agan sekalian, sebelumnya ane yang masih newbie ini mohon ijin untuk share sesuatu yang bisa jadi ada guna dan manfaatnya. Namun bila hal ini menjadikan Mimin, Momod, dan atau Agan sekalian kurang berkenan, maka dengan segala hormat ane mohon maaf yang sebesar-besarnya.
--------------------
Jadi gini, seperti yang kita tahu bahwasanya ketika kita membuat blog, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’. Akan tetapi terkadang dengan berbagai alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.
Berbicara tentang navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi yaitu dengan cara menambahkan navbar baru yang lebih keren dan ‘cantik’ bila dibandingkan dengan navbar standar. Sebagai contoh misal screenshot-nya dapat Agan lihat pada gambar di bawah ini.
![[SHARE] Cara Membuat Menu Tab Horisontal Keren Seperti Navbar Pada Blog](https://dl.kaskus.id/lh4.googleusercontent.com/-m2NO2wKOwrk/UNZNPqr_kBI/AAAAAAAAA_4/Y0sLXiQNEKI/s800/Tab%2520Menu%2520Mendatar%2520Keren.jpg)
Nah, yang menjadi pertanyaan sekarang adalah bagaimana caranya membuat tab menu seperti itu?
Oke, inilah jawabannya. Bila agan punya sebuah blog dan kemudian ingin menambahkan navbar seperti yang tampak pada gambar di atas, maka Agan dapat melakukannya dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, silakan Agan login terlebih dulu dan kemudian setelah tampil halaman dasbor langsung saja buka editor template.
Kedua, setelah editor template terbuka, silakan Agan cari ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya. Dimana fungsi kode ini adalah untuk menyembunyikan navbar standar/default.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
Ketiga, masih di bagian yang sama, sisipkan pula rangkaian kode CSS yang nantinya dipakai untuk menata desain tab menu, tepat di atas ]]></b:skin> Dan karena rangkaian kode CSS yang ane maksud cukup pajang, maka silakan agan lihat dengan membuka tautan berikut ini.
Klik di sini untuk melihat kode CSS-nya, Gan.
Keempat, silakan Agan cari bagian <body>. Ingat ya Gan, rangkaian kode untuk bagian ini biasanya antara satu template dengan template yang lain bisa jadi tidak sama. Sehingga untuk mempermudah pencarian, maka Agan cari saja dengan menggunakan kata <body Kemudian bila bagian tersebut sudah ketemu, silakan Agan sisipkan rangkaian kode yang dipakai untuk membuat tab menu berserta sub menu yang ingin dipasang serta ditampilkan.
Dan karena contoh rangkaian kode untuk bagian ini juga cukup panjang, maka agan dapat langsung melihatnya dengan cara membuka tautan yang sama dengan tautan yang ane sertakan dalam langkah ketiga.
Kelima, ubahsesuaikan link yang ingin ditautkan serta nama menu yang ingin ditampilkan. Selanjutnya bila telah dilakukan penyesuaian pada link beserta nama menu, maka silakan Agan preview terlebih dulu untuk memastikan apakah hasilnya sudah sesuai dengan yang diharapkan atau belum. Dan apabila hasilnya telah sesuai dengan yang diharapkan, maka simpan temlate Agan.
--------------------
Sekian, semoga berguna serta bermanfaat. Dan apabila thread ini menjadikan Mimin, Momod, dan atau Agan sekalian kurang berkenan, sekali lagi ane mohon maaf yang sebesar-besarnya.
--------------------
Jadi gini, seperti yang kita tahu bahwasanya ketika kita membuat blog, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’. Akan tetapi terkadang dengan berbagai alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.
Berbicara tentang navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi yaitu dengan cara menambahkan navbar baru yang lebih keren dan ‘cantik’ bila dibandingkan dengan navbar standar. Sebagai contoh misal screenshot-nya dapat Agan lihat pada gambar di bawah ini.
Nah, yang menjadi pertanyaan sekarang adalah bagaimana caranya membuat tab menu seperti itu?
Oke, inilah jawabannya. Bila agan punya sebuah blog dan kemudian ingin menambahkan navbar seperti yang tampak pada gambar di atas, maka Agan dapat melakukannya dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, silakan Agan login terlebih dulu dan kemudian setelah tampil halaman dasbor langsung saja buka editor template.
Kedua, setelah editor template terbuka, silakan Agan cari ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya. Dimana fungsi kode ini adalah untuk menyembunyikan navbar standar/default.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
Ketiga, masih di bagian yang sama, sisipkan pula rangkaian kode CSS yang nantinya dipakai untuk menata desain tab menu, tepat di atas ]]></b:skin> Dan karena rangkaian kode CSS yang ane maksud cukup pajang, maka silakan agan lihat dengan membuka tautan berikut ini.
Klik di sini untuk melihat kode CSS-nya, Gan.
Keempat, silakan Agan cari bagian <body>. Ingat ya Gan, rangkaian kode untuk bagian ini biasanya antara satu template dengan template yang lain bisa jadi tidak sama. Sehingga untuk mempermudah pencarian, maka Agan cari saja dengan menggunakan kata <body Kemudian bila bagian tersebut sudah ketemu, silakan Agan sisipkan rangkaian kode yang dipakai untuk membuat tab menu berserta sub menu yang ingin dipasang serta ditampilkan.
Dan karena contoh rangkaian kode untuk bagian ini juga cukup panjang, maka agan dapat langsung melihatnya dengan cara membuka tautan yang sama dengan tautan yang ane sertakan dalam langkah ketiga.
Kelima, ubahsesuaikan link yang ingin ditautkan serta nama menu yang ingin ditampilkan. Selanjutnya bila telah dilakukan penyesuaian pada link beserta nama menu, maka silakan Agan preview terlebih dulu untuk memastikan apakah hasilnya sudah sesuai dengan yang diharapkan atau belum. Dan apabila hasilnya telah sesuai dengan yang diharapkan, maka simpan temlate Agan.
--------------------
Sekian, semoga berguna serta bermanfaat. Dan apabila thread ini menjadikan Mimin, Momod, dan atau Agan sekalian kurang berkenan, sekali lagi ane mohon maaf yang sebesar-besarnya.
0
3.9K
12
Komentar yang asik ya
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
23.3KThread•4.4KAnggota
Urutkan
Terlama
Komentar yang asik ya