Membuat Search Design Show Hide Responsive Di Blog

12:35:00
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

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 Comments

Annonymous 12 December 2014 at 13:21

agak kurang efektif gan masak diatas sudah ada tombol search masih dikasih lagi gan ~_~

Khoazis 12 December 2014 at 17:46

kenapa ngga di delete yang lamanya ? @,@

Renaldy Ramadani 12 December 2014 at 17:58

Caranya gimana ziz,, :v ane takut salah :D