Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog

Jika Anda telah menambahkan widget pencarian atau search box ke blog Anda, Anda mungkin bertanya-tanya bagaimana hal itu bisa terlihat sedikit lebih bergaya!

Sebetulnya dalam membuat model widget pencarian tidak sulit sama sekali. Anda dapat menyesuaikan tombol menggunakan CSS atau ganti dengan gambar sebagai gantinya. Pilihan lain kustomisasi adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian dan menghapus pencarian tombol sama sekali.

Dalam posting ini, kita akan melihat beberapa opsi dan metode untuk menyesuaikan widget pencarian, sehingga Anda dapat memilih metode yang terbaik bagi Anda dan gaya kotak pencarian agar sesuai dengan desain keseluruhan blog Anda sendiri.

Widget Search adalah contoh yang sangat baik dari apa yang bisa dimasukkan dalam header blog, dan dalam posting ini kita akan belajar bagaimana bentuk pencarian dapat ditata sesuai dengan tema Anda.

Widget Cari adalah jenis bentuk, dibangun dari kotak teks (area dimana Anda mengetik istilah pencarian), tombol kirim, dan beberapa elemen tersembunyi yang mengirim informasi ke server tentang pencarian yang sedang dilakukan.

Jika Anda menggunakan Blogger widget pencarian sederhana, kode untuk widget pencarian Anda akan terlihat seperti ini:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Unsur-unsur yang bisa kita lihat dalam warna merah. The "search-box" elemen itu adalah kotak yang berisi teks pencarian, sedangkan "search-btn" adalah tombol kunci untuk menyampaikan permintaan pencarian ke server.
Secara default, widget pencarian sederhana ini akan muncul seperti ini dalam template Anda:

Tetapi menggunakan beberapa teknik sederhana, kita bisa membuat ini terlihat jauh lebih cantik!

1 .Menggunakan CSS

Kustomisasi yang paling mudah dapat dicapai hanya menggunakan "inline CSS": ini berarti bahwa kotak pencarian dan tombol dapat ditata dalam kode yang digunakan untuk kotak pencarian.

Sebagai contoh, katakanlah kita ingin kotak pencarian untuk memiliki latar belakang biru pucat dan perbatasan biru tua. Untuk mencapai hal ini, kita hanya menambahkan beberapa deklarasi gaya ke elemen "pencarian-kotak", seperti ini:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Dengan menambahkan gaya deklarasi ini, kita dapat membuat suatu bentuk pencarian yang terlihat seperti ini:

Kita juga dapat menambahkan gaya pada tombol pencarian dengan cara yang sama. Kali ini, latar belakang biru tua dengan pinggiran merah, sementara teks berwarna putih dan tebal:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

Perhatikan bahwa dalam contoh ini, saya menggunakan "outset" daripada "solid" untuk properti perbatasan; ini memastikan tombol terlihat mengangkat bukannya datar, dan membantu pembaca memahami bahwa itu adalah sebuah tombol yang dapat diklik.
Berikut adalah bentuk yang dihasilkan:

Anda dapat melakukan percobaan dengan berbagai warna dan gaya untuk formulir pencarian Anda sendiri untuk membuat sebuah desain yang unik.

2. Teks Yang Terlihat

Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca Anda (misalnya:! Cari di Blog Ini).
Hal ini dicapai dengan menambahkan "nilai" ke kotak pencarian, seperti ini:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari di Blog Ini"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Ini akan tampil seperti ini:

Untuk mengubah teks pada tombol pencarian, kita hanya perlu mengubah pada value-nya saja:
<input id="search-btn" value="Search" type="submit"/>

Jika Anda lebih memilih tombol untuk mengatakan "Go!", Anda hanya bisa mengganti value dari "Search" dengan "Go!" sebagai gantinya:
<input id="search-btn" value="Go!" type="submit"/>

3. Menggunakan Gambar

Menggunakan gambar bukan tombol tidak begitu rumit. Untuk itu, kita hanya perlu mengubah jenis masukan dari "Submit " untuk Image dan menetapkan URL untuk foto tersebut.

Pertama-tama, Anda perlu untuk mencari gambar yang ingin Anda gunakan, dan upload gambar tersebut ke account hosting eksternal.

Dianjurkan untuk menggunakan gambar kecil atau ikon untuk ini (16x16px atau sedikit lebih besar akan menjadi ukuran yang sempurna untuk bentuk pencarian). Ada banyak ikon pencarian gratis yang tersedia dari Iconlet, atau Anda bisa men-download paket ikon dan memilih gambar yang cocok sebagai gantinya.

Untuk contoh ini, saya akan gunakan gambar ikon yang di upload dari Iconlet:

Untuk menggunakan gambar ikon tersebut dijadikan sebagai tombol untuk form pencarian anda, ini adalah kode yang bisa anda gunakan:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari di Blog Ini"/>
<input id="search-btn" value="Search" type="image" src="http://1.bp.blogspot.com/_xn2gmPb9TfM/R7YdyNkY3zI/AAAAAAAAA70/iOqf0FD-iUQ/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

Perhatikan bahwa saya telah mengubah jenis input dalam bentuk ini dari "submit" untuk "gambar", dan telah menambahkan URL dari gambar saya sesudahnya. Deklarasi gaya meluruskan citra terhadap kotak pencarian, menambahkan beberapa ruang ke kiri, dan memastikan ini tidak mengapung di atas kotak pencarian.

Gambar tersebut akan terlihat seperti dalam bentuk pencarian ini:

Bila Anda ingin menggunakan foto Anda sendiri sebagai tombol kirim, pastikan referensi URL yang benar dari gambar Anda.

Anda juga mungkin perlu menyesuaikan sedikit margin untuk gambar dari ukuran yang berbeda dengan yang digunakan dalam contoh ini.

Semoga bermanfaat...

Kategori Posting Terkait



Comments :

2 komentar to “Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog”

cv.mitra bangun bersama mengatakan... on 

thanks ya bagus bognya ...

Republican Wasp mengatakan... on 

Makasih banyak untuk infonya. Sesuai dengan yg saya cari-cari nih

  • Update Terbaru
  • Info Menarik
  • Networking



Poskan Komentar

 

IP Technorati => RNUGGKZFF7CR

About Me - Administrator

Admin Netpreneur Blog Indonesia - Ukafahrurosid.com
UKA FAHRUROSID
a 25 years old. I've completed college degree from Education University of Indonesia (UPI)-Bandung, West java, Indonesia in 2011.
Learn on this blog since 10th of November 2008. Now, just to innovate to make Netpreneur Blog Indonesia has many visitors, so my main goal in blogging can be achieved is to optimize blogs as a means of promotion, income and relationships. [ Read More ]

PageRank
SEO Stats powered by 

MyPagerank.Net
Google PageRank Checker Powered by  

MyPagerank.Net
free search engine submission
W3 Directory - the World 

Wide Web Directory
Online Marketing Blogarama - The Blog 

Directory
Site Meter
Top Marketing Sites
Uka Fahrurosid - Find me on Bloggers.com PlanetBlog - Komunitas Blog Indonesia
Fav This With Technorati Business Blogs - Blog Rankings
Blog Directory for the Philippines Business blogs
Real Time Web Analytics Clicky Blog Directory & 

Search engine
Globe of 

Blog
Kostenlose Backlinks bei http://www.backlink-clever.de Active 

Search Results
blog-

indonesia.com
what is my ip address?
Business
Business & Finance - Top Blogs Philippines

Free Directory List



Powered by 

Mysiterank






Ping your blog, website, or RSS 

feed for Free
Text Back Link Exchange.com
free search engine submission
RNUGGKZFF7CR