Fitur Tabs pada Halaman Postingan

Tab 1 Tab 2 Tab 3

Fitur ini merupakan penyempurnaan dari fitur tabs pada template Median UI, jika pada Median UI kami menggunakan CSS murni yang membatasi hanya maksimal 2 tab dalam satu postingan maka pada perbaikan ini kami menggunakan javascript open source yang kami dapat dari codepen.

Kelebihan dari menggunakan JS adalah penulisannya lebih mudah juga tidak ada batasan maksimal tab yang dibuat, anda bisa menambahkan 3 tab atau bahkan lebih dari itu dalam satu postingan bergantung pada kebutuhan Anda.

Anda bisa menggunakan fitur ini untuk membagi 2 postingan misal bahasa indonesia dan bahasa inggris atau untuk membagi artikel yang terlalu panjang. Satu-satunya kekurangan menggunakan javascript adalah fitur ini tidak berfungsi pada template versi AMP karena pada AMP javascript tidak diijinkan

Cara penerapan yang benar

Untuk menggunakan fitur ini Anda harus membuat postingan dalam mode tampilan HTML, untungnya pada pembaruan blogger anda tetap bisa menambahkan gambar dan sebagainya tanpa pindah ke mode compose

Pada bundle Fletro sudah disediakan template postingan ini yang siap pakai, Anda hanya perlu menulis artikel anda pada bagian yang sudah ditandai. Defaultnya kami menambahkan 3 tabs dalam template, anda bisa menambahkan atau menggurangi nya sesuai keingginan. Contoh kode templatenya seperti ini.

<div class='tabs-content'>
  <div id='tab-1' class='b-tab active'>

    <!-- Isi artikel tab pertama disini -- >

  </div>
  <div id='tab-2' class='b-tab'>

    <!-- Isi artikel tab kedua disini -- >

  </div>
  <div id='tab-3' class='b-tab'>

    <!-- Isi artikel tab ketiga disini -- >

  </div>
</div>

Lanjut ke tab 2

Kelebihan lain dari fitur ini anda bisa memilih untuk menampilkan tab mana yang diinginkan diawal. Anda hanya perlu menambahkan classname active pada tab yang ingin anda tampilkan pertama. seperti contoh dibawah ini kami ingin menampilkan tab ke-2 diawal maka kodenya seperti dibawah ini:

<div class='tabs-head'>
  ...
  <span data-tab='tab-2' class='tabs-nav active'>Tab 2</span>
  ...
</div>
<div class='tabs-content'>
  ...
  <div id='tab-2' class='b-tab active'>

    <!-- Isi artikel tab kedua disini -- >

  </div>
  ...
</div>

Menambahkan tab baru

Sangat mudah untuk menambahkan tab baru Anda hanya perlu menyakin dan mengubah id pada tag-nya, contohnya seperti dibawah ini:

<div class='tabs-head'>
  ...
  ...
  <span data-tab='tab-4' class='tabs-nav'>Tab 4</span>
</div>
<div class='tabs-content'>
  ...
  ...
  <div id='tab-4' class='b-tab'>

    <!-- Isi artikel tab kedua disini -- >

  </div>
</div>

Pastikan nilai pada atribut data-tab='...' dan id='...' pada tab-content sama agar tabsnya berfungsi dengan baik, pada contoh diatas kami menggunakan data-tab='tab-4' anda bisa mengubanya sesuai keingginan.

Isi tab ketiga