Membuat Berbagai Macam Widget Search untuk blog
Masuk ke tujuan utama kita yaitu membuat berbagai macam bentuk atau style search box untuk blog. Nah untuk membuat widget pencari di blog sekarang gak usah susah susah.. ni caranya
1. Widget search dengan javascript
2. Widget search box simple
<form id=”searchform” action=”/search” method=”get”>
<p>
<input id=”q” onfocus=”if (this.value == ‘Cari Artikel …’) {this.value = ”;}” value=”Cari Artikel …” name=”q” onblur=”if (this.value == ”) {this.value = ‘Cari Artikel …’;}” size=”20″ type=”text”>
<input style=”padding-top: 3px;” src=”http://img84.imageshack.us/img84/2457/viewmagsc7.png” name=”image” height=”19″ type=”image” width=”20″>
</p>
</form>
</div>
<div class=”style1″ align=”center”>
<form id=”searchform” action=”/search” method=”get”>
<p>
<input id=”q” onfocus=”if (this.value == ‘Cari Artikel …’) {this.value = ”;}” value=”Cari Artikel …” name=”q” onblur=”if (this.value == ”) {this.value = ‘Cari Artikel …’;}” size=”20″ type=”text”>
<input style=”padding-top: 3px;” src=”http://img84.imageshack.us/img84/2457/viewmagsc7.png” name=”image” height=”19″ type=”image” width=”20″>
</p>
</form>
</div>
3. Widget classic search
/* cari1
———————————————– */
.cari1 {
margin:0pt;
padding:0pt;
}
.cari1 span {
margin:0pt;
padding:0pt;
}
#search{
display: none;
}
#sidebar form {
margin:0;
padding:5px 0;
clear:both;
}
.searchtitle {
font:bold 15px “Trebuchet MS”, sans-serif, “Lucida Sans”, Tahoma!important;
color:#fff;
}
#searchform {
margin: 5px auto ;
padding: 0;
}
#searchform #s {
height:15px;
width:130px;
margin-left:10px;
font:10px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}
#searchsubmit {
padding:0;
background:#000;
color:#fff;
border:none;
width:48px;
height:20px;
font:11px “Trebuchet MS”, “Lucida Sans Unicode”, Verdana;
}
#searchsubmit:hover {
background:#fff;
color:#000;
}
</style>
<div class=”cari1″>
<span>
<form id=”searchform” action=”/search” method=”get”>
<table border=”0″ cellpadding=”0″ cellspacing=”3″>
<tbody>
<tr>
<td><input id=”s” value=”" name=”q” type=”text”></td>
<td><input id=”searchsubmit” value=”Search” type=”submit”></td>
</tr>
</tbody>
</table>
</form>
</span>
</div>
4. Widget cool search
/* —– cari ebenk789 —– */
.txt_cari{
background-image:url(http://www.iconlet.com/icons/crystal09/16×16/search.png);
background-position:2px 2px;
background-repeat:no-repeat;
padding-left:20px;
border:1px solid #999999;
padding-right:2px;
padding-bottom:2px;
padding-top:2px;
color:#006699;
background-color:#FFFFFF;
}
</style>
<div align=”center”>
<form id=”searchthis” action=”/search” style=”display: inline;” method=”get”><input id=”search-box” class=”txt_cari” name=”q” type=”text”><input id=”search-btn” value=”Cari” type=”submit”></form>
</div>
Udah ah.. kebanyakan pusing… Coba aja ya..
Klo masih gak bisa.. tanyain aja ya..
Mungkin anda Suka
Filed Under: Widget
waduh,… macam2 style ada ya…
heh… bagus design kamu ni
Wah, bisa pilih2 nich Bro.. Trims atas tipsnya
oi bro jd klu mau ganti gambarnya tinggal ganti background-image:url(http://www.iconlet.com/icons/crystal09/16×16/search.png)?
========= ebenk789 ============
@ Ir. hydir: Thanks mas..
@ Imtihan: Sama-sama.. Silahkan Pilih Aja..
@ sekedar iseng: Yap.. Ganti aja alamat gambarnya tapi ukurannya yang kecil aja..
======== berbagi itu indah =========
wah mantep juga ya mas… dah bisa bikin widget gituan… sayang blog saya udh ada see kalo blm mau pasang juga…
mas yang membuat berat blog bisa juga animasi daun/ bunga yang warna putih yang berjatuhan itu lho
manteb neh….
======== ebenk789 =========
@torik : mkaSih.. Klo buat efek salju itu kayaknya agaK susuaH buat di ilangin coz efek itu udah jadi ciri Khas dari blog ini.. Dan gak terlalu berat koK ^_^
@Brigadista : Sip..!!!
===== berbagi itu indah ======
@torik
stuju gan..
ya’nya yg bikin berat saljunya
yups,,,
thanks dech atas artikelnya yaw…..
tapi aq masi bingung ,gmana caranya agar kotak kmntarx selalu ada dibawah postingan seperti pada blog mas ini…..: )
trz cara pasangnya biar dibawah header c gimana?
masih baru belajar nich, blog kmu bagus simple, rapi n enk dibaca..
mampir malem,,maap nie baru blogging lagi,,
senang brjumpa kawan,,
contoh widget kayak lintasberita gimana ya ? .. bisa g ?
makasih tipsnya brow langsung saya coba