Cara Menambahkan Search Box Pada Blog

Sobat Kanaya's Corner..

Sesuai dengan namanya, search box merupakan fitur kotak pencarian. Dimana nantinya akan memudahkan pengunjung blog sobat untuk mencari artikel yang mereka inginkan.

Sobat bisa melihat tampilan search box dari blog ini yang berada di samping kanan blog.

Ya kurang lebih tampilan seperti ini..

1. Buka blog sobat dulu pastinya..

2. Pilih Tata Letak > Tambahkan Gadget > HTML/Javascript.

3. Masukkan kode HTML berikut pada kotak dialog HTML/Javascript yang baru sobat tambahkan, lalu simpan.
 

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wPRic2FHFjgeMzGQeEKeGhgzHiMlWkAZ_mXLMJ_4xFCfJnc7zuPMBJK2_t5Jo0JmtkD6D6Baayq8-8BToy1zBOTZfnK3OtbQKYH1GUPGYHvtl0QMiBouHPiCQ2pxYrycv1k5raFHJvcU/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/AVvXsEiq-ijOYSh7PLVRN6MqFtOJ7Fu0xAroQZiCPGygDbi73yfLST704SfNN8Bi8pVulQnJLPjf2z0wCYIeSNy7_d3KZcboKuYjJYTfNIXj62ZeoRawoNSkzEaQoQFkL1YkAgfLKwSskViR-nnr/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/AVvXsEgqDfXuq7Hk6Kui27q2orNLR41Ru5GSqj35-_BBnouARZW7Ap3gBs4ffDN1ENd9lDa1KP5KU2or-4MfygLaIpOVPuXO909WifUaQS8mttZTckGxKf4Z4JuyetknuEkP3WChdedNsysltvl4/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>

Cukup mudah ternyata ya sobat..

Semoga artikel ini bermanfaat bagi sobat semua..

Jika ada saran, masukan atau komentar, silahkan tinggalkan tulisan sobat di postingan ini.

Jika suka dengan artikel ini, jangan lupa like dan share ya sobat..

--  KANAYA'S CORNER  --