2 Cara Membuat Kotak Pencarian (Widget Search Box) Terkeren

2 Cara Membuat Kotak Pencarian (Widget Search Box) Terkeren

Beriktu 2 Cara Membuat Kotak Pencarian (Widget Search Box) di Blogger Terbaru

Pagi Sobat jadi kali ini admin Duniamu38 akan berabagi tutorial bagaimana cara membuat sebuah Kotak Pencarian atau Search Box yang mana dari fungsi Search Box ini yaitu untuk mempermudah para visitor ketika akan mencari postingan yang mereka cari dengan hanya mengetikkan beberapa kata / keyword saja. 

 

Setelah itu ketika habis mereka ketik  keywordnya di kotak pencarian tersebut  dan setelah itu sobat enter atau klik tombol search maka semua keyword akan muncul sesuai keyword yang diketiknya tanpa ribet mencari keseluruhan dalam blog tersebut. Biasanya dari setiap website / aplikasi-aplikasi yang lain seperti sosmed, wordpress, cms, dan blog serta website-website lain pasti mereka akan memasang widget search box ini karena yang bagitu manfaat sekali walaupun tombolnya sangat kecil. Selain dari Search Box secara default bawaan, sobat juga bisa memasang dari bentuk search box default biasa , sobat juga bisa pasang widget Search Box yang bermodel-model hanya dengan pasang kode script html dibawah ini.

Pada dasarnya di Template website-website sudah terdapat Search Box ini baik di WordPress ataupun Blogspot mereka sudah menyediakan Widget Navigasi Search Box ini. Disini saya akan kasih tutorial membuat dan memasang kotak penelusuran ini dengan menggunakan 2 cara yang akan admin bahas yaitu pertama melalui widget bawaan blog itu sendiri dan kedua menggunakan Script Widget.

TUTORIAL CARA MEMBUAT DAN MEMASANG KOTAK PENCARIAN KEREN (SEARCH BOX) :

Cara Pertama yaitu Cara Menambah Kotak Pencarian secara Default didalam Blog.

1. Widget Search Box (Kotak Pencarian) / Default

Ikuti langkah-langkah di bawah ini :

#1 Silahkan  Masuk ke Dashboard Blog > Pilih Menu “Layout/Tataletak”

#2 Plih Menu “Tambahkan Gadget”  dan Klik Tombol (+) “Kotak Penelusuran”

#3  SIlahkan “Save/Simpan” dan Kalian juga widget default ini di posisi sidebar, header maupun footer.

2. Cara kedua yaitu Cara Menambah Kotak Pencarian Menggunakan Script HTML/Javascript

Ikuti cara Kedua ini yaitu Menggunakan JavaScript/html biar tampilan menjadi keren

#1 Silahkan  Masuk ke Dashboard Blog > Pilih Menu “Layout/Tataletak”

#2 Plih Menu “Tambahkan Gadget”  dan Klik Tombol (+) “Html/Javascript”

– Berikut kode Scriptnya dan silahkan paste di kotak html sobat:

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-Qi008pkhta4PUfWHT51YosxI_a10NMBjpDAbLRNRBs32dtIImL_CFqbSoz2rfd8QBT0gGqfBoLjTcEafnFx1DBq7nrzkHOgQ5-kkTl5bj1fn6QCsDR0foTW1z775ZrY6Qllc-rJkDGO/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input[type="text"] {
    background: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXrzAlPLhVKpXAyrR4ZsKUIYM-BKmIHzvJIkytOglxeVUuuUwxqeoyhOqGNTlCCTI5KmvHspLjxTDQRXyXHsAqrZNeV-B8IviSC8GMt0JbU0Y0UkFSYoCeUVwiy6lmSmrmnQ8Hyh7wDv8M/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyl4U8gYm_dBb-y2hebIq3E3fiUESPWIgem5DYWjjU05kdbi1SIuM2FUboDFXYMNjNggufmWM0NtTwvYKBAyMj1JMJkPFHoBsyCMm9q-Y3RIr2csOWJsud8famJ-fNpgdQ7we4LE4jhbRf/s1600/search-icon-hover.png);
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
    <input id="button-submit" type="submit" value=" "/>
    </form>

Catatan Penting !!!

Sobat juga bisa edit kotak pencarian baik dengan mengganti gambar warna / tampilan dengan memodifikasi HTML/JavaScript sendiri.sehingga menjadi lebih menarik dan keren pastinya.

#3  Silahkan “Save/Simpan” dan Kalian juga widget default ini di posisi sidebar, header maupun footer.

Mungkin itulah sedikit tutorial cara menambah kotak pencarian ini dengan menggunakan 2 cara. Semoga bermanfaat dan jangan lupa ikut terus artike terbaru dari duniamu38 ini. Terimakasih