Diberdayakan oleh Blogger.

What's Awesome

About Me

JS

2 Macam Kotak Search Untuk Blog

D-EFR

on Selasa, 19 Maret 2013 | 20.45.00


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiauWdHVt2TzTof48XXzDbd8c0pakAt-HmwwTieb41HVQl9amlsTfjWWGUkNOnjujQHOjhSsERNosZc6ENV0lO0YkxZXyEPBHnfYiNc7COYLx-9lLmYmgu6Bk6GCUMI-CqiqwCi_VzcXcj3/);
}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnsj3dc63yiEPPqO-mPqZS69eY6jTO7HqNVJBF8QzpkLonPkNAD7_PV_JtwxUMURP7tThDHvGpXEDhIO_6oqKDy8nVeNjGLkUhbLvtwvPU9bEjtHRO5JAA6nXiZnloCvRpwmGJBzjaX7X/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40WduWb5ZTFToNZVrYSDPkBwwAfW-uSBVzhMi5CYUGa2Bz3ie7UL8KKkDRlU3-1DiI6gSHeH4zdap350w1_HaxUSRUn8RTKJ7YhJXeNOkGRGoSr6ETM8uxBhrnXI7sluW2nekrH0c_IFg/);
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXWJyepBi3LRuj5qSJ494nkcdlrSeBhIASAOfNCItQKWLXdwwTQmXr62P2Zt7dO1-_JZJ5oyvcFQL4nxEejKN34SSOL253H75A-_BYFCRxvxIbioXJcNea6vTBMebnIC9md4CS5N4P1i8/") 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 PilihHTML 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.

/[ 0 komentar Untuk Artikel 2 Macam Kotak Search Untuk Blog]\

Posting Komentar