Rabu, 30 Mei 2018

Cara Membuat Search Box (POP UP) Full Screen Responsive

Cara Membuat Search Box (POP UP) Full Screen Responsive

Cara Membuat Search Box (POP UP) Full Screen Responsive
Cara Membuat Search Box POP UP Full Screen - Tutorial membuat kotak Pencarian pada blog dengan Efek POP UP fullscreen dan juga responsive ini mamang cari awalnya untuk "Blog Mang Otep" tetapi karena terdapat keterbatasan menu dan ruang yang tidak cukup, akhirnya mamang urungkan pergantian kolom search.

Dari pada mubazir dan tidak terpakai mending mamang simpan saja di artikel dan mamang bagikan, siapa tahu ada yang sedang membutuhkan tutorial membuat kotak pencarian dengan efek POP UP fullscreen ini. Kegunaan dari tutorial ini pun tidak ada, hanya semata - mata mempercantik tampilan blog anda.

Bagi anda yang sering bosan dengan tampilan blog anda bisa gunakan alternatif ini untuk menghilangkan rasa bosa tersebut. Selain mempercantik kalian juga bisa menargetkan visitor agar tertarik kepada blog anda dan mungkin saja ada visitor yang bilang "Wah Keren ih pengen coba". Sudah tidak usah panjang lebar lagi, sekarang simak baik - baik ya tutorialnya di bawah ini :

Cara Membuat Search Box POP UP Full Screen :

  • Masuk ke Dasbroad blog anda
  • Masuk ke menu Template >> Edit HTML lalu cari kode </head>
  • Pastekan CSS di bawah ini tepat di atas nya.

<style type='text/css'>
#search-box{position:relative;width:100%;margin:0}
#search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
.search-form{margin:0;padding:0}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:96%;padding:11px 0 12px 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 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 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:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:8vw;color:#fff;text-align:center;outline:0;position:fixed}
#search-form:after{content:"\f002";font-family:FontAwesome}
.keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
</style>
  • Save Template dan masuk ke tahap pemasangan search Box nya. Masuk ke Menu Tata Letak
  • Kemudian buatlah Gadget (widget baru)
  • Pilih HTML/JavaScript , dan masukan kode di bawah ini :


<div id="search-box">
  <form action="/search" id="search-form" method="get" target="_top">
    <input placeholder="Search Here" 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">
    <!-- Search Box -->
    <div class="search-form-wrapper" style="display: block;">
      <form action="/search" class="search-form" method="get">
        <input class="search-text" placeholder="Search Here" name="q" type="text" value="">
      </form>
    </div>
    <!-- Search Box -->
  </div>
</div>
  • Selesai dan Simpan gadget baru kemudian lihat hasilnya.

Demikianlah informasi mengenai Cara Membuat Search Box POP UP Full Screen dari Blog Mang Otep, semoga bermanfaat untuk anda. Jika menyukai artikel ini anda bisa like, share, and subscribe untuk berlangganan artikel terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments