Rabu, 13 Juni 2012

2 Macam Kotak Search Untuk Blog


By on 21.09

Blazer Blog, CSS - Cara Membuat Kotak Search Di Blog, bagi anda yang pingin memasang kotak search atau pencarian agar pengunjung blog anda dapat dengan mudah mencari artikel, disini saya telah siapkan 2 jenis kotak search untuk blog anda, jadi pilih salah satu saja.

DEMO 2 JENIS KOTAK SEACRH :
KODE 1

KODE 2

Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode </head>
3. Letakan Kode 1 CSS atau Kode 2 CSS tepat di atas kode </head>
4. Pilih salah satu saja.

Kode 1 CSS :
<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SwN64d149xI/AAAAAAAAAM8/8HfSzziMgfs/search.png);
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(http://3.bp.blogspot.com/_4HKUHirY_2U/SwN7CyGqi2I/AAAAAAAAANM/SkrrbPdThGU/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(http://2.bp.blogspot.com/_4HKUHirY_2U/SwN68gRqCFI/AAAAAAAAANE/HYdbueuk378/sbutton.png);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}
</style>
Kode 2 CSS
<style type='text/css'>
div#search { background: transparent url("http://3.bp.blogspot.com/_4HKUHirY_2U/SwZCwFFG_yI/AAAAAAAAAQ0/ulhHnhO8ruI/search.gif") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }
</style>
Setelah dipilih salah satu kode di atas, simpan template, kembali kemenu awal, pilih ADD GADGET lalu Pilih HTML JavaScript. Pilih salah satu dari kode HTML di bawah ini.

Pilih Kode 1 HTML (jika kamu memasang Kode 1 CSS)
<div id='search'>
<form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>
Pilih Kode 2 HTML (jika kamu memasang Kode 2 CSS)
<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>
</form>
</div>
Perhatian : Jika kamu memilih Kode 1 CSS , maka kamu harus Pilih Kode 1 HTML, begitupun sebaliknya. Dan ganti kata yang berwarna merah dengan URL blog anda.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

1 komentar:

  1. Kalo cara penempatannya mirip search box punya di atas, gimana caranya.....???? thank you sob

    BalasHapus