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 :

Tips dan Trik Blog

• Cara Mengubah Cursor Blog Dengan Gambar
• Cara Membuat Menu Horizontal Pada Blog
• Cara Membuat Kotak Pencarian Keren Di Blog
• Cara Mendapatkan Domain Dot COM Gratis
• Cara Membuat Teks Area Pada Postingan Blog
• Cara Mendaftar di AdsenseCamp dan Memasang Iklannya
• Cara Membuat Menu Dropdown Pada Blog
• Faktor - Faktor Yang Mempengaruhi Pagerank Pada Blog
• Cara Membuat Pesan Selamat Datang pada Blog
• Cara Meningkatkan Pengunjung Blog Dengan Cepat
• Kode Warna HTML
• Cara Mendapatkan 120 Backlink Gratis
• Link Exchange
• Cara Membuat Header Blog Dengan Karya Sendiri
• Cara Membuat Link Pada Komentar Blog
• Cara Membuat Efek Bintang Jatuh Pada Cursor Blog
• Cara Membuat Widget Daftar Isi Blog Otomatis
• Cara Membuat Scroll Pada Widget
• Cara Memasang Jam di Blog
• Cara Membuat Tulisan Berkedip
• Cara Membuat Efek Pelangi Pada Link