Trik membuat tombol menu pencarian dengan hidden sidenav beranimasi

menu pencarian berlaci dan beranimasi
Mengapa kami harus membuat tombol menu pencari model ini tidak lain adalah karena mempertimbangkan ruang tersedia pada header blog terlalu kecil terutama ketika halaman blog di buka melalui seluler (mobile).

Dengan cara ini pengguna dapat menyentuh ujung panah untuk menarik keluar kolom pencarian dan ketika kolom di klik kolom tersebut otomatis akan melebar untuk mengetik kata kunci pencarian. Perhatikan gambar:



Saat ini kami sedang menggunakannya untuk template essentials re-desain.


1. CSS:

Masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML. Di dalam halaman editor HTML blogger cari kode </head> dan copy lalu letakan kode berikut tepat di atasnya:

<style>#nbc-searchexpandbox1{
padding:10px;}
#nbc-searchexpandsubmit1{
border:1px solid #CC0000;
background: #CC0000;
padding:5px;
color:#ffffff;
font:14px verdana;
z-index:999;}
#nbc-searchexpandinput1{
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
border:1px solid #fff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:60px;}
#nbc-searchexpandinput1:hover{
width:200px;}
#mySidenav a {
position: absolute;
left: -90px;
transition: 0.3s;
padding: -10px;
width: auto;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 0px 0px 0;
z-index:999;}

#mySidenav a:hover {
left: 0;
z-index:999;}

#about {
top: 0px;
background-color: transparent;
z-index:999;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>


2. HTML

Masih di dalam halaman editor HTML cari kode </header> letakan kode berikut tepat di atasnya:

<div class='sidenav' id='mySidenav'>
<a href='#' id='about'><div id='nbc-searchexpand1'>
<form action='/search/max-results=8' id='nbc-searchexpandbox1' method='get'>
<input id='nbc-searchexpandinput1' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this site...&quot;;}' onfocus='if (this.value == &quot;Search this site...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this site...'/>
<input id='nbc-searchexpandsubmit1' type='submit' value='geser'/><i aria-hidden='true' class='fa fa-arrow-right'/>
</form>
</div></a>

Save template. 

Sebenarnya kita bisa menggunakan trik menu pencarian hidden dengan hanya menampilkan ikon kaca pembesar akan tetapi menu yang kami buat sudah menggunakan trik overlay, jadi tidak bijak menambah overlay baru pada bagian head. Sebagai solusinya menu dengan sidebar drawer ini lebih cocok. 

widget ini kami terapkan ke dalam template essentials.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak