Saya memakai multi tab CSS ini pada salah satu postingan di blog demo tema Fiksioner. Ternyata banyak juga yang menanyakan bagaimana cara membuatnya. Jadi kali ini saya akan membagikan cara untuk membuat banyak tab hanya pakai CSS. Show Multi tab ini sudah lumrah dan umum digunakan di banyak blog. Kebanyakan diantaranya memakai bantuan Javascript. Namun versi saya tidak perlu memakai itu, melainkan cukup CSS saja jadi lebih ringan. Bukan berarti multi tab saya hanya satu-satunya yang pakai CSS ya. Di luar sana banyak juga kok. Saya hanya ingin berbagi script versi saya sendiri. Multiple Tabs CSS OnlyCara membuat multiple tabs CSS ini bisa diaplikasikan tidak hanya di Blogger (Blogspot) saja, melainkan di semua platform ngeblog seperti WordPress dan lainnya. Di blog demo tema Blogger gratis Fiksioner, tab ini hanya terdiri dari dua kotak. Namun kamu bisa menambahkannya lebih dari dua jika mengikuti tutorial berikut. 1. Tambahkan CSSPerlu ditekankan bahwa tampilan dari multi tab ini berbeda dengan blog demo Fiksioner. Saya memakai tampilan yang umum agar lebih netral. Jika menguasai CSS, kamu bisa ubah sendiri tampilannya sesuai keinginan. Simpan kode berikut pada pengaturan tema blog.
2. Buat TabsSalin kode ini ke dalam editor Blogger. Pastikan untuk memilih mode HTML, bukan Compose.
Untuk menghindari kesalahan, ada baiknya kamu tidak mengubah apapun kecuali yang sudah ditandai biru dan merah. Perhatikan bahwa setiap 3. DemoUntuk hasil akhirnya, lihat contoh multi tabs berikut atau cek di Codepen saya. Menambah Atau Mengurangi Jumlah TabMulti tab ini jumlahnya tidak terbatas hanya 5 buah seperti contoh saja. Kamu bisa mengurangi dan menambahkan sesuai keinginan. 1. MengurangiUntuk mengurangi jumlah tab, cukup hapus kode HTML dan sisakan sesuai jumlah yang diinginkan. Misalnya hanya ingin menampilkan 3 tab, maka kode HTML yang ditulis adalah sebagai berikut:
2. MenambahJika ingin menambah jumlah tab, maka kode CSS pun harus ikut ditambahkan. Saya sendiri kurang yakin ada yang pakai sampai lebih dari 5. Itu sih kebanyakan dan bikin kelihatan tambah ramai. Tapi kalau tetap mau, salin kode berikut dan simpan di bawah kode CSS multi tab sebelumnya.
Contoh di atas adalah untuk menambahkan menjadi 7 tab. Untuk setiap tab diberikan CSS baru sesuai dengan nomornya. Dalam kasus ini diberi nama Setelah menambah CSS, penulisan di HTML pun bertambah. Tinggal salin dari kode HTML yang sudah ada lalu ganti
Maka hasil akhirnya harus persis seperti ini.
Jika Judul BertumpukJika memasang 5 tab atau lebih dan mengalami tampilan judul yang bertumpuk saat dibuka di perangkat yang lebih kecil misalnya handphone seperti gambar berikut: Solusinya adalah dengan menambahkan kode CSS ini bersamaan dengan kode CSS yang sudah ditambahkan sebelumnya.
Sekian panduan lengkap untuk membuat multiple tabs CSS only ala igniel.com. Mudah-mudahan sedikit membantu dan bermanfaat. |