Cara membuat menu navigasi bottom mobile web blog
Berikut adalah contoh menu navigasi bottom untuk mobile pada platform Blogger menggunakan HTML dan CSS. Menu ini akan muncul di bagian bawah layar dan cocok untuk tampilan mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Bottom Menu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
padding-bottom: 60px; /* Space for bottom menu */
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
display: flex;
justify-content: space-around;
align-items: center;
height: 60px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.bottom-nav a {
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 14px;
flex: 1;
}
.bottom-nav a:hover {
background-color: #575757;
}
.bottom-nav i {
display: block;
font-size: 20px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!-- Content of the page -->
<div class="content">
<h1>Welcome to My Blogger</h1>
<p>This is an example page with a bottom navigation menu for mobile.</p>
</div>
<!-- Bottom Navigation Menu -->
<div class="bottom-nav">
<a href="#home">
<i class="fa fa-home"></i>
Home
</a>
<a href="#search">
<i class="fa fa-search"></i>
Search
</a>
<a href="#categories">
<i class="fa fa-th-list"></i>
Categories
</a>
<a href="#profile">
<i class="fa fa-user"></i>
Profile
</a>
</div>
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
Penjelasan singkat tentang kode di atas:
1. **CSS**:
- `.bottom-nav`: Mengatur gaya untuk menu navigasi di bagian bawah layar, termasuk posisi, warna latar belakang, tata letak flexbox, dan bayangan.
- `.bottom-nav a`: Mengatur gaya untuk link di dalam menu, termasuk warna teks, padding, ukuran font, dan flex untuk distribusi ruang yang merata.
- `.bottom-nav a:hover`: Mengatur warna latar belakang saat tautan disentuh atau diklik.
- `.bottom-nav i`: Menampilkan ikon dari Font Awesome dengan ukuran dan margin yang sesuai.
2. **HTML**:
- Menu navigasi ditentukan dengan div `<div class="bottom-nav">` yang berisi link `<a>` untuk berbagai bagian situs.
- Font Awesome digunakan untuk ikon navigasi. Pastikan untuk menyertakan script Font Awesome dengan benar.
Untuk mengintegrasikan menu ini ke dalam Blogger, Anda dapat menambahkan kode HTML ini ke dalam template Blogger Anda, khususnya di bagian footer atau menggunakan widget HTML/Javascript di tata letak Blogger. Jangan lupa untuk mengimpor skrip Font Awesome untuk ikon navigasi.
Rating
Komentar (0)
Posting Komentar
Berkomentarlah dengan kata kata yang baik dan Sopan