Guide to Adding Tab Function in Post

Simple guide on how to add tabs within posts

Secara default ada 3 tab yang tersedia, Anda dapat menambahkan maksimal 4 tab dalam satu artikel.

  1. Buka folder 'Post and Pages' dalam Google Drive,
  2. temukan file dengan nama Tabs Post.txt
  3. salin semua kode yang ada
  4. Pada editor postingan Blogger silahkan ubah ke Tampilan HTML
  5. tempel semua kode yang sudah disalin tadi ke dalam postingan Anda.

Untuk merubah judul tab, Anda bisa merubah bagian yang ditandai dari kode di bawah ini:

<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for='fTabs-1' data-text='Tabs_1'></label>
<label for='fTabs-2' data-text='Tabs_2'></label>
<label for='fTabs-3' data-text='Tabs_3'></label>
Bagaimana cara menambahkan tab baru?

Untuk menambahkan tab baru ada 3 kode yang harus Anda salin yaitu kode <input>, <label> dan <div class='tbText-1'>, contoh mudahnya adalah seperti di bawah ini:

<!--[ Active function ]-->
...
...
...
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  ...
  ...
  ...
  <label for='fTabs-4' data-text='Tabs_4'></label>
</div>

<div class='tbCn'>
  ...
  
  ...

  ...
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    Fourth tab here...

  </div>
</div>

By default there are 3 tabs available, you can add a maximum of 4 tabs in one article.

  1. Open 'Post and Pages' folder in Google Drive,
  2. find the file with the name Tabs Post.txt
  3. copy all existing codes
  4. In Blogger post editor, please change to HTML View
  5. Paste all the code that was copied earlier into your post.

To change the tab title, you can replace highlighted part of the code below:

<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for='fTabs-1' data-text='Tabs_1'></label>
<label for='fTabs-2' data-text='Tabs_2'></label>
<label for='fTabs-3' data-text='Tabs_3'></label>
How do I add a new tab?

To add a new tab there are 3 codes that you must copy, namely the <input>, <label> and <div class='tbText-1'> codes, an easy example is as below:

<!--[ Active function ]-->
...
...
...
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  ...
  ...
  ...
  <label for='fTabs-4' data-text='Tabs_4'></label>
</div>

<div class='tbCn'>
  ...
  
  ...

  ...
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    Fourth tab here...

  </div>
</div>