Pages

Rabu, 07 Desember 2011

Membuat Search Engine Sendiri Dengan CSS3

01.51 | Diposting oleh DIMAS GENESIS | | Edit Entri
Contohnya bisa dilihat di atas, bukan sembarang kotak pencarian, search engine ini bergaya CSS3. Kelebihannya jika mesin pencari tersebut disorot dengan mouse, efek bayangan berwarna akan muncul. Seperti yang terlihat di atas, yang muncul adalah bayangan warna merah. Warna tiap elemen bisa kita rubah sesuai keinginan kita. Mulai dari teks, bakcground search engine dan background teks. Jika tertarik, berikut lagkah - langkahnya.
  • Login ke blogger anda.
  • Klik Rancangan >> Elemen Halaman kemudian Tambah Gadget
  • Pilih yang add HTML/Javascript.
  • Masukkan kode dibawah ini ke dalam kolom yang muncul.

<div id="search"><form action="/search" id="searchform" method="get" style="display: inline;"><input id="s" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari apa bro..&quot;;}" onfocus="if (this.value == &quot;Cari apa bro..&quot;) {this.value = &quot;&quot;}" type="text" value="Cari apa bro.." /> <input class="button" id="searchsubmit" name="Click" type="submit" value="Click" /></form></div> 

Tulisan warna merah bisa diganti sesuai keinginan, tapi ingat, keduanya harus sama.
Tulisan warna biru juga bisa diganti, itu adalah tombol klik untuk search engine.

Kalo sudah, klik Simpan.
Belum selesai lho, CSS3-nya belum dimasukin. Langkah berikutnya adalah:

  • Masih di menu design. Klik Rancangan >> Edit HTML.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin>
  • Paste kode berikut ini di atas kode ]]></b:skin>

#search{background : #EEE;margin : 0 0 10px 0;padding :11px 10px;width :230px;-moz-box-shadow : 4px 4px 4px rgba(0,0,0,0.3);-webkit-box-shadow :4px 4px 4px rgba(0,0,0,0.3);-moz-border-radius:10px;-webkit-border-radius:10px;font-size: 14px;line-height: 15px;}#searchform #s{width:162px;text-shadow:2px 2px 6pxyellow;color:green;font-size:17px;}#searchsubmit{cursor:pointer;}.button{border:1px solid #aaa;-moz-border-radius:4px;-webkit-border-radius:4px;padding:2px 4px;}
#search:hover{-moz-box-shadow : 4px 4px 14px blue;-webkit-box-shadow :4px 4px 14px blue;}

#EEE       Warna dasar dari Search Engine
yellow     Warna bayangan/shadow dari teks yang ada di kolom search engine
green      Warna teks yang ada di kolom Search Engine
blue        Warna bayangan dari Search Engine
Empat elemen warna di atas bisa dirubah sesuai keinginan kita. Misal gray, purple, pink, dll. Atau ingin warna yang lebih detail, bisa anda lihat kode - kode warna HTML di sini.

Masih belum selesai. Setelah di paste di atas kode ]]></b:skin>.
Berikutnya cari kode <b:include name='quickedit'/>.
Hapus kode tersebut, kemudian klik simpan template.

Nahh.. Lihat hasilnya..
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

News Post

Google Translator

Radar

Mengenai Saya

Foto saya
hanya seorang Manusia biasa...

Followers

Diberdayakan oleh Blogger.

Labels

Ads 468x60px

Popular Posts

Categories

Blog Archive

Featured Posts Coolbthemes