Cara Membuat Kotak Pencarian Popup Full Screen

Cara Membuat Kotak Pencarian Popup Full Screen - keberadaan kotak pencaraian pada sebuah blog sangatlah penting, baik dalam bentuk widget ataupun yang lainnya.

Dengan adanya kotak pencarian pada blog akan lebih memudahkan pengunjung dalam mencari artikel yang mereka inginkan. Nah kali kali ini kami akan berbagi tips cara membuat kotak pencarian dengan efek popup full screen.

Seperti yang anda lihat pada gambar disamping, kotak pencarian ini tidaklah terlihat mewah dengan dipenuhun efek full colour, kotak pencarian ini justru terlihat flat dengan background transparan sehingga tampilan blog akan terlihat berada di belakang kotak pencarian ini.

Namun kami sendiri lebih menyukai desain seperti ini, karena terlihat lebih simpel dan rapi.

Nah bagi anda yang tertarik untuk menambahkan kotak pencarian ini pada blog anda, berikut ini adalah cara pemasangan nya.

Cara Membuat Kotak Pencarian Popup Full Screen

1. Login ke Blogger > Tata Letak > Buat widget baru (HTML/JavaScript).
2. Tambahkan Kode dibawah ini.

<div id="search-box">
  <form action="/search" id="search-form" method="get" target="_top">
    <input placeholder="Cari Artikel" onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />
  </form>
</div>
<div id="popup_searchBox" style="display:none;">
  <button class='keluar' onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button>
  <div id="popup_searchBox_Data">
    <div class="search-form-wrapper" style="display: block;">
      <form action="/search" class="search-form" method="get">
        <input class="search-text" placeholder="Cari Artikel" name="q" type="text" value="" />
      </form>
    </div>
  </div>
</div>

3. Simpan Widget
4. kembali ke halaman utama blogger
5. Klik Tema > Edit HTML, Kemudian tambahkan kode di bawah ini di atas </head> 

<style type='text/css'>
#search-box{position:relative;width:100%;margin:0}
#search-form{margin:0;background:#fefefe;overflow:hidden;border:1px solid #e0e0e0;transition:all .3s;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;overflow:hidden}
.search-form{margin:0;padding:0}
#search-text{font-size:14px;border-width:0;background:transparent}
#search-box input[type=&quot;text&quot;]{width:96%;padding:8px 0 8px 1em;color:#333;outline:none}
#search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#2EB0EC;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;cursor:pointer}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8}
.search-form-label,.search-text{position:absolute;left:0}
.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}
.search-text{top:40%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:4vw;color:#fff;text-align:center;outline:0;position:fixed}
.keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
</style>

6. Simpan Tema
7. Selesai.

Nah itulah Cara Membuat Kotak Pencarian Popup Full Screen - untuk style silakan disesuaikan dengan keinginan anda.

Jangan lupa share dan like jika artikel ini, selamat mencoba semoga bermanfaat.

Berbagi :