Membuat Search Design Show Hide Responsive Di Blog

Selamat datang agan atau aganwati, kali ini Saya akan berbagi tips and trik menambahkan search design show hide seperti yang dimiliki Arlina Design, untuk membuatnya Anda harus mengikuti beberapa langkah berikut ini;

Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Pilih menu edit html,

4. Copy script di bawah ini,

 /*CSS Search*/

.luna-search {position:relative;padding:0;height:0;margin:0 auto;}
.searchbutton {background:transparent;margin:0;padding:7px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;}
.searchbutton.active {color:#e8eaef;}
.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#6b6c71;position:relative;}
.searchbutton.active:after {color:#fc4f3f;}
.search-form {display:none;position:fixed;bottom:0;left:15%;background:rgba(31,32,37,0.90);
padding:5px 0;width:85%;z-index:91;margin:0 auto;box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.16);}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;width:88%;font-weight:400;font-size:20px;font-family:'Roboto',sans-serif;color:#6b6c71;margin:0 auto;border:none;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
.searchbar:focus {color:#9eb2c0;}
.searchsubmit {background:#07ACEC;border:none;outline:none;cursor:pointer;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;
font-family:'Roboto',sans-serif;line-height:45px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#2e3138;color:#fff;box-shadow: inset 0 0 0 2px #07ACEC;}
.searchsubmit:active {background:#fe4e3f;color:#fff;box-shadow:none;border:none;outline:none;}
.searchblanter{position:absolute;top:10px;right:390px;text-align:center;padding:0;color:#292929;font-size:44px;font-weight:400;line-height:25px;cursor:pointer;transition:all .4s ease-in-out;}
.searchblanter:hover{color:#07ACEC;} 

5. Cari kode ]]></b:skin> dengan cara

Ctrl

+

F

,

6. Paste script yang tadi sudah dicopy tepat di atas kode ]]></b:skin>,

7. Selanjutnya copy script di bawah ini,

 <div class='luna-search'>

</div>
<div class='search-form'>
<form action='/search' class='searchform' method='get'>
<input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari artikel di sini...'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
</div>
<div class='searchblanter'><i class='icon-search' style='font-size: 24px;'/></div> 

8. Lalu cari kode </header> dengan cara

Ctrl

+

F

,

9. Paste script yang tadi sudah dicopy tepat di atas kode </header>,

10. Selanjutnya copy script di bawah ini,

 <script type='text/javascript'>

//<![CDATA[
$(function(){
$('.searchblanter').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});
//]]>
</script> 

11. Lalu cari kode </body> dengan cara

Ctrl

+

F

,

12. Paste script tadi yang sudah dicopy tepat di atas kode </body>,

13. Simpan dan lihat hasilnya.

Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan artikel ini dan tinggalkan komentar Anda, terima kasih.

Share this