Cara Menciptakan Tampilan Search Box Di Blogger Keren Dengan Html

Cara Membuat Kotak Pencarian Blogger - Kotak Pencarian merupakan bab dasar dari tampilan halaman blog tetapi penting untuk di letakan bab sisi kanan halaman maupun selera yang mendesain. Script pencarian atau kotak pencarian gampang dipakai 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 mempunyai widget kotak pencarian khusus gaya yang berbeda dengan desain templatenya, alasannya ialah mereka tidak hanya membantu pengguna untuk menemukan solusi duduk masalah mereka dengan lebih mudah, tetapi juga menambahkan tampilan profesional ke blog.

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

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

Kotak Pencarian khusus Untuk Blogger
Cukup menambahkan Search Bar saja tidak cukup, itu harus sanggup mengemban amanah sesuai dengan tema blog. Blogger juga menyediakan widget Resmi Sederhana untuk itu, tetapi itu tidak memperlihatkan tampilan profesional dan bergaya berpenampilan menarik, tetapi teman juga sanggup memakai CSS untuk gaya widget kotak pencarian resmi blogspot. Jika kotak Pencarian yang usang 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, teman juga sanggup 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 menyerupai di header, sidebar, footer, dll.
Bergaya Aktif, melayang dan efek fokus.
CSS murni, tanpa gambar.
Kustomisasi gampang 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 diharapkan - 250 piksel

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

Langkah 2. Pilih HTML / JavaScript > tempelkan isyarat 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! akibat sudah sob,
Sekarang pengunjung sanggup mencari kuari dengan gampang di blog sobat. Jika terjadi duduk masalah atau error silahkan komentar di bawah semoga nanti saya perbaiki lagi.
Selamat mencoba semoga berhasil sob..