Cara Modifikasi Box Searc di blogspot

Dengan Searc Box ini akan penginjung akan di permudahkan untuk mencari yang ada dalam suatu blog.pada dasarnya Searc Box ini adalah

<form action="http://NAMABLOGANDA.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

tio prasetyo

Nah Kode di jika di terapkan di blog akan seperti di bwah ini

tio prasetyo

Dari kode dan contoh gambar di atas..bisa kita modifikasi seperti ini dengan CSS3 Caranya
Tambahkan gadget baru (add a gadget)
pilih HTML/JavaScript
Copy paste kode ini ke dalam gadget tadi lalu save.
Ini kode modifikasi kotak pencarian / Search box yang harus anda copy paste :

<style>
.cariform {
background: #111111;
background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */
background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
}
.cariform input {
font: normal 12px Arial, Helvetica, sans-serif;
}
.carifield {
background: #ededed;
padding: 6px 6px 6px 8px;
width: 200px;
border: solid 1px #222222;
outline: none;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
-webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
}
.caributton {
color: #fff;
border: solid 1px #b80000;
font-size: 11px;
height: 28px;
width: 55px;
text-shadow: 0 1px 1px #222222; /* CSS text shadow */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ff0000;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */
background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */
}
</style>
<form action="http://NAMABLOGANDA.blogspot.com/search" class="cariform " method="get">
<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="Search" /></form>

tio prasetyo

Contohnya jika di terapkan ke blog akan seperti gambar di bawah ini

tio prasetyo

SIMPAN DAN LIHAT HASILNYA...

Salam buat sobat blogger ... ...

Aku hanyalah seorang cah ndeso dan katro yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si katro, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://tio-dhp.blogspot.com/