Tạo hộp tìm kiếm cho blogspot

Để cho khách tham quan dễ dàng tìm kiếm các bài đã đăng trên Blog của mình, bạn có thể tạo hộp tìm kiếm (Search...) trên Blog với một số mẫu dưới đây.

 Ứng với mỗi mẫu là code phía dưới, nếu thích mẫu nào bạn chỉ cần đăng nhập vào Blog > chọn thiết kế > thêm tiện ích HTML/Javacript rồi dán code tương ứng phía dưới vào và bấm Lưu lại là xong.

Mẫu 1:

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItOS19xoCoc13IaF2uL9izgC3faT4rsw6-qn0P0grgjOo46m_EO5qVulofuNoGWwJfpXqgUuJjnf3cSzoElD9mLDITRSB3A8T7nMCdGSNLBBaWf4g4hj_sGrb_vPRh87oRx85t85WkfKq/) 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> <br /> <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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

Mẫu 2:

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVWklYei1hRMXXqMPTevUQOVXxyl_c-EgIgkljVpyBqt-ramAQpYqTHbrO6AJQRa3-kHdhYWuPaqU-kLOCcvd3ZY0Dgwvjf-Y-ATKi9_vfUt2hw5xrnBe09nfMgbhLqXjQjhMCkjt0sPXO/) 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> <br /> <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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

Mẫu 3:

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWoVSKeljm022IrhUuLLlARPI1-fIGomHhZL-qF9xSsnEGx_8iNKd_EUtWdniYOkzgvH2TOH86Fa-vYCuetcGGDmmZvJAId4ChNcpKF7aoiq4ustXMUY1u5wGTRbpaHLs02GVmXg4G1758/) 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> <br /> <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...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

Mẫu 4:

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyj4gPuBL5KGxXzfTAdfsch124XZJSAYdTUhSadPpphblIYwE2c0DbSjHVXV9cFd0POfXrh-FM92vmDa8II_LJdnl0Ob4bVBuzzVPoog5lsmDwhFr9I95QHMaicMx-_m08if8DoaijH9l8/) 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> <br /> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

Mẫu 5:

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxzcubl4N_RLdtEkvNK72NgHKK1ydGx5suLDlxCISKwntqDKhYFan1FyvZ_3EqTrR9k4L5KhvRk_otWjDvSJ1LUGwXRf6a6ytu7wOOkc0X8pULzu0V_JrV15nP6dTdDgq6Bn94d3f8UC5/) 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> <br /> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>

 Xem thêm:

Chúc thành công!