blogcongnghe: Search Form Cho Blogger

DEMO

Các bước tiến hành như sau:

Vào Mẫu >> Chỉnh sửa HTML
Chèn đoạn code sau vào trước thẻ ]]></b:skin>

.form-wrapper {
 width: auto;
 padding: 8px;
 margin: 100px auto;
 overflow: hidden;
 border-width: 1px;
 border-style: solid;
 border-color: #dedede #bababa #aaa #bababa;
 border-radius: 3px;      
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}

.form-wrapper #search {
 width: auto;
 height: 20px;
 padding: 10px 5px;
 float: left;    
 font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
 border: 1px solid #ccc;
 -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
 -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
 box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;      
}

.form-wrapper #search:focus {
 outline: 0; 
 border-color: #aaa;
 -moz-box-shadow: 0 1px 1px #bbb inset;
 -webkit-box-shadow: 0 1px 1px #bbb inset;
 box-shadow: 0 1px 1px #bbb inset;  
}

.form-wrapper #search::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}

.form-wrapper #search:-moz-placeholder {
 color: #999;
 font-weight: normal;
}

.form-wrapper #search:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
} 

.form-wrapper #submit {
 float: right;    
 border: 1px solid #00748f;
 height: 42px;
 width: 35px;
 padding: 0;
 cursor: pointer;
 font: bold 13px Arial, Helvetica;
 color: #fafafa;
 text-transform: uppercase;    
 background-color: #0483a0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
 background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
 background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
 background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
 background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
 background-image: linear-gradient(top, #31b2c3, #0483a0);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;      
 text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
  
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {  
 background-color: #31b2c3;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
 background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
 background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
 background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
 background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
 background-image: linear-gradient(top, #0483a0, #31b2c3);
} 
  
.form-wrapper #submit:active {
 outline: 0;    
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;    
}
  
.form-wrapper #submit::-moz-focus-inner {
 border: 0;
}

Tạo một HTML/Jaavascript và dán code sau vào:

<form action='/search' class="form-wrapper">
 <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type="text" id="search" placeholder="Search..." required />
 <input type="submit" value="go" id="submit" />
</form>

Một số giá trị Weight em để auto cho nó phù hợp với sidebar, nếu sidebar của mọi người lớn hơn thì nên chỉnh sửa lại cho đẹp, nếu không thì cũng chẳng chết ai.