Skip to main content
Azid Blogger

follow us

Cara Membuat Pop Up Search Box Dengan Open Close Button

Cara Membuat Pop Up Search Box Dengan Open Close Button

www.azid.web.id - Cara Membuat Pop Up Search Box Dengan Open Close Button. Pada hari yang sama saya berekperimen membuat pop up search box namun kode cssnya saya ambil dari salah satu template kompiajaib.com, maklum buat uji coba saja. Lain kali, saya akan berusaha untuk mendesain tutorial dengan css buatan saya sendiri agar terlihat orisinal dan tidak di bilang plagiarism.

Baiklah, untuk membuat pop up search box mirip template kompi flexible AMP Versi 3 dengan open close button sobat bisa mengikuti langkah-langkahnya berikut ini:

Pertama, buka blogger - menu theme - edit HTML. Jika sudah masuk, cari kode </head> kemudian letakkan kode berikut ini tepat diatas kode tersebut

<style>
/* Search Box */
#conteainer-search {background:rgba(255,255,255,.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;display:none}
.search-close{position:absolute;top:20px;right:20px;z-index:999;cursor:pointer}
#search_box{position:fixed;top:100px;left:0;right:0;z-index:999;}
.search_box .content-wrapper{background:#11589d;padding:5px;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
.BlogSearch h2.title{display:none}
.BlogSearch .gsc-search-box{width:100%}
.BlogSearch input.gsc-input{width:calc(100% - 10px);padding-right:4px\9;padding-left:4px\9;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;height:34px;padding:6px 12px;font-size:95%;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.BlogSearch input.gsc-input:focus{border-color:#11589D;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(17,88,157,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(17,88,157,.6)}
.BlogSearch input.gsc-input:-moz-placeholder{color:#999}
.BlogSearch input.gsc-input::-moz-placeholder{color:#999;opacity:1}
.BlogSearch input.gsc-input:-ms-input-placeholder{color:#999}
.BlogSearch input.gsc-input::-webkit-input-placeholder{color:#999}
.BlogSearch td.gsc-search-button{width:60px;}
.BlogSearch input.gsc-search-button{background-color:#11589D;border:0;-webkit-border-radius:3px;-moz-border-radius:3px;width:100%;height:34px;padding:6px 0;text-align:center;font:700 95% Roboto;line-height:1.428571429;color:#fff;vertical-align:middle;background-image:none;border-radius:4px;cursor:pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
</style>

KETERANGAN:
Pastikan kode css search bawaan template sobat sudah sobat hapus semuanya agar tidak bertabrakan dengan kode css di atas.

Kedua, cari kode </header> jika sudah ketemu letakakn kode berikut ini tepat dibawahnya

<div id='conteainer-search'>
<span class='search-close' onclick='close_search();'><svg height='34' viewBox='0 0 24 24' width='34'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'/></svg></span>
<b:section class='search_box' id='search_box' maxwidgets='1' showaddelement='no'>
  <b:widget id='BlogSearch1' locked='false' title='Cari Blog Ini' type='BlogSearch' version='1'>
    <b:includable id='main'>
<div class='content-wrapper'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>
      </div>
    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>
</b:section></div>

Ketiga, letakkan kode icon svg pembuka search box berikut ini sesui keinginan sobat, (bisa di menu navigasi, atau yang lainnya)

<li><span class='search-open' onclick='open_search();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#333'/></svg></span></li>

KETERANGAN:
Untuk kode yang saya bold bisa sobat ganti dengan kode yang pas untuk kebutuhan sobat seperti <div> atau yang lainnya.

Keempat, cari kode </body> dan letakkan kode berikut tepat diatas kode </body>

<script>
//<![CDATA[
function open_search() {document.getElementById("conteainer-search").style.display = "block";}
function close_search() {document.getElementById("conteainer-search").style.display = "none";}
//]]>
</script>

Kelima, sobat bisa Save Template dan lihat hasilnya.

Demikianlah artikel saya terkait Cara Membuat Pop Up Search Box Dengan Open Close Button. Semoga berhasil dan bermanfaat. Amin.
PERHATIAN! File di Azid Blogger di redirect kurang lebih 5-7 kali oleh karena itu sobat harap bersabar untuk mendapatkan filenya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar