CARA SIMPEL MEMBUAT NAVBAR PLUS MENU PENCARIAN DI BLOGGER

ilustrasi menu pencarian
ilustrasi menu pencarian
Ini adalah cara simpel (sederhana) dapat kalian terapkan untuk membuat navbar blog kalian sendiri dan karena template blogger di buat dengan HTML, trik ini dapat di terapkan hampir pada semua jenis template bawaan blogger.

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
Tentu saja navbar ini cukup responsif pada saat di terapkan ke blogger. Perhatikan contoh. Contoh di bawah ini "live" kalian dapat mencoba menyentuh dan mencobanya. Namun demikian fungsi kotak pencarian belum saya lengkapi dengan perintah PHP. (demo mungkin tidak akan terlihat pada browser di hape/mobile)
Cara penerapannya:

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:
edit menu blogger
Opsi edit menu blogger
  • 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">
<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>
2. Pasang HTML
Masih melalui edit HTML, cari kembali kode </head> dan letakan kode berikut tepat di bawahnya:
<div class="topnav">
<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>
Hanya itu yang kalian butuhkan. Save template.

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 plus menu pencarian responsif tampilan dekstop
Dan berikut tampilannya di bawah apabila di akses melalui layar hape:
navbar dan menu pencarian responsif tampilan mobile
navbar dan menu pencarian responsif tampilan mobile
Demikian trik membuat navbar plus menu pencarian responsif sederhana untuk blogger. Pembuatannya tidak sampai melibatkan JavaScript, jadi ringan sekali.

Komentar

  1. Puyeng bcanya
    Gk pham bhasa pemograman 😂

    BalasHapus
    Balasan
    1. supaya tidak puyeng kita harus belajar menyukainya :)

      Hapus

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE