Mengulas Misteri dan Blogging

Membuat Widget Search Box Mirip Seperti Google

Logo Google

Membuat Widget Search Box Mirip Seperti Google - Tidak asing lagi mungkin bagi Anda dengan yang namanya widget search box. Dan banyak sekali style dalam widget search box yang sudah dishare oleh sahabat-sahabat Blogger. Tapi, yang unik adalah widget kotak pencarian yang mirip sepeti kotak pencarian Google. Tampilan yang simple dan ringan dari Google ini membuat banyak Blogger kepincut dan ingin menerapkan di blognya.

Untuk membuatnya mirip seperti Google, kita hanya perlu sedikit modifikasi CSS-nya agar tampilannya persis.

Baca juga : Memasang Widget Search Box di Blog


Jika anda ingin menerapkan di blog anda, silahkan ikuti langkah berikut.

Simpan kode CSS berikut di atas ]]></b:skin> atau </style>

#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Lalu, simpan HTML di bawah ini di mana anda ingin menampilkannya. 

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQV7kGXGwXJvxc7cX6D63vcYVl28T2DktFXzhD4qZrg_BOyWIO9kz28WRHIDJrW0N5jrqy5W9345khdSsz2z0o5v7YDYGGnaZZTz_0hNtnR5IQ5Ldj0qNDQsq4v-2JNL48jw9pnAX5H5Bg/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Selesai. Semoga bermanfaat.

Resource : http://www.kompiajaib.com/2013/10/membuat-search-box-blog-seperti-search.html
Tag : Blogging

Artikel Terkait:

9 Komentar untuk "Membuat Widget Search Box Mirip Seperti Google"

thebest search,dengan search semacam ini pengunjung pasti akan lebih mudah mencari artikel yang di inginkan

Betul gan. Dengan adanya search box, orang akan mudah jika ingin mencari artikel yang mereka butuhkan di blog kita :D

+++
Merasa kurang hoki bermain judi di situs lain ? atau Ingin mendapatkan income tanpa bekerja ?
KAMI HADIR UNTUK ANDA , MARI BERGABUNG BERSAMA KAMI DI RUBYQQ
PRESENTASI KEMENANGAN 80% ( MENANG ATAU KALAH TETAP DAPAT BONUS )
100 % PLAYER vs PLAYER !!
Hanya dengan 1 USER ID anda bisa main 7 GAMES :
* Bandar Poker | Poker Online | Capsa Susun | DominoQQ | BandarQ | AduQ | SAKONG ONLINE |
* Pendaftaran FREE ==> https://goo.gl/AQYhSc
* Minimal Deposit & Withdraw HANYA Rp.15.000,-
* Bonus Turn Over 0,5% SETIAP HARI DIBAGIKAN
* Bonus Referral 20% Seumur Hidup
* MEGA JACKPOT RATUSAN JUTA RUPIAH
* Customer Service siap melayani anda 24 jam

Untuk informasi lebih lengkap silahkan Hubungi Customer Service kami
BBM : 2B8938F7
FACEBOOK : rubyqq
SKYPE : RUBY QQ
LIVECHAT https://goo.gl/AQYhSc

Selamat malam bossku semua...
Kamu Sering Kalah Main Judi?
Sudah Tidak Jaman Lagi Kalah Main Judi
Kami Hadir Dengan Inovasi Terbaru & Tercangih, Dengan Jackpot Yang Super Pasti & Gampang Untuk Menang Terus Di Setiap Hari .
Transaksi Cepat, Aman & Terpercaya.
Tersedia 7 Games Dalam 1 User ID :
New Game ------>> GAME SAKONG
Poker, Domino, BandarQ, Capsa, Sakong
Minimal Deposit Rp.15.000,-
Minimal Withdraw Rp.15.000,-

Komentar ini telah dihapus oleh pengarang. - Hapus

Ayo segera bergabung dengan Agen Judi Poker Online Terbaik dan Terpercaya di Indonesia KacangMasPoker | www.kacangmaspoker.xyz | . Dapatkan Jackpot hingga Jutaan rupiah setiap harinya !!

• Bonus New Member & Next Deposit s/d Rp. 1.000.000,-
• Bonus Jackpot s/d Rp. 200.000,-
• Bonus TurnOver 0,5%
• Bonus Referral 20%

# LINE : pokerkcm
# BBM : pokerkcm
# WHATSAPP : +6287819742741
# Twitter : kcm__poker
# IG : kcm_p0ker

• 7 Games dalam 1 ID
| Texas Poker | Capsa Susun | Ceme | Domino QQ | Bandar Ceme | Super 10 | Omaha |

• BCA - BNI - BRI - CIMB - Danamon - Mandiri.
• Menerima Deposit via Go-Pay, Ovo & Pulsa Telkomsel / XL

OPPO POKER BONUS NEW MEMBER 20.000!!!
AYO JOIN SEKARANG DAN LIVECHAT DENGAN CS TERBAIK DAN TER-RAMAH NYA OPPO POKER! ^_^

Numpang ya min ^_^

Bonus New Member 50%!!! Bukan server IDN maupun PokerV! Cobalah bermain di server baru 1G Poker hanya di kenaripoker . com! Proses deposit dan withdraw tidak basa basi langsung tinggal proses dan main saja bosku, dicoba keberuntungan kamu sekarang juga hanya di kenaripoker . com!

WHATSAPP : +855966139323
BBM : KENARI00
LIVE CHAT : KENARIPOKER . COM
ALTERNATIVE LINK : KENARIPOKER . COM

PROAKUN.WIN | AGEN BANDARQ | QQ ONLINE | DOMINOQQ | BANDARQ ONLINE | JUDI ONLINE TERBAIK DI INDONESIA, adalah Website Rekomendasi Situs Situs Terbaik dan Ternama dengan Hasil Winrate Teringgi Terbaik Di Indonesia.

Agen BandarQ
QQ Online
DominoQQ
BandarQ Online
Judi Online

Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.

Emoticon : :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak: