KETIKA KOTAK PENCARIAN BLOGGER MENJADI LEBIH DARI SEKEDAR ITU

Siapa bilang kotak pencarian pada halaman web atau halaman blogger itu hanya sebagai tool pembantu navigasi halaman blogger? Sobat pasti akan tertarik kalau saya katakan "tombol pencarian" itu ternyata bisa berfungsi sebagai hiasan, penghias sebuah halaman blogger sehingga terlihat semakin cantik dan menarik!

Bahkan bukan tidak mungkin akan menjadikan orang ingin mencobanya bukan?

Yang minat untuk menghiasi blog sobat dengan kotak pencarian unik dengan photo atau bingkai yang beda? Saya bisa membantu buatin. Akan tetapi jika sobat pingin tau cara membuatnya sih tidaklah terlalu sulit. Malah menurut saya  mudah sekali, caranya ya cukup masuk ke pengaturan (dasbor) blogger:

1. Tambahkan gagdet/widget
2. Pilih widget HTML/JavaScript
3. Setelah terbuka kotak kosong HTML/JavaScript cukup isikan dengan kode dibawah ini:

<center><style>

    #searchbox {

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXmBHXHQxxdQ6hVxV3-mdtx-pHLW6Z-baSxmwvKrfIgR5nNeoCZKJTrdAgGV9LlNkVpZ0UO9RoSrdW3_AMIpSzc3dKK9N8tePQqRulbSF9nrEFlwLr_Wt6VWe0iRNvogct_lnv-uiTfd1/s1600/Adobe_20190217_192211.png) no-repeat;

        width: 230px;

        height: 75px;

    }

    input:focus::-webkit-input-placeholder {

    color: transparent;

    }

    input:focus:-moz-placeholder {

    color: transparent;

    }

    input:focus::-moz-placeholder {

    color: transparent;

    }

    #searchbox input {

        outline: none;

    }

    #searchbox input[type="text"] {

        background: transparent;

        padding: 5px 0px 5px 20px;

        margin: 10px 15px 0px 0px;

        border-width: 0px;

        font-family: "Brush Script MT", cursive;

        font-size: 20px;

        color: #6495ED;

        width: 65%;

        font-weight: bold;

        display: inline-table;

        vertical-align: top;

    }

    #button-submit {

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_K1yYcq00rQHhu-YvBmuunhYd-XCWfUX487IsOKp8gFvN7CHFjhUB3Mq6AzTM_3FLV918k2TSGl_sVCx_W_1YsXQRTRfu9iLmGuU-4aE5byYAI_DofT8mWnfb33yKLfcw8GwNP9apcFIn/s1600/magnifier.png) no-repeat;

        border-width: 0px;

        cursor: pointer;

        margin-top: 10px;

        width: 19px;

        height: 25px;

    }

    #button-submit:hover {

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQMHDoqxAFG3PFft0glWRp7WBkYSl4fBqRKTV8Vw12jGHbnHpRWJlEVDJwlzpx0YqaK7p_kzka1iDJ3DAuPCYkhtNs9-PUcuW9lhDmmEr1cDyUVLrokmXwpON1LRd6rbky1c8kgTXYtSg7/s1600/magnifier-hover.png) no-repeat;

    }

    #button-submit:active {

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQMHDoqxAFG3PFft0glWRp7WBkYSl4fBqRKTV8Vw12jGHbnHpRWJlEVDJwlzpx0YqaK7p_kzka1iDJ3DAuPCYkhtNs9-PUcuW9lhDmmEr1cDyUVLrokmXwpON1LRd6rbky1c8kgTXYtSg7/s1600/magnifier-hover.png) no-repeat;

        outline: none;

    }

    #button-submit::-moz-focus-inner {

        border: 0;

    }

    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">

        <input class="textarea" name="q" type="text" size="15" placeholder="Cari disini..." />

        <input id="button-submit" type="submit" value="" />

    </form></center>

Save Tema.

Untuk menempatkan kotak pencarian di posisi tengah header tambahkan pembuka <center> dan lalu ditutup dengan </center> Namun kunci desain tersebut hanyalah pada link background yang saya sorot warna kuning. Sobat perlu membuat sebuah gambar dengan ukuran tertentu menguploadnya ke halaman web. Link gambar sobat itulah yang akan menjadi pengganti link yang saya sorot warna kuning diatas.

Lihat DEMO

EFEKTIP MEMBUAT TAMPILAN BLOG MENJADI BEDA

Cara ini ternyata efektip membuat tampilan blog menjadi beda. Sobat bisa menghiasainya dengan bingkai pemandangan alam, kartun, photo profile dll. Pokoknya dengan kreativitas tanpa batas. Pada demo diatas kami menerapkannya untuk template bawaan blogger CONTEMPO

Kami telah menerima pesanan:

• Membuat LOGO
• Menghias header blog dengan elemen bersih dan ringan
• Menu navigasi ringan, mobile dan responsive

Hanya bercanda saja untuk pesanan ini, kami sudah terlalu sibuk dengan pekerjaan dan usaha kecil kecilan kami di dunia nyata 🤣🤣🤣

www.editblogtema.net