Menambah Search Box - Hallo sahabat Bloger Seputar Software Gratis, Pada sharing seputar download gratisan kali ini Menambah Search Box, saya telah menyediakan beberapa link download gratis software ataupun tips . mudah-mudahan informasi ini yang saya tulis ini dapat anda pahami. okelah, ini dia linknnya.

download gratisnnya: Menambah Search Box

Menambah Search Box

Salam blogger, selamat menunaikan ibadah puasa bagi yang menjalankannya. Kali ini saya sedikit berbagi pengalaman mengenai tutorial blog, dimana pembahasan kali ini adalah search box. Search box pada blog cukup baik perannya dimana widget ini berguna untuk memudahkan pengunjung blog kita untuk mencari artikel yang ada di blog kita. Ada banyak macam variasi search box dan dimana anda bisa memilih yang menurut anda cocok dengan tema blog masing-masing.



Nah, kali ini sedikit bereksperimen dengan widget yang satu ini (Serach Box), lihat contohnya:

Contoh 1 :

Code HTML :

<style>

form#zs_search {

width: 232px;

height: 31px;

margin: 0px 0 0px 0;

background-color: rgb(37, 187, 175);

border-radius: 5px;

}

form#zs_search input {

width: 150px;

height: 23px;

float: left;

margin: 3px 10px 0 4px;

border: 6px #000;

border-radius: 3px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwtSNO1YnOFE520NYhtSres3B4J1dvoFYvpAP4ffpg85jppv4SdFJeKXmYbeH4qyyUDa4GQX68oPEoDFeSDwLP0iWZnk_Ja62mZOfLd1xz0Kljibr58Xq6-ZboAcQ6G9fKGOGjQtnow9s/s0/sbutton.png) no-repeat 0px center;

background-color: transparent;

font-family: impact;

padding-left: 47px;

outline: none;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

}

form#zs_search input:focus {

width:175px;

background-color:#fff;

}

form#zs_search input:focus ~ a {width:100px;}

form#zs_search a:hover{background:#333;

background:#000;

border-radius:8px 8px 0 0;

-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);

text-decoration:none;

}

</style>

<form action="http://itzeids.blogspot.com/search" id="zs_search" method="get">

<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.

Contoh 2 :

Code HTML :

<style>

form#zs_search1 {

width: 215px;

padding: 18px;

margin: 0px 0 0px 0;

}

form#zs_search1 input {

width: 191px;

height: 26px;

padding: 5px 9px;

margin: -18px;

float: left;

font: 13px 'impact';

color: #fff;

border: 0;

background: rgb(0, 0, 0);

}



form#zs_search1 input:focus {

outline: 0;

background: #fff;

font: 13px 'impact';

color: #000;

-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}

form#zs_search1 input.submit {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2jY9EdUb4XCk5tWykRJt_j_p5pye-FlGskN45mwWIYQibrENkBgT1yaFaLDzz8GSNZlNZguOeOpyfjEXFF-QsxawSkMzoLI3xNT73HsNY-4tQ7te6zjbqo48YDZe_tebO8qE5SeAJnJZ/s1600/kokod.png) no-repeat 0px center;

}

form#zs_search1 input.submit {

width: 38px;

height: 34px;

font-weight: bold;

float: right;

cursor: pointer;

margin: -17px;

}

</style>



<form action="http://itzeids.blogspot.com/search" id="zs_search1" method="get">

<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /> <input class="submit" name="submit" type="submit" value="" /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.

Contoh 3 :

Code HTML :

<style>



form#zs_search2 {

width: 215px;

padding: 23px;

margin: 0px 0 0px 0;

background-color: rgb(213, 0, 0);

border-radius: 30px 0 25px;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

}



form#zs_search2 input {

width: 191px;

height: 26px;

padding: 5px 9px;

margin: -18px;

float: left;

font: 13px 'impact';

color: rgb(3, 0, 0);

border: 0;

background: rgb(255, 255, 255);

border-radius: 27px 0 0 7px;

}





form#zs_search2 input:focus {

outline: 0;

background: #fff;

font: 13px 'impact';

color: #000;

-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}



form#zs_search2 input.submit {

width: 40px;

height: 34px;

font-weight: bold;

float: right;

cursor: pointer;

margin: -17px;

border-radius: 0 0 20px;

}



form#zs_search2 input.submit {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5TepZE4V7000o8260qQ3OlsPoi8BHwSie8MUTk8MNxRZKQaqDNW2kse0BlbZT8-KDWggstSasnEOaZ5qwSTwPU5PfAgXBa-3AKTVmd__cowomdKf3nyxXsR2e82WWSI4tj17Y_3_HOMw/s1600/search.png) no-repeat 0px center;

}

</style>



<form action="http://itzeids.blogspot.com/search" id="zs_search2" method="get">

<input name="q" onblur="if (this.value=='') {this.value='Cari Disini...';}" onfocus="if (this.value=='Cari Disini...') {this.value='';}" type="text" value="Cari Disini..." /> <input class="submit" name="submit" type="submit" value="" /></form>

NB: Kode yang berwarna merah adalah ukuran dari widget tersebut. Silahkan di rubah sesuai dengan yang anda inginkan. Code warna biru diganti dengan alamat blog kalian.



Cara pemasangan :

• Tambahkan Gadget berupa HTML/Javascript pada menu tata letak di dashboard blog anda.

• Selanjutnya copy salah satu kode HTML diatas yang ingin anda gunakan.

• Letakkan gadget ini di mana pun kalian mau.


• Simpan Setelan, kemudian lihat hasilnya.

Demikianlah eksperimen tentang widget Search Box. Selamat mencoba, jika ada yang perlu ditanyakan silahkan kirim pertanyaan di kolom komentar. Semoga bermanfaat. ^_^

Demikianlah Informasi Download gratisnnya Menambah Search Box

Sekian Informasi seputar gratisan Menambah Search Box, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian download gratisannnya kali ini.

Anda sedang membaca artikel Menambah Search Box dan artikel ini url permalinknya adalah https://1001downloadgratis.blogspot.com/2013/07/menambah-search-box.html Semoga artikel ini bisa bermanfaat.

Tweet