Thêm hộp "tìm kiếm" đẹp cho Blogspot

Xem Ảnh chụp màn hình của nguồn PSD:

LÀM THẾ NÀO ĐỂ THÊM HỘP TÌM KIẾM ĐẸP NÀY CHO BLOGGER

1. Đăng nhập vào Blogger Bảng điều khiển 
2. Nhấp vào "Thêm một tiện ích" 
3. Chọn "HTML / JavaScript" từ danh sách.
4. Đặt  mã một hộp tìm kiếm bên dưới mà bạn thích và Lưu lại, kéo về vị trí bạn muốn nó xuất hiện nhé.

PHONG CÁCH 1

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf-JhhR0VeulrevJUsyXC02Yn53TBtqzI6LOzrAEFy_sAYLBwk8GmUA5k3aWCETUNis7WcB5vIQIl62imNmdIE279AWrgUCDXdxO1P9e-FF4zTf1oUP4srwGelRPkAW3YS-qKA3s3UTJY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

PHONG CÁCH 2

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-edntj5wwxb-DJER7ZMqtQsrudeFoS1WafW9_1Uii2KQonR7yocpt-TPssjfD0_YVLRe_jLzDEdm_dJJOqP6EYkCDNu2qe8O65B_rnVcf3tTjSR7BHqk8VrbLU5LVDTxOZxshZN9_lpgw/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

PHONG CÁCH 3

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3al34biUhqie9O2_zFTNlHFOdXVbjoOX5_mdyzIH_BXZfLT9PXC5bd7YBQ93Ivssz-Z6ZeMewqabQf5evsVtPFaTgcNcnJyW2WUHrH-WE5mJt1jN2iFhc5cA3uHe8K_rWn49SC7KeBuT5/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

PHONG CÁCH 4

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEIdY44zDghH0xlbmphX8UiJ7dnCAIdrCRbrYI1HJ8pFHYfFHSUXGyGQmIwuOCa71MLbFbOjWyIYNuLrAL2C3msClcrPMgVb7E1GgoAtPD1T5_lrHdglojrk58PX7eXD4zzIPpcmHMUif/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

PHONG CÁCH 5

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP8moIfjPoF1v6BFDif50rTRmvNEZVytPZHlkm1uToa8sDcJHIl2XyOySDMCSlpww4PKitWGkNtCmmMxDXuqQHRAxzt_iZZLMjTLqUS65BiKQE9cSwqSSpwZtvedA9v-jCsuPzd8oB0KDY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

PHONG CÁCH 6

 <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcGqHHVLb7ZvWXQ-vSBmyhu85Y8sg9DvkGQ3K9DlDDRWcvRy_AniYn4j2-1m5Ho4olJf_HasTo-lJSoNB_zHXm7pXAjBK8MBfu65pLP0i67s_Z4c29sphZLn9cftCtVovYtObsNk-UF0Bp/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> 

Hanna Võ