Membuat Search Design Show Hide Responsive Di Blog
—
Daftar isi
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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' 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.
tamat ✦
Obrolan pembaca 3
Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.
Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:
- Sopan & saling menghargai
- Tanpa link promosi atau spam
- Komentar yang melanggar akan dihapus
agak kurang efektif gan masak diatas sudah ada tombol search masih dikasih lagi gan ~_~
ReplyDeletekenapa ngga di delete yang lamanya ? @,@
DeleteCaranya gimana ziz,, :v ane takut salah :D
Delete