Tutorial Cara Membuat Post Tabs pada Blogger

Tab 1 Tab 2 Template TAB

Info: Sekarang anda bisa menambahkan maksimal 5 tabs dalam satu postingan

Fitur opsional ini digunakan untuk membagi artikel menjadi dua, dalam contoh ini artikel terbagi dalam dua bahasa. Perlu dicatat postingan ini bukan auto translate melainkan Anda membuat dua artikel berbeda bahasa yang disatukan dalam satu postingan.

Cara kerja tabs pada postingan

Tab ini sama dengan fitur tabs pada biasanya, kami memanfaatkan CSS Pseudo ::checked dan tag <input> pada HTML sebagai dasarnya yang artinya fitur ini sangat ringan karena tidak menggunakan javascript sama sekali. Hal baik lainnya adalah Anda bisa menggunakan fitur ini pada versi AMP.

Tidak harus selalu artikel dengan dua bahasa, Anda juga bisa membagi artikel Anda menjadi dua bagian menggunakan fitur ini seumpama artikel yang Anda buat terlalu panjang.

Tutorial dan penerapan yang benar

Untuk memakai template ini sangat disarankan Anda menulis menggunakan mode 'Tampilan HTML' karena kemungkinan tabs akan tidak berfungsi jika Anda menulis tidak dalam mode HTML.

Pada bundle file sudah disediakan template yang siap pakai, Anda hanya perlu menyalin nya dan menambahkan artikel Anda pada bagian yang sudah di tandai, contoh kodenya seperti dibawah ini:

  <div class='post-tabsContent'>
    <div class='tabsContent-1'>

      <!-- Isi artikel pertama disini -- >
      
    </div>
    <div class='tabsContent-2'>

      <!-- Isi artikel kedua disini -->
      
    </div>
  </div>

isi Kontent tab 2

Cara penerapan yang baik dan benar saat menerapkannya pada postingan.

<input class="all-tabs tab-1 hidden" id="forall-tabs1" type="radio" name="post-tabs" checked="">
      <input class="all-tabs tab-2 hidden" id="forall-tabs2" type="radio" name="post-tabs">
      <input class="all-tabs tab-3 hidden" id="forall-tabs3" type="radio" name="post-tabs">
   <div class="post-tabs">
      <div class="post-tabsHeader">
      <label for="forall-tabs1">Tab 1</label>
      <label for="forall-tabs2">Tab 2</label>
      <label for="forall-tabs3">Tab 3</label>
   </div>
   <div class="post-tabsContent">
   <div class="tabsContent-1">
         // <p> isi konten tab pertama <p>
     </div>
   <div class="tabsContent-2">
         // <p> isi konten tab kedua <p>
     </div>
   <div class="tabsContent-3">
         // <p> isi konten ketiga disini <p>
     </div>