Search Form Cho Blogger

Có lẽ lâu lắm rồi em không viết bài nhỉ, Chắc khoảng 1 tuần rồi. Chả là do việc "dùi mài kinh sử" nó rối tung cả lên, nên đành ngậm ngùi gác blog sang một bên để mà văn ôn võ luyện. Được lúc sáng nay rảnh nên tranh thủ post bài về Search Form cho Blogger luôn. Cái form này em thấy trên mấy WP blog khá đẹp, nên dùng view-source đại pháp đem về dùng :D.

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.

Việc tạo Widget để cho khi add Search Form được thuận tiện hơn, nếu không thì ta có thể chèn thẳng vào Mẫu luôn.

Chúc thành công!