Costum Pencarian Google Dengan CSS

Kuchiyose .. *Pusss 

Sudah Berapa Minggu Nishimura-S Tidak Update Posting ? Ayoo Ada Yang Tau ?? Gw banyak menghadapi tryout dll sob....
ini waktu sempet sempetin aja besok tryout lgi ._.

Oke Seiring nya aku mau Ujian Try Out Besok .. Gw akan Sempetin Share Artikel Nih :v Hhaahah, Terakhir Gw Post Template kan ? Udah Di pake Belum ? XD Klo Blom Klik ini untuk memakai nya #gw juga gk maksa lu mau pakai apa gk ?? :P

Nahh ..! Sekarang gw akan share Sedikit Trick Nih .. :D , Walaupun Ini Trik Nya udh banyak yang tau di google/ Di Blog² org lain tpi gw share lg krna biar gk mendem nih trik ... XD

Pasti Penasaran Kan Gimana Costom Pencarian Google Untuk Di pasa Di blog ..

Nih ScreenShot nya .. 

                                   

Click For See Full Image

Nah Gimana ? Pasti nya Kamu InginKan Seperti Ini ? :v

Ini Sedikit Sama Dengan Pencarian Google Yang Asli

Oke Lansung Masuk Saja Ke Trik Nya

Pertama² kamu Harus Membuat Nya Dulu Di google

• Klik Di sini Untuk Membuat nya 
• Di Sebelah Kiri Atas Klik Tulisan "Mesin Telusur Baru"
• Seperti Gambar Di Bawah Ini

• Sudah Kamu Klik Lalu Akan Masuk Ke Halam Baru
• Isi Formulir Nya Seperti Gambar Di Bawah Ini 

• Langkah Selanjutnya Klik Tulisan "Buat"
• Dan akan di alihkan ke halaman baru , nah di halaman ini kamu akan mendapatkan Script Mesin Telusur Kamu

• Copy Semua Script Itu Dan Buatlah Laman Baru Di blog kamu
• Cara Membuat Laman Nya 

• Klik Tulisan Laman Kosong
• Lalu Pastekan Script Ny di Kotak Besar #Jangan Lupa Klik HTML di bagian kiri Atas Sperti yang ku beri panah ini Dan Save Dengan judul "search"

• Lalu Klik Publikasi kan ..
• Nah Di Sini Kamu Sudah Selesai Membuat Lama Pencarian kamu Untuk Di redirect nnti di kotak pencarian kamu 
• Nah Kita Modifikasi Sedikit Seperti Punya Ku Itu XD #Apa Kalian Tau Apa yang ku maksud ? :v Klo Tidak Ketik Aja Di kotak pencarian ku dan enter nnti akan di redirect ke lama pencarian ku nah itu yg ku maksudkan ..

• Okey Di sini Kita akan Memakai Css Search nya Bang Johanes XD
• Copt CSS ini dan pastekan Di Atas kode ]]></b:skin>

/* Kotak Pencarian */
#search input[type="text"]:hover{width:350px;box-shadow:0 00 7px black}#search input[type="text"]{background:#0800a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqn1WEfwuYuPCJqJdss3JTR5TYyKLzfjhTgXjX5jO22pcUUKkMIvJuyrIVKzt2zGaShLCREhWGhDdF0SxpDAOZNNX88jPs1kArAvp5WCkLwLso4WqRwcEMHcCwuldNheDm-ykSywGHmgw/s1600/SEARCH_32x32-32.png")no-repeat center left;border-radius:10px;font-size:14px;color:#fff;width:285px;padding:10px 0px 11px 35px;z-index:200;border:1px solid #0800a2;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;margin-bottom:-1px;position:absolute;top:305px;right:7px}

• Kamu Edit  Sendiri CSS nya :P
• Next ... Copy HTML ini 

<form action='/p/search.html' id='search' method='get'>
<input name='cx' type='hidden' value='015736715204910340629:ct_zk0ikzvg'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input name='q' placeholder='Search Somethings..' size='40' type='text'/>
</form>

Note : 
Tulisan Yang Ku beri Warna Kuning itu Adalah url untuk redirect halaman Pencarian Kamu ..
Dan yang Warna Merah kamu ganti dengan ID Kostum pencarian kamu .. #Bila Tidak Tahu Cara nya Liat Gmbr di atas yg ku beri "ID TELUSUR KAMU" itu dia ID nya

Nah Langkah Terakhir nya Save Dan coba kamu ketikkan sendiri apakah berhasil atau tidak ??
Bilang Masih bingung Tolong Berkomentar ya .. Kalo nanya ama gw di chat fb males gw bales XD

Sekian Dari Postingan Ku :D Happy Reading :v

 

sumber