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.
- Buka folder 'Post and Pages' dalam Google Drive,
- temukan file dengan nama
Tabs Post.txt - salin semua kode yang ada
- Pada editor postingan Blogger silahkan ubah ke Tampilan HTML
- 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>
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.
- Open 'Post and Pages' folder in Google Drive,
- find the file with the name
Tabs Post.txt - copy all existing codes
- In Blogger post editor, please change to HTML View
- 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>
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>