Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat membuat multi tab di blogger menggunakan CSS dengan mudah.
Banyak dari postingan saya yang menggunakan multi tab pada subdomain saya dan banyak yang bertanya bagaimana cara membuat multi tab di postingan blog. Sebenarnya multi tab ini sudah banyak di gunakan oleh para blogger hanya saja sebagian dari pengguna multi tab ini menggunkana JavaScript yang sudah tentu berpengaruh pada kecepatan blog.
Pada versi yang saya bagikan ini tidak menggunakan bantuan javascript hanya menggunakan CSS dan HTML saja jadi tidak akan memberatkan blog kalian saat pemuatan. Bukan dari saya saja yang menggunakan css di luar sana para blogger banyak yang menggunakan css saja namun ini hanya versi saya saja.
Untuk tampilannya kalian bisa lihat gambar di bawah ini
Atau kalian juga bisa melihat demonya dengan klik tombol demo di bawah ini:
Dari versi multi tab saya ini tidak hanya di gunakan pada blogger namun bisa juga di aplikasikan pada wordpress dan lain sebagainya.
Cara Membuat Multi Tab di Blogger Menggunakan CSS
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
/* Multi Tabs CSS Only by telatngoding.com */
.ignielMultiTab {
border: 0;
margin: 1.5rem 0;
padding: 0;
}
.ignielMultiTab input, .ignielMultiTab .content div {
display: none;
}
.ignielMultiTab label, .ignielMultiTab .content {
border-style: solid;
border-width: 1px;
}
.ignielMultiTab input:checked + label, .ignielMultiTab .content {
border-color: #ddd;
}
.ignielMultiTab .label {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-width: calc(100vw - 2.5rem);
overflow: auto;
}
.ignielMultiTab label {
background-color: #ededed;
border-color: transparent;
border-bottom: 1px solid #ddd;
color: #666;
cursor: pointer;
display: inline-block;
float: left;
padding: .65rem 1.25rem;
position: relative;
top: 1px;
transition: all .3s ease;
}
.ignielMultiTab input:checked + label {
background-color: transparent;
border-bottom: 1px solid #fff;
color: #1d1d1d;
font-weight: bold;
}
.ignielMultiTab .content {
clear: both;
padding: 1.5rem 1.25rem;
}
.ignielMultiTab #tab1:checked ~ .content .tab1,
.ignielMultiTab #tab2:checked ~ .content .tab2,
.ignielMultiTab #tab3:checked ~ .content .tab3,
.ignielMultiTab #tab4:checked ~ .content .tab4,
.ignielMultiTab #tab5:checked ~ .content .tab5 {
display: block;
}- Simpan tema kalian dan selesai.
- Sekarang salin kode di bawah ini dan masukan kedalam postingan kalian pada tampilan HTML
<!-- Multi Tabs CSS Only by telatngoding.com -->
<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">Satu</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">Dua</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Tiga</label>
<input id="tab4" name="mTab" type="radio"/>
<label for="tab4">Empat</label>
<input id="tab5" name="mTab" type="radio"/>
<label for="tab5">Lima</label>
<div class="content">
<div class="tab1">
(1) ISI SATU
</div>
<div class="tab2">
(2) ISI DUA
</div>
<div class="tab3">
(3) ISI TIGA
</div>
<div class="tab4">
(4) ISI EMPAT
</div>
<div class="tab5">
(5) ISI LIMA
</div>
</div>
</fieldset>Catatan
Untuk yang saya tandai dengan warna kuning adalah judul dari tab
Untuk yang saya tandai dengan warnai merah adalah isi tab
Untuk menghindari kesalahan jangan rubah kode apapun kecuali yang saya tandai kuning dan merah.
Perlu di perhatikan bahwa di setian kode id, for, dan class memiliki nama yang sama yang berarti mereka memiliki keterikatan yang sama dan sebagai contohnya tab1 berarti kode untuk tab kesatu dan seterusnya, pastikan kalian menuliskan judul dan konten yang pas dan tepat untuk di tampilkan pada multi tab ini.
Multi tab yang saya bagikan ini jumlahnya sangat tidak terbatas ( berapapun yang kalian mau ) hanya saja sebagai contoh disini saya membuat 5 tab, dan jika kalian ingin menambahkan atau mengurangi tabnya silahkan simak
Cara Menambah Multi Tab
Menambahkan kode CSS
- Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
.ignielMultiTab #tab6:checked ~ .content .tab6, .ignielMultiTab #tab7:checked ~ .content .tab7 {
display: block;
}Kode di atas adalah untuk menambahkan tab menjadi 7.
- Simpan tema kalian.
Sekarang menambahkan HTML
- Salin kode di bawah ini dan rubah kode id, for, dan classnya saja sesuai nomornya.
<!-- Multi Tabs CSS Only by telatngoding.com -->
<fieldset class="ignielMultiTab">
<!-- ini adalah kode HTML sebelumnya -->
<input id="tab6" name="mTab" type="radio"/>
<label for="tab6">Enam</label>
<input id="tab7" name="mTab" type="radio"/>
<label for="tab7">Tujuh</label>
<div class="content">
<!-- ini adalah kode HTML sebelumnya -->
<div class="tab6">
(6) ISI ENAM
</div>
<div class="tab7">
(7) ISI TUJUH
</div>
</div>
</fieldset>- Maka untuk hasil akhirnya akan seperti di bawah ini
<!-- Multi Tabs CSS Only by telatngoding.com -->
<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">Satu</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">Dua</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Tiga</label>
<input id="tab4" name="mTab" type="radio"/>
<label for="tab4">Empat</label>
<input id="tab5" name="mTab" type="radio"/>
<label for="tab5">Lima</label>
<input id="tab6" name="mTab" type="radio"/>
<label for="tab6">Enam</label>
<input id="tab7" name="mTab" type="radio"/>
<label for="tab7">Tujuh</label>
<div class="content">
<div class="tab1">
(1) ISI SATU
</div>
<div class="tab2">
(2) ISI DUA
</div>
<div class="tab3">
(3) ISI TIGA
</div>
<div class="tab4">
(4) ISI EMPAT
</div>
<div class="tab5">
(5) ISI LIMA
</div>
<div class="tab6">
(6) ISI ENAM
</div>
<div class="tab7">
(7) ISI TUJUH
</div>
</div>
</fieldset>Jika judul Bertumpuk Pada Tampilan Mobile
- Salin kode CSS di bawah ini dan letakan bersamaan kode CSS yang sudah kalian salin sebelumnya
@media screen and (max-width: 480px) {
.ignielMultiTab label {
padding: .65rem .95rem;
}
}
@media screen and (max-width: 360px) {
.ignielMultiTab label {
font-size: .65rem;
padding: .5rem .75rem;
}
}
- Simpan tema kalian dan selesai.
Cara Mengurangi Multi Tab
Untuk mengurangi multi tab ini kalian cukup kode saja dan sisakan sesuai yang kalian inginkan, semisal kalian ingin menggunakan 3 multi tab maka kode HTMLnya seperti di bawah ini<!-- Multi Tabs CSS Only by telatngoding.com -->
<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/>
<label for="tab1">Satu</label>
<input id="tab2" name="mTab" type="radio"/>
<label for="tab2">Dua</label>
<input id="tab3" name="mTab" type="radio"/>
<label for="tab3">Tiga</label>
<div class="content">
<div class="tab1">
(1) ISI SATU
</div>
<div class="tab2">
(2) ISI DUA
</div>
<div class="tab3">
(3) ISI TIGA
</div>
</div>
</fieldset>