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.
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>
– 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.
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 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~
Cara Membuat Tab Menu Dengan CSS Murni pada Blog/Website - BloggerIndo
[…] ini, saya menerbitkan 2 posting. Posting ini saya buat karena beberapa hari yang lalu ada yang bertanya tentang cara membuat tab […]
Achmad Muharya
Nah ini nih yang sip 😀
Makasih ya om 😀
Syakir Rahman
Sip.. Sama-sama 😀
Ope
asek, bookmark lagi ah. penting nih 😀
Amel
Ini yg di pake html apa css nya nih? bingung nulis codingnya @Syakir Rahman
Syakir Rahman
Keduanya di pake.. Coba di download dulu aja, terus pelajari kode-kodenya 🙂
rudi
postingannya keren 😀
naufal
diisi link download bisa gak gan
Syakir Rahman
Bisa, dicoba saja
Syahrul
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
Syakir Rahman
Mungkin ada masalah pas implementasi kodenya.. coba baca ulang tutorialnya baik-baik.. karena di demo berjalan normal
Cowok keren
gan klo ini dari tab itu d ganti jadi popular post dan recent post bisa gak yah..trus klo bisa gimana caranya
Syakir Rahman
Maaf gan, yang ini tidak diperuntukkan untuk blogger
iqbal
gan kalo css nya yg beginian https://www.facebook.com/photo.php?fbid=200252430306177&set=a.157158367948917.1073741828.100009642651012&type=3 gimana cara ngeditnya tu gan? bingung ane nih
Syakir Rahman
Itu bukan cuma css, itu kode xml yang didalamnya terdapat kode html, css dan javascript.. kalau untuk mengedit css, lihat di dalam tag b:skin
anonim
kalo tab menunya di samping bisa gak mas?
Syakir Rahman
Bisa.. tinggal tambahkan kode cssnya saja.. di li selectornya ditambahkan display:block
Nadia
makasih lho, membantu banget nih
Cornel
Saya mau Tanya gan
Bagai mana Cara Membuat Tampilan Seperti Tampilan DEMO Diatas gan..?
Syakir Rahman
Ulik sendiri dong gan.. itu kan udah dikasih filenya heheh
Frdinan
nice plugin to post tabbs .. thats i need .
Umam
maaf mas ganggu, saya mau nanya, apa bisa jika contentnya di ganti dengan widget, terima kasih, mohon bantuannya.
Syakir Rahman
Bisa saja, tapi akan sangat ribet.. butuh pemahaman yang cukup dalam mengedit/membuat template
altkia
I loved this
Djafar Shiddieq Ritonga
Sip, makasih gan
Post yang sangat bermanfaat
rudi tashka
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
Syakir Rahman
Sebelum mau edit-edit, pelajari dulu saja interface di bloggernya 😀
Jadwal Bimtek Keuangan
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
Vevenia
Terimakasih tutorialnya sangat bermanfaat. Ijin share
eltekia
Thanks