Cara Membuat Tabs dalam Postingan Blog Menggunakan HTML, CSS dan JS

OnetoTech.com – Tampilan blog khususnya blog referensi atau review apapun itu akan sangat bagus bila menampilkan tambahan tabs dalam isi artikelnya. Di samping lebih ringkas juga tentunya lebih user friendly, enak di baca dan di pahami isi dari materinya. Berikut adalah Cara Membuat Tabs dalam Postingan Blog Menggunakan HTML, CSS dan JS yang bisa anda terapkan dalam artikel blog anda.

Caranya mudah dan tidak sulit atau jika anda tidak ingin repot tulis kode html, css dan js setiap kali posting artikel. Coba gunakan sebuah plugin yang mendukung keinginan anda ini. Sebelum melanjutkan kami mengasumsikan bahwa anda sudah paham dengan ketiga markup di atas dan tentu bagaiamana cara menggunakannya.

Langsung saja berikut adalah tahapan tahapan yang harus anda lakukan untuk bisa membuat Tabs dalam Postingan Blog Menggunakan HTML, CSS dan JS.

Tips dan Trik Mudah Cara Membuat Tabs Dalam Postingan Blog

Berikut adalah sebuah contoh mengaplikasikan keinginan anda agar di dalam postingan blog bisa di sisipkan sebuah tabs yang fungsinya untuk meringkas sebuah materi blog. Ketiga file ini memiliki hubungan satu sama lain, jadi jika satu tak berfungsi maka hasilnya pun akan berantakan, jadi harus benar benar di tulis dengan teliti untuk hasil yang bagus.

1. HTML

Untuk menampilkan tabs dalam postingan hal pertama yang harus di lakukan adalah menulis postingan Blog dalam mode HTML. Berikut adalah contoh tabs of contents yang akan kita buat menggunakan HTML, CSS dan JS.

Baca Juga : Membuat Pagination Pada Blog WordPress

Salin dan tempel kode HTML di atas di halaman postingan Blog anda, bisa di tengah atau bawah postingan Blog.

2. CSS

Berikutnya adalah membuat kode CSS, yang mana CSS di peruntukan agar tampilan tabs bisa terlihat rapih dan proposional. Berikut adalah contoh potongan kode CSS yang menjadi satu kesatuan dari pembuatan Tabs of content ini.

Salin Potongan kode CSS di atas kedalam direktori template anda, biasanya berada di folder asset/css, atau jika tidak ingin membuat file CSS baru cukup copy paste kode di atas ke dalam file style.css template anda.

3. JS atau Javascript

Tanpa bantuan file JS atau javascript kurang sempurna tabs yang akan kita buat karena JS berfungsi untuk memberikan perintah perintah yang akan mempermudah tabs berfungsi dengan baik. Brikut adalah contoh dari potongan kode JS atau javascript tersebut.

Salin juga potongan kode JS atau javascript di atas kedalam directory Template folder anda, biasa berada di folder asset/js.Atau bisa juga pasang dan tempelkan kode javascript ini pada header template anda, biasanya berada di bagian sebelum </head>.

Itulah cara membuat Tabs dalam Postingan Blog Menggunakan HTML, CSS dan JS yang bisa kami bagikan dalam kesempatan kali ini. Semoga bermanfaat dan bisa di terapkan pada postingan blog anda.

Last Modified : 2017-10-21
Tags:, ,

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *