Cara Membuat Kotak Pencarian Keren Di Blog

 

Untuk memudahkan para pengunjung blog, kita dapat memasang kotak pencarian di blog supaya pengunjung dapat dengan cepat menemukan artikel yang dicarinya. Biasanya kotak pencarian dengan kode dasar kurang menarik jika dilihat, untuk itu kita perlu menghias kotak pencarian supaya terlihat lebih menarik.

Cara membuat kotak pencarian keren :

a. Login ke blog anda

b. Klik Rancangan, pilih Elemen Laman

c. Klik Tambah Gadget

d. Pilih HTML/JavaScript

e. Copy dan pastekan kode di bawah ini :

    Silakan pilih jenis kotak pencarian yang anda inginkan

    Jenis Pertama :

 

     Kode :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5ZTKhKc8jQdoen0XbGQUONogRVfXOzW9hyphenhyphenmHUflRHRn99UTdwBV9TqLOkoRTIK0hsRKheAe2Nm_fIQmB3tq4Q5kysDWwE0q_y6Z3SobgkLjLCTEL-BNsXUR0RJLRt8-Fz1Yu0seEzKE4/) 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>

    Jenis Kedua :

     Kode :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYtyoqjFoLnRW6YXxXX7X0tcNZJ-7ZkCOSgLvibPLqESABGkg_D36cEb16bl5elgAT89RFCNdvJ7JniOeRtdCq3nizGbKtU4CwzxA_gYowkjyTZSb7_RUy7k1vBKgr6Nn363SnAxjLzYk/) 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>

    Jenis Ketiga :

     Kode :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUe4xYs2JVLscGJFpiU89U5pFQ1wTRKGLB0cMJhbX28jowR-fL_ir2qtd8vP_mL1JCfMdzjPteN_NMFDmPM-P75qtAQhcit5r68ozjOiL0vMKkx6DnfeqbDssZdZwR6jxpaKVlqUuiNAW/) 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>

    Jenis Keempat :

     Kode :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzZdHus-Cg7G3kFUNqC0fV_tcvEa483BTEf3xKv0XHJRNJqtHlZwHslbOZ-ipPVoKTIAcCRTo1U9hwn2isd6cO4oheH3Mqhd-HA-Vt-9cwQM4BplXs8mqVtVof19GH5E3KrPdpoe4gWzT/) 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>

    Jenis Kelima :

     Kode :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBrvTJLBY9bIqPLMfJIKMj3Jn3ROF5Xw8jfUXlVg_FOz0aOu61OUhAmpmH3Ibqeq9J7uADlni-uuR4P14InRIkbijhmaJK0uQZ5Uj1aN4nd6GjUIUvkzrEYh-zt2tL5PTM0OOcf7ZeuM9/) 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>

f. Klik Simpan

g. Selesai

h. Lihat blog untuk melihat hasilnya

Artikel Menarik :