Membuat Search Engine di Blog

Membuat kotak pencarian / search engine dalam blog memang sangat penting karena dengan ini para pengunjung blog (traffic) akan mudah untuk mencari apa yang diperlukannya cukup dengan mengetikkan kata kunci.

Dibawah ini adalah beberapa contohnya.


1. Kotak Search Engine Simpel
<form action="http://dhecun.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
Catatan : ganti tulisan yang berwarna merah dengan URL blog anda.

2. Kotak Search Engine Keren
Kotak Search 1 :
Kotak Search 1
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPq4kQ1mJT_Y3OFcnPQaNsDYJs83ntV9iBSTotxdtJwx9PSmDtWZQjvTrXAE9S0Uv3bclvGeRyU1hke93p9kMUWrnrS5PeYCzKegA-rq6dYb0JRqRFHh10pIAg56je7R3LlwTdXnFPjGi8/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" 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="abutton" /> </form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Kotak Search 2 :
Kotak Search 2
<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin6u8c_dXQuD8rbo5PGDvdl_RVpTrrAvdD8cNM4hTvdIQK5G4JxMG3cBI7t7oehWQjb9ZfB1UrwHaR2KEIQe3rzCR5JcfaFklwhyyTp0mngHsrIqluvJ-a_6s0D-WcEhA3fasTK1hf7rK2/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get">    <input type="text" id="b" 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="bbutton" /></form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Kotak Search 3 :
Kotak Search 3
<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3YJZB5w_UK61mpO1xMqZ1W2HxwASMeGF22Uzw9lzbKB8ZlVki18tfCfXZh5-UO68Kef0zMeFySbJdGll-EhQC1xPEo4Lrmv12N_ol7jDzWCdrKUs74R6aBroWKxuw4moF_e7B7mLOvmei/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get">    <input type="text" id="c" 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="cbutton" /></form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Kotak Search 4 :
Kotak Search 4
<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9lvCBAmuqdmVaVr1QB159L-V5GrQq4toXWqmgg-e2Empye0XVLHA0RtuQ4k8nckglQIISkt16za93VYcU66lv5w-Mpe2c2iT0fYVp9aRJW1yTDrGn8Rf9im_Z6cJMAvhxTNwThvIFlBZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Kotak Search 5 :
Kotak Search 5
<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVk0oUMjNgm5Ej4ILANBN82jlu0cwcD3uVNxN8lUwnOQJTFgsU0YwhH_m-26Gc2f-xCKa9oteyiJBTwlSG07Dcft1g-K45VVgCcwe5GTRmZ5YZXl4yWES3wgLv6MPCB7fBWohPX4yWE0kJ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get">    <input type="text" id="e" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Kotak Search 6 :
Kotak Search 6
<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQZdH4_fZ6242Eyu8iDpDHaSk0D-gOLk9tSfTf6F0-kzWMNDNtyiZ6gaJTH3tVyKrWh-Ez7BeCCVD5J8hsMStQ_FW3akWZQr-0GE1b6mT-enUw40vWIxsuLmp_H89_XXvmuKuDWCOVQZP/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get">    <input type="text" id="f" name="q" value=""/>  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-search-engine-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Cara pemasangannya :
1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Copy kode diatas yang sesuai dengan keinginan anda
4. Klik simpan

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers