Cara Membuat Search Box Keren Berwarna-warni

Ngedit Template

Salam

Selamat Datang...

Search Box adalah salah satu elemen terpenting dari sebuah web atau blog. Begitupun dengan anda pengunjung blog ini pasti memiliki rasa yang sama tentang pentingnya sebuah kotak pencarian. Oleh karena itu saya akan share mengenai Cara Membuat Search Box Keren Berwarna-warni.

Langsung saja :

1. Buka akun blogger 

2. Masuk ke Element HTML/JAVASCRIPT, letakan sesuai keinginan anda.

3. Copy Paste Kode di bawah ini.

<style> #search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search TechFrost' type='text'/> <button id='search-button' type='submit'><span>Search</span></button> </form> </div>

4. Save Template

Perhatian :

Untuk kode warna anda bisa gunakan pilhan kode warna yang tersedia di gambar atas :

Line : 4 – 100%- Adalah lebar dari search bar, bisa anda sesuaikan: 200px

Line:45 – #4d90fe – Ganti warna ini dengan warna pilihan anda

Line:55 – Search TechFrost - Ganti kata ini dengan kata pilihan anda

Line:56 – Search - Ganti button ini menjadi “GO’ atau “Submit” atau lainnya dengan terkait pencarian.

Semoga bermanfaat yaa. HAPPY BLOGGING

Bagikan

Google Facebook Twitter More

• Pinterest
• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Jangan lewatkan

• Cara Jitu Dan Mudah Membuat Widget Like Box Keren Terbaru Salam, Selamat Datang. Di artikel Cara Jitu Dan Mudah Membuat Widget Like Box Keren Terbaru Manfaat widget Lik
• Cara Membuat Widget Button Sosial Media Keren Salam Selamat datang di : Cara Membuat Widget Button Sosial Media Keren  Widget sosial media meman
• Cara Membuat Side Bar Multi Tab KerenHalo Salam... Kali ini saya akan mengulas tentang Cara Membuat Side Bar Multi Tab Keren. Pada kesempatan kali
• Cara Membuat Multi Tab Keren Pada Side Bar Salam Selamat datang. Kali ini saya akan mengulas tentang Cara Membuat Multi Tab Keren Pada Side Bar  ya
• Cara Jitu Membuat Read More/Jump Break Otomatis Teruji!Halo.. Selamat Datang Kali ini saya akan mengulas artikel yang sangat menarik, yaitu Cara Jitu Membuat Read More Oto
• Cara Mudah Membuat Multi Tab Di Side BarHalo Salam Selamat datang di artikel Cara Mudah Membuat Multi Tab Di Side BarKalian semua tahu kan multi tab? itu

Cara Membuat Search Box Keren Berwarna-warni

4/ 5

Oleh Home Sharing

Home Sharing 07.39 Komentar