Tutorial Memasang Muti Tab Pada Blog

Tutorial Memasang Muti Tab Pada Blog dan cara pasang multi tab di blog dengan mudah, akan saya bahas ditulisan pada artikel di blog sederhana ini, bertujuan supaya para sobat lebih mudah untuk mempelajari dan menerapkannya disitus atau blognya sobat tentunya.

Tutorial Memasang Muti Tab Pada Blog

Membuat multi tab di blog dan hanya memakai CSS saja, tentunya sebagian besar para pembuat template blog sudah paham akan hal tersebut, akan tetapi bagi para sobat pemula blog, sering bertanya-tanya akan perihal tersebut.

Kebanyakan multi tab di blog hanya memakai berupa javascript, namun di tulisan saya pada tulisan diartikel yang akan saya rangkum kali ini, hanya memakai css saja dan hal ini lah yang membuat terasa ringan

Hanya Memakai Multi Tab CSS Saja

Cara memasang dan membuat multi tab ternyata bukan hanya dipasang di blogspot (blogger), akan tetapi bisa juga dibuat pada wordpress maupun di platform lain.

1. Menambahkan CSS

Nah sobatku, dibagian berikut ini, multi tab css yang akan saya berikan, merupakan multi tab css yang umum dan biasa dipakai oleh banyak orang, untuk itu sobat bisa memperhatikan dan salin kode dibawah ini yah.

/* Multi Tabs CSS Only by gembongbantenmedia.co.id */

.gembongbantenMultiTab {

  border: 0;

  margin: 1.5rem 0;

  padding: 0;

}

.gembongbantenMultiTab input, .gembongbantenlMultiTab .content div {

  display: none;

}

.gembongbantenMultiTab label, .gembongbantenMultiTab .content {

  border-style: solid;

  border-width: 1px;

}

.gembongbantenMultiTab input:checked + label, .gembongbantenMultiTab .content {

  border-color: #ddd;

}

.gembongbantenMultiTab .label {

  display: flex;

  flex-wrap: nowrap;

  flex-direction: row;

  max-width: calc(100vw - 2.5rem);

  overflow: auto;

}

.gembongbantenMultiTab 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;

}

.gembongbantenMultiTab 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;

}

.gembongbantenMultiTab #tab1:checked ~ .content .tab1,

.gembongbantenMultiTab #tab2:checked ~ .content .tab2,

.gembongbantenMultiTab #tab3:checked ~ .content .tab3,

.gembongbantenMultiTab #tab4:checked ~ .content .tab4,

.gembongbantenMultiTab #tab5:checked ~ .content .tab5 {

  display: block;

}

2. Membuat Dan Memasang Tabs

Bagi para sobat yang ingin memasang Tab ini, sobat dapat memasangnya dibagian editor seperti HTML dan bukan compose.

<!-- Multi Tabs CSS Only by gembongbantenmedia.co.id -->

<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>

3. Jangan lupa di save / simpan.

Catatan

• Ditandai berwarna HIJAU merupakan Judul Tab
• Ditandai berwarna MERAH merupakan isi konten

Nah sobat, supaya tidak ada kesalahan terjadi disaat pemasangan, saya menyarankan kepada sobat, agar tidak merubah kode selain yang sudah ditandai MERAH dan HIJAU di kode atas tersebut.

Jadi, ketika sobat mau memasang kode seperti diatas, pastikan untuk selalu menuliskan judul dan konten dengan tepat sesuai penomoran untuk ditampilkan pada tab.

Bagaimana sobatku semuanya ? ternyata cukup mudah bukan, nah begitulah kira-kira untuk rangkuman ditulisan saya pada artikel di blog sederhana ini dapat saya tuliskan dan rangkumkan sedemikian rupa, agar sobat dapat lebih mudah untuk mempelajari dan menerapkannya di situs atau blognya sobat dengan mudah.

Demikianlah ditulisan saya pada tulisan diartikel kali ini yang dapat saya rangkumkan sedemikian rupa mengenai topik pembahasan saya yaitu Tutorial Memasang Muti Tab Pada Blog, semoga dengan refrensi (informasi) ditulisan saya pada artikel kali ini bisa bermanfaat dan membantu ya sobatku semuanya, sekian dan terimakasih.