Cara Membuat Tampilan Search Box di Blogger Keren dengan Html

Cara Membuat Tampilan Search Box di Blogger Keren dengan Html

Cara Membuat Kotak Pencarian Blogger - Kotak Pencarian merupakan bagian dasar dari tampilan halaman blog tetapi penting untuk di letakan bagian sisi kanan halaman maupun selera yang mendesain. Script pencarian atau kotak pencarian mudah digunakan dan membantu meningkatkan kualitas blog. Box pencarian membantu pembaca untuk menavigasi atau mencari kata kunci yang ingin di cari seluruh blog secara lebih efisien. Sobat akan melihat bahwa setiap blogger, blogspot, wordpress memiliki widget kotak pencarian khusus gaya yang berbeda dengan desain templatenya, karena mereka tidak hanya membantu pengguna untuk menemukan solusi masalah mereka dengan lebih mudah, tetapi juga menambahkan tampilan profesional ke blog.


Sedangkan perayap web seperti Google dapat merayapi seluruh situs dengan mudah untuk mengindeks semua postingan, sobat mungkin memiliki ratusan atau lebih postingan halaman untuk dibaca orang. pasti memiliki kategori yang berbeda, label, tag, posting terkait, dan lain sebagainya. Yang tercantum di setiap halaman blog, tetapi sobat tidak dapat memberikan semua data yang ada di satu halaman tersebut. Agar orang menemukan apa yang mereka cari, mereka harus dapat mencari seluruh konten di halaman blog sobat dengan cepat dan mudah.

Semakin mudah bagi orang untuk menavigasi seluruh blog, semakin besar kemungkinan mereka akan tetap dan mengunjungi blog sobat lagi .

Kotak Pencarian khusus Untuk Blogger
Cukup menambahkan Search Bar saja tidak cukup, itu harus dapat diandalkan sesuai dengan tema blog. Blogger juga menyediakan widget Resmi Sederhana untuk itu, tetapi itu tidak memberikan tampilan profesional dan bergaya berpenampilan menarik, tetapi sobat juga dapat menggunakan CSS untuk gaya widget kotak pencarian resmi blogspot. Jika kotak Pencarian yang lama tidak berfungsi dengan baik dan ingin menggantinya dengan yang indah, jangan khawatir, saya di artikel ini bagikan dengan gratis script kotak pencarian, cukup ambil salah satu atau semua, sobat juga dapat mengedit CSS sesuai dengan kebutuhan blog.


Manfaat Menambahkan Kotak Pencarian


Tambahkan tampilan profesional ke situs blog anda.
Berikan manfaat dasar kepada pelanggan.
Hemat waktu pengguna.
Dapat diterapkan di mana saja seperti di header, sidebar, footer, dll.
Bergaya Aktif, melayang dan efek fokus.
CSS murni, tanpa gambar.
Kustomisasi mudah dari gaya CSS.
Secara otomatis menyesuaikan lebar.



<style type="text/css">
    #teknosmr-searchbox {
        background-color: #F5F5F5;
        border: 1px solid #EDEDED;
        padding: 5px;
        border-radius: 10px;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    }
    #teknosmr-input {
        background-color: #FEFEFE;
        border: medium none;
        font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
        margin-right: 2%;
        padding: 4%;
        box-shadow: 2px 1px 4px #999999 inset;
        border-radius: 9px;
        width: 60.33%;
    }
    #teknosmr-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    }
    #teknosmr-submit {
        background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
        border-radius: 9px;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
        padding: 4%;
        width: 28%;
    }
    #teknosmr-submit:hover {
        background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
    }
</style>
<form id="teknosmr-searchbox" action="/search" method="get">
    <input type="text" id="teknosmr-input" name="q" placeholder="Type Here..." />
    <input type="hidden" name="max-results" value="8" />
    <input id="teknosmr-submit" type="submit" value="Search" />
</form>


<style type="text/css">
    #teknosmr-searchbox {
        min-width: 250px;
        margin: 10px auto;
        border-radius: 3px;
        overflow: hidden;
        max-width: 300px;
    }  
    #teknosmr-input {
        width: 59.2%;
        padding: 10.5px 4%;
        font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
        border: none;
        background-color: #EEE;
    }   
    #teknosmr-input:focus {
        outline: none;
        background-color: #FFF;
        box-shadow: 0 0 2px #333333 inset;
    }   
    #teknosmr-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 32.8%;
        font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
        color: #FFF;
        text-transform: uppercase;
        background-color: #D83C3C;
    }   
    #teknosmr-submit::before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid solid solid none;
        border-color: transparent #D83C3C;
        top: 12px;
        left: -6px;
    } 
    #teknosmr-submit:focus,
    #teknosmr-submit:active {
        background-color: #C42F2F;
        outline: none;
    }
    #teknosmr-submit:focus::before,
    #teknosmr-submit:active::before {
        border-color: transparent #C42F2F;
    }
    #teknosmr-submit:hover {
        background-color: #E54040;
    }
    #teknosmr-submit:hover::before {
        border-color: transparent #E54040;
}
</style>
<form id="teknosmr-searchbox" action="/search" method="get">
    <input type="text" id="teknosmr-input" name="q" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="teknosmr-submit" type="submit">Search</button>
</form>



<style type="text/css">
    #teknosmr-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
    .teknosmr-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #009bff;
        cursor: pointer;
        border-bottom: 5px solid #0276c1;
    } 
    .teknosmr-buttonwrap:hover {
        border-bottom: 5px solid #bc490a;
        background: #d75813;
    }   
    .teknosmr-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }  
    .teknosmr-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }  
    .teknosmr-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }   
    #teknosmr-input {
        height: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    } 
    #teknosmr-input:focus,
    #teknosmr-input:active {
        background-color: #fff;
    }
</style>
<form action="/search" id="teknosmr-searchbox" method="get">
    <span class="teknosmr-buttonwrap"><button class="teknosmr-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="teknosmr-input" placeholder="Type here ..." />
    <input type="hidden" name="max-results" value="8" />
</form>


<style type="text/css">
    #teknosmr-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }   
    .teknosmr-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }   
    .teknosmr-buttonwrap:hover {
        background: #1a1a1a;
    }   
    .teknosmr-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }   
    .teknosmr-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }  
    .teknosmr-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }  
    #teknosmr-input {
        height: 35px;
        width: 82%;
        padding: 0px;
        padding-left: 4%;
        border: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    } 
    #teknosmr-input:hover,
    #teknosmr-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>
<form action="/search" id="teknosmr-searchbox" method="get">
    <span class="teknosmr-buttonwrap"><button class="teknosmr-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="teknosmr-input" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
</form>



Langkah-Langkah Cara Menambahkan Widget Kotak Pencarian Ke Blogger

Catatan: Lebar sidebar minimum diperlukan - 250 piksel

Langkah 1. Masuk ke akun Blogger sobat, lalu pergi ke Layout > klik tautan ' Tambahkan gadget ' di sebelah kiri.

Langkah 2. Pilih HTML / JavaScript > tempelkan kode di dalam kotak kosong.

- Ubahlah nilai = " 8 " untuk jumlah total posting per halaman. Misalnya nilai = "12" .

Catatan: Pastikan nilai hasil maksimum cocok dengan batas posting di beranda.

Langkah 3. Tekan Save .

Nah! selesai sudah sob,
Sekarang pengunjung dapat mencari kuari dengan mudah di blog sobat. Jika terjadi masalah atau error silahkan komentar di bawah agar nanti saya perbaiki lagi.
Selamat mencoba semoga berhasil sob..
Advertisement

Baca juga:

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments