Dalam hari ini taukahbahwa.blogspot.com akan menyajikan berita tentang 5 Widget Kotak Pencarian yang Keren. Semoga dengan artikel 5 Widget Kotak Pencarian yang Keren akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com
Berikut ini penulis share-kan beberapa script untuk widget atau sidebar atau gadget blogger yang memiliki tampilan cantik dan bisa Anda pasang pada blog Anda. Cara pemasangannya yaitu sebagai berikut:1.) Login ke akun blogger Anda Disini
2.) Masuk ke menu Layout/Tata Letak
3.) Klik Add a Gadget/Tambah Gadget
4.) Pilih yang fitur "HTML-JAVASCRIPT"
5.) Klik ikon biru +
6.) Copy salah satu kode kotak pencarian di bawah ini yang Anda suka
7.) Paste di Konten HTLM-JavaScript
8.) Biarkan Judul/Title di kosongkan saja
9.) Klik tombol Simpan/Save
Style 1 Box Orange
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrA3NFzH4LukG8YNqIQgyvxF94EMWFL5mU0G_7x7XuaTo1kAs0tQN9zobcyzdbLXv3eUao1l54-uboTb89dGeUVvZVP2SnErdYJXySHBLQlE62l_rr0K4LAg3kwrTiXDI5BIfvAcnYrw/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrA3NFzH4LukG8YNqIQgyvxF94EMWFL5mU0G_7x7XuaTo1kAs0tQN9zobcyzdbLXv3eUao1l54-uboTb89dGeUVvZVP2SnErdYJXySHBLQlE62l_rr0K4LAg3kwrTiXDI5BIfvAcnYrw/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 2 Box Hitam
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0ku6Y-h4lqBl0BtOLElydieLBNP1BXEc5ghzz2sXypfafvVc_yuWSsGIM7TUstCxUOcdac1AtEFF3PxJXXsihdQf6qhypCedt5DXXxf7ZMrIC6480wIt4CttGIY3jaXGpbiPJcIu1w/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0ku6Y-h4lqBl0BtOLElydieLBNP1BXEc5ghzz2sXypfafvVc_yuWSsGIM7TUstCxUOcdac1AtEFF3PxJXXsihdQf6qhypCedt5DXXxf7ZMrIC6480wIt4CttGIY3jaXGpbiPJcIu1w/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 3 Box Biru
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdbTEoAfTVicPcOzSL8BY_DDO7YbKDNPFLtuuap-FyBVc1H1R0Qq2xC-l4jMbA3buG7coh9w0UvNDWU0dQe7KJdEl8F0ogE8Cn7WcpkbFqPx0zH-q4cUw4y4sw8xAwIps0z2grh8BJQ/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdbTEoAfTVicPcOzSL8BY_DDO7YbKDNPFLtuuap-FyBVc1H1R0Qq2xC-l4jMbA3buG7coh9w0UvNDWU0dQe7KJdEl8F0ogE8Cn7WcpkbFqPx0zH-q4cUw4y4sw8xAwIps0z2grh8BJQ/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 4 Box Hijau
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiziYOUfMYKfT00hRtfHsFrS7W0BerU81p1XDTWDQ73K7s5xKZHaOFLChLxSRg6YLMbv5WQGH7WJHDNkmlD44n3Pvz7p1v94KQa74IjalonMGv3CufiIt2Xh-ire-ymWFAzR0AwtNnqTw/s1600/Green-Search-Engine.png)
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiziYOUfMYKfT00hRtfHsFrS7W0BerU81p1XDTWDQ73K7s5xKZHaOFLChLxSRg6YLMbv5WQGH7WJHDNkmlD44n3Pvz7p1v94KQa74IjalonMGv3CufiIt2Xh-ire-ymWFAzR0AwtNnqTw/s1600/Green-Search-Engine.png)
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 5 Box Merah
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzWHslwxsj238432UDcjvZFA6J7OlJM-NN6OTL2PX666Zlwe02ETt-HXEftcyJabZzM-5ivax-CRirso32jJuVIJK78ADO05_q3P6O6cTBNuwxcdzcEamFtOp60uTxpP2DmLCyKsk5Q/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzWHslwxsj238432UDcjvZFA6J7OlJM-NN6OTL2PX666Zlwe02ETt-HXEftcyJabZzM-5ivax-CRirso32jJuVIJK78ADO05_q3P6O6cTBNuwxcdzcEamFtOp60uTxpP2DmLCyKsk5Q/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Semoga Bermanfa'at...!!!
Jangan Lupa Untuk Membagikan Artikel Ini Ok
Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com
No comments:
Post a Comment
jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya