Home » » Cara Memasang Kotak Search pada Blog

Cara Memasang Kotak Search pada Blog

Written By Unknown on Sunday, January 20, 2013 | Sunday, January 20, 2013



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.
Bagikan ke:

leave comment

Semua umpan balik saya hargai dan jika sempat saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin.

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan Anda tidak berkomentar dengan menggunakan kata-kata kasar, sara, p*rn* dan lain-lain.
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
4. Jangan Tambah Link ke tubuh komentar Anda karena saya memakai system link exchange

5. Jika perlu sebarluaskan artikel dengan cara klik tombol SHARE di atas.

Bila anda senang dengan artikel ini silahkan Join To Blog atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

Me

Post a Comment

 
Copyright © 2012 - 2015 Renviletieft Blog - All Rights Reserved
Template Craeted by : RenvileTieft Blog
Proudly Powered by Blogger