Artikel Dengan Tambahan Fungsi Tabs

mimin
April 06, 2021
Artikel Dengan Tambahan Fungsi Tabs
Source: jagodesain.com

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>

This optional feature is used to split the article into two, in this example the article is divided into two languages. It should be noted that this post is not an auto translate, but you create two articles in different languages that are united in one post.

This tab is the same as the tabs feature in usual, we make use of CSS Pseudo ::checked and the <input> tag in HTML as the base which means this feature is very light because it does not use javascript at all. Another good thing is that you can use this feature on the AMP version.

It doesn't have to be articles in two languages, you can also divide your articles into two parts using this feature in case your articles are too long.

To use this template it is highly recommended that you write in 'HTML View' mode because tabs may not work if you write not in HTML mode.

In the file bundle has provided a ready-made template, you only need to copy it and add your article on the parts that have been on the mark, sample code as below:

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

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

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

Isi untuk tab ke-3