MEMBUAT MULTI TABS PILLS NAVIGATION DI BLOG, Code Pils Tabs Navigation Lengkap, Tabs Navigation Untuk Blogger, Code Tabs Navigation Bottom Mobile.
Navigasi adalah elemen penting dalam sebuah website, termasuk blog. Dengan navigasi yang efektif, pengunjung dapat dengan mudah menjelajahi konten tanpa harus menggulir halaman panjang. Salah satu cara membuat navigasi yang modern dan menarik adalah menggunakan multi tabs pills navigation. Artikel ini akan membahas langkah-langkah lengkap untuk membuat multi tabs pills navigation di blog Anda, terutama bagi pengguna platform Blogspot.
Apa itu Multi Tabs Pills Navigation?
Multi tabs pills navigation adalah komponen navigasi berbentuk tombol-tombol kecil yang menyerupai kapsul (pill). Setiap tombol atau tab mewakili bagian tertentu dari konten, sehingga pengguna bisa melihat konten yang relevan tanpa meninggalkan halaman utama.
Keunggulan navigasi jenis Multi Tabs Pils Navigation:
1. Estetika yang Menarik: Desain yang modern memberikan kesan profesional pada blog.
2. User Experience (UX) yang Baik: Pengguna dapat mengakses informasi dengan mudah tanpa menggulir panjang.
3. Responsif: Navigasi ini dapat diatur agar tetap terlihat bagus di perangkat desktop maupun mobile.
Kenapa Blogspot Membutuhkan Multi Tabs Navigation?
Blogspot adalah salah satu platform blogging yang mudah digunakan dan fleksibel. Meski demikian, fitur bawaan Blogspot terkadang kurang memadai untuk memenuhi kebutuhan desain modern. Dengan menambahkan multi tabs pills navigation, Anda bisa meningkatkan tampilan dan fungsionalitas blog Anda.
Langkah-Langkah Membuat Multi Tabs Pills Navigation di Blogspot
Berikut ini adalah panduan langkah demi langkah untuk menambahkan multi tabs pills navigation di Blogspot:
1. Menyiapkan Struktur HTML Multi Tabs Pils Navigation
HTML digunakan untuk membuat struktur navigasi dan konten tabs. Berikut adalah contoh kode HTML untuk membuat navigasi dengan lima tab:
<div class="hallomadiun-tabs">
<ul class="hallomadiun-nav">
<li class="active" data-tab="tab1">Tab 1</li>
<li data-tab="tab2">Tab 2</li>
<li data-tab="tab3">Tab 3</li>
<li data-tab="tab4">Tab 4</li>
<li data-tab="tab5">Tab 5</li>
</ul>
<div class="hallomadiun-content">
<div id="tab1" class="tab active">
<p>Konten untuk Tab 1</p>
</div>
<div id="tab2" class="tab">
<p>Konten untuk Tab 2</p>
</div>
<div id="tab3" class="tab">
<p>Konten untuk Tab 3</p>
</div>
<div id="tab4" class="tab">
<p>Konten untuk Tab 4</p>
</div>
<div id="tab5" class="tab">
<p>Konten untuk Tab 5</p>
</div>
</div>
</div>
Kode di atas mencakup dua bagian utama:
- hallomadiun-nav: Bagian ini berisi daftar tab navigasi.
- hallomadiun-content: Bagian ini berisi konten yang akan ditampilkan saat tab tertentu diklik.
2. Menambahkan Desain dengan CSS
CSS digunakan untuk mempercantik tampilan navigasi dan konten tabs. Berikut adalah kode CSS yang bisa Anda gunakan:
.hallomadiun-tabs {
width: 100%;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.hallomadiun-nav {
display: flex;
list-style: none;
justify-content: space-between;
padding: 0;
margin: 0 0 10px;
border-bottom: 2px solid #ddd;
}
.hallomadiun-nav li {
padding: 10px 20px;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 20px;
margin-right: 5px;
text-align: center;
color: #333;
font-weight: bold;
transition: background-color 0.3s, color 0.3s;
}
.hallomadiun-nav li.active {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
.hallomadiun-nav li:hover {
background-color: #e0e0e0;
}
.hallomadiun-content {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
Kode CSS ini memberikan tampilan modern dan responsif pada navigasi Anda. Tab yang aktif akan memiliki warna berbeda untuk menonjolkan posisinya.
3. Menambahkan Interaksi dengan JavaScript
JavaScript diperlukan untuk membuat interaksi tabs berjalan dengan baik. Berikut adalah kodenya:
<script>
document.querySelectorAll('.hallomadiun-nav li').forEach(tab => {
tab.addEventListener('click', function() {
// Hapus kelas aktif dari semua tabs
document.querySelectorAll('.hallomadiun-nav li').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab').forEach(content => {
content.classList.remove('active');
});
// Tambahkan kelas aktif pada tab yang dipilih
this.classList.add('active');
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
</script>
Kode ini akan mengaktifkan tab yang diklik dan menyembunyikan konten tab lainnya.
Cara Mengimplementasikan Multi Tabs Navigation di Blogspot
1. Masuk ke Blogspot Dashboard: Buka dasbor Blogspot Anda.
2. Tambahkan Widget:
- Pergi ke menu Tata Letak.
- Klik Tambahkan Gadget → Pilih HTML/JavaScript.
3. Masukkan Kode: Salin dan tempelkan kode HTML, CSS, dan JavaScript ke widget tersebut.
4. Simpan Perubahan: Klik tombol Simpan dan periksa tampilan blog Anda.
Kustomisasi dan Tips Tambahan Multi Tabs Navigation
1. Warna dan Ukuran:
Anda bisa mengubah warna dan ukuran tab dengan mengedit nilai CSS, seperti `background-color`, `padding`, atau `font-size`.
2. Responsif:
Pastikan tab terlihat baik di perangkat mobile dengan menambahkan media query di CSS.
3. Jumlah Tab:
Jika Anda membutuhkan lebih dari lima tab, cukup tambahkan elemen baru di bagian HTML dengan pola yang sama.
Demo Multi Tabs Navigation Di Blog
- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
Konten untuk Tab 1
Konten untuk Tab 2
Konten untuk Tab 3
Konten untuk Tab 4
Konten untuk Tab 5
Kesimpulan
Membuat multi tabs pills navigation di Blogspot adalah cara yang efektif untuk meningkatkan desain dan pengalaman pengguna blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat navigasi yang menarik, interaktif, dan mudah digunakan.
Navigasi yang baik bukan hanya soal estetika, tetapi juga tentang bagaimana Anda memandu pengunjung untuk menikmati konten Anda dengan lebih nyaman. Jadi, segera terapkan multi tabs pills navigation ini di blog Anda dan buat blog Anda lebih profesional!
Rate This Article
Thanks for reading: Membuat Multi Tabs Pils Navigation Mobile Di Blogger, Sorry, my English is bad:)