Membuat Search Box ala Apple.com di Blog

Search Box Apple.com Style

Pada tutorial kali ini, kita akan membuat Search box yang terinspirasi dari apple.com dengan munggunakan CSS3. Search box ini akan membentang secara otomatis ketika kita mengklik kolomnya untuk melakukan pencarian.

Buatlah search box dengan menggunakan kode html.
Login ke blog kamu, pilih menu Layout > Add a Gadget > pilih HTML/JavaScript. Isi kolom Title dengan Search (atau boleh saja dikosongkan). Lalu isi kolom Content dengan kode berikut ini.

Kemudian klik Save, maka search box akan terlihat seperti berikut ini
Untuk membuatnya terlihat seperti search box pada apple.com, sekarang kita akan menambahkan CSSnya. Berikut ada 3 pilihan untuk tampilan search box ini:

1. Dark

Search Box Dark Style
Kode CSS untuk tampilan dark ini adalah sebagai berikut:

2. Light

Search Box Light Style
Kode CSS untuk tampilan Light ini adalah sebagai berikut:


3. Dark Light

Search Box Dark Light Style
Kode CSS untuk tampilan Dark Light ini adalah sebagai berikut:

Pilih salah satu tampilan dari ketiga search box tersebut, kemudian copy kode CSS-nya kedalam template blog kamu dengan cara, 

  • Pilih menu Template > klik Edit HTML
  • Temukan kode ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian)
  • Kemudian paste kode CSS yang kamu pilih tepat di atas kode ]]></b:skin>
  • Klik Save Template.
Selesai. Mudah kan? :)

Demo

See the Pen Search Box inspired by apple by M. Mulia Maulana (@molenmaulana) on CodePen.
Demikian cara membuat Search box apple.com pada blog. Berikan saran dan pendapatmu tentang tutorial ini di kolom komentar ya, selamat mencoba! :)

Don't be a Silent Reader!
Please leave your comments, critiques or suggestions.
Because your opinion means a lot for this blog :)

EmoticonEmoticon