Rabu, 07 Desember 2011
Membuat Search Engine Sendiri Dengan CSS3
01.51 | 
Diposting oleh
DIMAS GENESIS |
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 == "") {this.value = "Cari apa bro..";}" onfocus="if (this.value == "Cari apa bro..") {this.value = ""}" 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:
Tutorial
Langganan:
Posting Komentar (Atom)
Mengenai Saya
Popular Posts
-
Robot Departemen Peradilan di Korea Selatan tengah mengembangkan proyek pembuatan robot yang akan digunakan untuk menjaga keamanan penjara ...
-
Semoga wawasan ini bermanfaat bagi kita semua. Alat sadap yang di miliki oleh KPK (Komisi Pemberantasan Korupsi) saat ini di klaim merupakan... -
20 huruf Aksara Jawa tidak lahir begitu saja. Aksara yang berjumlah 20 huruf ini lahir dari kisah Ajisaka. Seorang tokoh yang berhasil me... -
0 Ketika kita sedang menonton video di web terkenal seperti youtube, kita biasanya akan menunggu proses buffering dari video tersebut. Jika ... -
Sebuah kata yang sering kita ucap atau kita dengar, dengan konotasi yang sedikit negatif. Tapi tahukah anda awal mula dari kata tersebut? ... -
Membuat USB booting sudah biasa saat ini, namun untuk membuat 1 FD bisa untuk booting banyak OS (ISO) memang masih jarang. Kita bisa menggu...
-
IKHSANHAFIYUDIN.BLOGSPOT.COm | Di abad 21 ini, perkiraan rata-rata manusia hidup paling lama adalah di kisaran usia 30 tahun. Sangat berbe...
-
Ahool Ahool adalah kelelawar yang berukuran raksasa. Rentang sayapnya berukuran lebih dari 7 kaki. Hewan ini pernah dilihat di sekitar Jaw... -
Kenapa kita mesti keluar? Banyak memang alasan yang membuat kita ingin keluar dari suatu group di Facebook. Salah satunya alasan mungkin ...
-
Banyak cowok yang sering minder ketika mendekati seorang cewek cantik dan seksi. Kebanyakan cowok gak punya rasa percaya diri jika mau ...
0 komentar:
Posting Komentar