Membuat Elegant Search Box Menggunakan CSS

Membuat Elegant Search Box Menggunakan CSS - Pada kesempatan kali ini saya akan share tentang cara memasang elegant search box menggunakan CSS, seperti yang kita ketahui bahwa search box ini sangatlah penting dan wajib ada pada web/blog kita karena keberadaannya amat sangat di butuhkan sekali pada proses pencarian dalam web/blog kita tersebut.

Dan kali ini akan saya share cara membuatnya, tampilannya sangat unik, keren, dan elegant... Scriptnya pun tidak begitu rumit, simple dan mudah di pahami. Oke, langsung saja bagi anda yang berminat memasang elegant search box menggunakan CSS ini slilahkan ikuti langkah-langkah berikut :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu pilih salah satu dari script kode elegant seacrh box di bawah ini dan letakkan di dalam widget HMTL/JavaScript yang sudah kita buat seperti pada langkah ke-4.

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlyUAd2WdWn3eZ36q-mb5LNJA04yrgL7o5hNeDCtrfb1XGk2C0i5w7Kgw1AMm1MpKS9JhyphenhyphenRra79vVjl0GpchGB8dw6-JMBg0v6ktvcY2SddR9Zo7qbge956wNRQzruOixRIsWujeuQ4mm/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3DkletYrT9CUkNrOSUHtXbmomtHu2D0g_5IgCZ2iyDV6N1K4hBEFklt0EuG_IiQ4Sm_Lrl5uA2YwHjkVZQVb5eeoCJzDix8do93knqcTkJAvDnDOO4YyMl3k0cKeAoBV8nGwWL2krpk6/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhOEad2vC_rdG_GJm-hj7FmgRYwMqgULtoHqki7ZguuqeMlLYeOQ2TB4RueMheGe3kfvBeFPV-ZTbIW1FZnU1PfE93xUAOkba5J-V5CNxpqTXk5aBg1TUMF5MnXv7aDe8dmufHNa-sKQt/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2FkohQul-PUv0WPJDzn-1CW-0L_FZqd5qZB8_PU_MlgBKyzDXP53-KJzJOr-vVA_j5eZqdl1gYUhrCYJ2MBf2OWQsRBWUJu8ruvzYzPrzzTTZUnjKgZag8ph9POFFWS-cmscWzst8qB7k/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-MgT_BDfHEVlEkZhWgUhStSf0Bxfar-dFxrJsIub4EVKuAA3FvnvvNahjaPN9lucWZjP6ZV-qlijE34JobafZgAKJE5sow5wP0pYD4GUCPMZucCdfwMMDtjhfOrGydoPjR-u0fdBz_L-/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxOQL8bwSk-3SAofnaIoWrIAzUJbbSEA-ZpDPizcw-zQ3wkv2AJ3agSLMwf49jBqetLWHpwqxOiTBzj8x7DLnXBE24Kp4WU4B2ZiMImbubzC31wmsYJs3PBTklD37oI5F0x1bVe6fRUvJ/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

6. Kemudian klik save/simpan, dan lihat hasilnya...

Cukup sekian postingan tentang cara memasang elegant search box menggunakan CSS ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan dan kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...