CARA SEDERHANA MEMBUAT MENU NAVIGASI PLUS KOTAK PENCARIAN

Pada kesempatan memberikan trik kali ini sengaja saya menghilangkan fungsi dropdown pada topnav dan menggantikannya menjadi kotak atau tombol pencarian yang unik, tentu saja sobat masih bisa menambahkannya jika sobat menginginkannya. Contoh pada menu navigasi editblogtema ini.
created with editor HTML online
proses pembuatan salah satu menu navigasi plus kotak pencarian editblogtema, menggunakan elemen dasar yang bersih
Menu Navigasi kali ini juga tidak pernah terlepas dari style editblogtema walaupun memiliki teknik pembuatan yang sedikit berbeda: Sama sama memanfaatkan elemen HTML dasar yang bersih dan ringan, tidak akan mempengaruhi loading karena hanya memanfaatkan elemen elemen internal template blog itu sendiri.
Plus menu pencarian responsive
Trik ini juga dapat diterapkan kepada template template terbaru seperti contempo, emporio, soho dan terkemuka. Juga dapat dengan mudah di terapkan kepada template template yang lebih tua.

1. TAMBAHKAN CSS:
Masuk kepengaturan blog (dasbor blogger):
  1. Pilih Tema atau Theme
  2. Dibawah tampilan tema ada dua pilihan: "Sesuaikan" dan Edit HTML
  3. Pilih Edit HTML.
  4. Maka akan terbuka halaman editor HTML tekan ctrl+F dan cari kode </head>
  5. Copy kode dibawah ini dan pastekan diatas kode </head> tadi:
<style>
input[type=text] {
width: 100px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 30px;
font-size: 16px;
background-color: transparent;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
color: white;
}
</style>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #c0c0c0;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #333;
color: white;
}
.active {
background-color: #c0c0c0;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
2. TAMBAHKAN HTMLMasih pada halaman editor HTML tekan ctrl+f cari kode <body> sobat tidak akan menemukan kode tersebut pada template yang lebih tua, maka letakan saja kodenya dibawah kode:  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Artinya begini:

  1. Pada tema blogspot terbaru (Contempo, Emporio, Soho dan terkemuka) letakan saja kode berikut di bawah kode <body>
  2. Pada tema blogspot lama dan klasik (PT. keren sekali, sederhana, Jendela dst) tempatkan saja kode ini dibawah kode <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Kodenya adalah sebagai berikut:
<div class="topnav" id="myTopnav">
<h1><a href="#home" class="active">EDITBLOGTEMA</a></h1>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i></a>
<div id='bponavid'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' placeholder='🔍'/></form>
</div></div>
3. TAMBAHKAN JAVASCRIPT
Masih pada di posisi halaman editor cari tekan ctrl+f cari kode </body> dan copy-paste kode berikut letakan tepat diatas </body> tadi.

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Sobat bisa mengabaikan JavaScript jika pada tema yang lebih tua belum di modifikasi menjadi responsive.

Lihat DEMO

www.editblogtema.net


Beri Komentar atau, Ajukan Pertanyaan

2 Comments

  1. wah tutorial yang bermanfaat ini gan agar tampilan menu navigasi bisa terlihat keren dan berfungsi dengan baik :)

    ReplyDelete
    Replies
    1. Kami spesialist membuat menu karena dia membuat templat blog tampil beda.

      Dia juga adalah first impression sebuah tema web

      Delete

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE