ilustrasi menu pencarian |
Pada Navbar hanya di tampilkan tiga menu agar ia tampak sederhana, dalam tutorial ini saya misalnya menambahkan tiga menu saja untuk mewakili konten sebuah blog:
- Judul Blog
- Tentang atau Perihal
- Kontak
- Dan lalu "Menu Pencarian" pada ujung paling kanan
1. Pasang CSS:
Masuk ke pengaturan blog
- Pilih theme
- Lalu akan muncul menu baru blogger cari titik tiga sweetie berikut: ፧dan klik maka akan muncul menu seperti terlihat pada gambar berikut:
- Pada menu yang muncul pilih "Edit HTML" pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode CSS berikut tepat diatasnya:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">2. Pasang HTML
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #FF0000;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width:50px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: none;
text-align: left;
width: 50%;
margin: 0;
padding: 0px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
Masih melalui edit HTML, cari kembali kode </head> dan letakan kode berikut tepat di bawahnya:
<div class="topnav">Hanya itu yang kalian butuhkan. Save template.
<a class="active" href="#home">Judul</a>
<a href="#about">Tentang</a>
<a href="#about">kontak</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
Dan Jangan kuatir dengan tampilannya yang pada halaman postingan tampak tidak rapi karena pada halaman HTML yang sesunggunya navbar dan menu pencarian responsif ini akan terlihat rapi sebagaimana terlihat pada gambar berikut:
untuk tablet/laptop dan desktop:
navbar plus menu pencarian responsif tampilan dekstop |
navbar dan menu pencarian responsif tampilan mobile |
Puyeng bcanya
BalasHapusGk pham bhasa pemograman 😂
supaya tidak puyeng kita harus belajar menyukainya :)
Hapus