Cara Membuat Kotak Pencarian Blog dengan Bergaya

Pada kali akan Saya bahas mengenai Bagaimana Cara Membuat Kotak Pencarian Blog dengan Bergaya. Di mana Anda dapat menambahkan mesin pencari warna-warni ke blog Anda dengan mudah. Kebanyakan orang lebih memilih untuk memiliki mesin pencarian yang sederhana, tetapi Anda dapat menyesuaikan sesuai selera Anda atau pandangan pada blog Anda. Ok, Sobat. Mari kita lihat bagaiamana membuat sebuah mesin pencari yang sederhana dan kemudian kita akan menyesuaikannya dengan berbagai sedikit Gaya.

Contoh mesin pencarian sederhana pada Blog:

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Masukkan kata kunci di sini..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Cari!" type="submit"/></form></center>

Di mana Anda dapat mengubah beberapa hal dalam mesin pencari sederhana ini. Yang pertama kata "Cari!", Di mana Anda dapat mengganti Pencarian dengan beberapa kata lain seperti "Go!". Anda juga dapat mengganti nilai = "Masukkan kata kunci di sini..." dengan beberapa kata lain yang akan muncul dalam kotak pencarian. Sesuaikan mesin pencari sederhana ini dengan selera Anda sendiri.

Sesuaikan mesin pencari sederhana ini agar lebih gaya dan keren

Sekarang, mari kita lihat bagaimana cara membuat mesin pencari sederhana ini dengan mengubahlebar, tinggi, warna & ukuran font nya biar lebih keren. 

Pada contoh di atas Saya menggunakan dua warna yaitu hitam & putih untuk menyesuaikannya.

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Ketik di sini..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Cari!" type="submit"/></form></center>

Okay.Sekarang, saya akan menjelaskan gaya yang digunakan dalam mesin pencari. 

Lebar

width: 150px; adalah lebar dari mesin pencari, Anda dapat mengubahnya ke nilai yang lebih tinggi atau lebih rendah. Seperti jika saya mengubahnya dari width: 150px; ke width: 200px, ini adalah hasil nya ...

Tinggi

tinggi: 15px; adalah tinggi dari kotak mesin pencari, Anda dapat mengubahnya juga mengubah ke nomor lain seperti ketika saya mengubah dari height: 15px, ke height: 20px; 

Warna

color: # FFFFFF; kode ini adalah untuk warna putih. Anda bisa mengganti warna yang lain dengan mengganti Kode warna tersebut. Silahkan Anda Cari Kode warna yang Anda inginkan. Contoh nya Saya mengubah warna: # FFFFFF; menjadi warna: # FFD900, yang merupakan warna agak oranye dan ini hasilnya ...

Ukuran Font

font-size: 14px; adalah untuk ukuran font di px. Di sini akan Saya berikan contoh nilai Font yang sedikit lebih rendah, untuk menunjukkan bahwa ada nya perbedaan...

Latar Belakang Warna Kotak Pencarian

background-color: # 000000; adalah untuk warna latar belakang kotak pencarian (bukan tombol). Mari kita ubah ke background-color: # FF0000; dan lihat apa yang akan terjadi. 

Latar Belakang Warna Tombol Cari

background-color: # FFFFFF; adalah warna latar belakang tombol pencarian, ubah ke # FFFF00(kuning) dan lihat apa yang terjadi ... 

Tombol Warna Teks Pencarian

Hal terakhir adalah warna: # 000000; yang merupakan warna pencarian teks tombol, mari kita ubah ke # 0000FF (biru) dan hasilnya adalah ...

Pemasangan mesin pencari ini di blog Anda

Anda dapat memasang kotak pencarian ini sama halnya dengan cara pemasangan widget pada sidebar Blog Anda.

Demikian lah Cara Membuat Kotak Pencarian Blog dengan Bergaya ini, Semoga bermamfaat.