Cara Membuat Tab Menu Dengan CSS Murni pada Blog/Website

Senin ini, saya menerbitkan 2 posting. Posting ini saya buat karena beberapa hari yang lalu ada yang bertanya tentang cara membuat tab css. Sebenarnya, saya pernah membahas  cara membuat tab menggunakan bootstrap. Namun, karena tidak semua orang menggunakan bootstrap di website maupun blognya, jadi saya buat tab dengan css tanpa plugin/library tambahan.

Tab Menu CSS

CSS tab yang saya buat pada posting ini menggunakan teknik yang sama yang digunakan pada CSS slider yang dibahas di blog ini, yaitu menggunakan event ‘checked’ pada input tipe radio. Kode untuk membuat CSS tab ini lebih sedikit daripada untuk membuat CSS slider. Jika dibandingkan dengan Tab yang menggunakan JS, tentu saja CSS tab lebih hemat source. Kode CSS inti untuk tab-nya, hanya sekitar 15 baris untuk 3 tab. Itupun sudah ditambahkan efek transisi. Selebihnya, hanya kode untuk mempercantik tampilannya saja agar lebih menarik.

Silahkan anda simak dan pahami kode dibawah ini :

<div class=”tab-container”>

<!– Menu tab –>
<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu1” checked />
<label for=”tab-menu1” class=”tab-menu”>Tab 1</label>

<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu2“/>
<label for=”tab-menu2” class=”tab-menu”>Tab 2</label>

<input type=”radio” name=”tab-menu” class=”tab-menu-radio” id=”tab-menu3“/>
<label for=”tab-menu3” class=”tab-menu”>Tab 3</label>
<!– End Menu tab –>

<div class=”tab-content”>

<!– Konten tab –>
<div class=”tab tab-1″>
<h1>This is CSS Tab 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.</p>
</div>

<div class=”tab tab-2″>
<h1>This is CSS Tab 2</h1>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.</p>
</div>

<div class=”tab tab-3″>
<h1>This is CSS Tab 3</h1>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.
</p>
</div>
<!– Akhir Konten tab –>

</div>

– Kode yang saya beri warna merah, harus sesuai id pada tag <input>, dengan for pada tag <label>
– Menu tab bisa anda tambahkan jumlahnya, namun juga harus sesuai dengan jumlah konten tabnya.
– Kode berwarna hijau harus anda ganti dengan judul menu tab anda.
– Semua kode yang berada di dalam tag <div class=”tab tab-[angka]“>, adalah kode isi yang harus anda ganti jika tab css ini akan anda terapkan di blog anda.
/* Tab menu styling*/
input.tab-menu-radio {
display: none;
}
label.tab-menu {
display: inline-block;
float: left;
padding:10px 30px;
cursor: pointer;
z-index: 99;
}
/* End Tab menu styling*//* Tab content styling*/
.tab-content {
top:-3px;
clear: both;
width: 100%;
position: relative;
padding:20px;
background-color: #f7f7f7;
border-top:7px solid #333;
}
/* End Tab content styling*//* CSS tab core */
.tab-menu-radio:checked + label {
-webkit-transition:all 1s; /* Optional */
-moz-transition:all 1s; /* Optional */
transition:all 1s; /* Optional */
background-color: #333;
color: #fff;
}
.tab-content .tab {
height: 0;
opacity: 0;
}
#tab-menu1:checked ~ .tab-content .tab-1,
#tab-menu2:checked ~ .tab-content .tab-2,
#tab-menu3:checked ~ .tab-content .tab-3 {
-webkit-transition:opacity 1s; /* Optional */
-moz-transition:opacity 1s; /* Optional */
transition:opacity 1s; /* Optional */
height: auto;
opacity: 1;
}
/* End CSS tab core */
– Kode inti yang membuat css tab berada diantara /* CSS tab core */ dan /* End CSS tab core */
– Kode berwarna biru adalah selektor css yang merupakan perulangan. Jika tab anda ada 4, 5 atau berapapun, anda harus menambahkan barisnya sesuai urutan. Sebelumnya anda juga harus menambahkan HML untuk tab yang anda tambahkan tersebut.

Untuk melihat hasil/demo dan mendowload seluruh source kode-nya, anda bisa klik link dibawah ini

Cara menambahkan CSS Tab pada Blogger dan WordPress

CSS tab ini juga bisa langsung anda tambahkan pada widget di blog blogger maupun wordpress anda. Namun, perlu dicatat bahwa disini saya hanya memberikan tutorial menambahkan CSS tab pada 1 widget saja. Artinya, 3 tab di atas akan langsung ditambahkan pada 1 widget bertipe HTML dan sebelumnya anda harus mengedit dulu isi dan menu tab-nya sesuai kebutuhan. Jadi, masing-masing tab tidak mewakili 1 widget seperti yang biasa anda temukan di beberapa template.

Silahkan ikuti langkah-langkah dibawah ini :

1. Edit terlebih dahulu menu tab dan konten tab sesuai kebutuhan anda.

2. Menambahkan CSS Tab pada blogger.

a.  Login ke dashboard > Pilih blog > Layout/Tata letak > Tambahkan widget tipe HTML/Javascript.

b. Pastekan kode HTML di atas yang menu tab dan konten tab-nya sudah anda edit. Save.

c.  Sekarang, klik menu Template > Edit HTML.

d. Pastekan kode CSS di atas, tepat sebelum kode  </b:skin>. Save.

3. Menambahkan CSS Tab pada wordpress self hosted

a. Login ke Halaman Admin > Appearance > Widget > Tambahkan widget tipe Teks.

b. Pastekan kode HTML di atas yang menu tab dan konten tab-nya sudah anda edit. Save.

c. Sekarang, klik menu editor (Appearance > Editor), Pilih file Stylesheet (style.css)

d. Pastekan kode CSS di atas di bagian paling bawah. Save.

Selesai. Jika anda mengalami kesulitan atau error, silahkan tanya di komentar. Semoga bermanfaat

~Muhammad Syakirurohman~

28 Comments

  1. Nah ini nih yang sip 😀

    Makasih ya om 😀

  2. asek, bookmark lagi ah. penting nih 😀

  3. Ini yg di pake html apa css nya nih? bingung nulis codingnya @Syakir Rahman

  4. postingannya keren 😀

  5. diisi link download bisa gak gan

  6. salam mas
    thanks atas tutornya,,, yang ingin saya tanyakan adalah kenapa pas klik tabnya satu persatu headernya jadi semakin turun kebawah ya mas…

    pas tab pertama masih normal, kita klik tab ke dua header tab turun satu baris dan begitu seterusnya,, saya pakai lima tab mas… mohon bantuannya

    Thanks

  7. gan klo ini dari tab itu d ganti jadi popular post dan recent post bisa gak yah..trus klo bisa gimana caranya

  8. kalo tab menunya di samping bisa gak mas?

  9. makasih lho, membantu banget nih

  10. Saya mau Tanya gan
    Bagai mana Cara Membuat Tampilan Seperti Tampilan DEMO Diatas gan..?

  11. nice plugin to post tabbs .. thats i need .

  12. maaf mas ganggu, saya mau nanya, apa bisa jika contentnya di ganti dengan widget, terima kasih, mohon bantuannya.

  13. I loved this

  14. Djafar Shiddieq Ritonga

    Sip, makasih gan
    Post yang sangat bermanfaat

  15. Maaf mas saya baru aja bikin blog, masih bingung gmn caranya, di blog saya setlh buka tambahkan CSS kok g ada tulisan edit HTML ya, dimna nyarinya dan gemana caranya biar bisa. makasih

  16. Di WordPress gak usah terlalu pusing, soalnya sudah banyak disediakan plugin. Misalnya saja untuk menambahkan konten tab ke dalam postingan atau sidebar, anda tinggal menambahkan “Tab Responsive”. Kemudian tinggal isi form dan setting tabnya sesuai keinginan

Tinggalkan Balasan

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