Một số style searchbox đẹp cho blog

Search box là một thành phần quan trọng trong mỗi blog, nó giúp độc giả có thể tìm thấy các bài viết họ muốn chỉ với vài thao tác nhỏ, ngoài ra nó còn có chức năng điều hướng và phân loại các kết quả tìm kiếm. Nó giúp độc giả ở lại lâu với trang của bạn mà không cần sử dụng các công cụ tìm kiếm khác.

Bài viết này mình xin chia sẻ một số style searchbox (khung tìm kiếm) đẹp để các bạn có thể lựa chọn kiểu mình thích đưa vào blog.

Có nhiều màu sắc để bạn có thể lựa chọn màu thích hợp với màu sắc chủ đạo trên trang blog của bạn:

» Có 2 hình thức bạn có thể thêm search box vào trang của bạn như sau:

• Tạo một tiện ích HTML/JAvascripts và dán mã của khung tìm kiếm bạn thích vào phần nội dung của tiện ích đó (với cách này khung tìm kiếm thường chỉ nằm ở một số vị trí nhất định, bạn không thể đưa đến những vị trí ngoài b:section như vào trong menu chẳng hạn)
• Thêm trực tiếp vào trong mẫu (Template) của bạn (với cách này bạn có thể cho vào bất cứ đâu bạn muốn, tuy nhiên bạn phải am hiểu về coder, Tất nhiên nếu bạn không tìm được vị trí hãy để lại comment của bạn ở bên dưới bài viết này).

» Dưới đây là một số kiểu chính bạn có thể lựa chọn bạn thích nha.

» Kiểu 1:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinLICxpr6B7TN64KXAtqMD2WHDj4U1BMpb5I8LpsNMtyHH23qMFwp_Kl_44m8Zvtfo5EyFz-p3RZvd_w_fbKjFvntgzkq9sfvlD3bZjJggYhyTMg3kKSrXJSD7g-fCaOuu-KD5JkeseX7/s380/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." 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" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 2: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAF9rTlj8ZdNH5tnP9N-RtBZmR46QB4DpR_RWHyZHiMH8Ea3JbvRFziZMbHbQmsClL-JdZs0bk27MxX3IrtKnqDRr-slAYmzlZrKdpBCaGQHcsJ-NgcJrgO0Uu42eyyztzW1oFYoJZG8e1/h57/white-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." 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" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 3: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwTSBtb_QM8G2DAFB4Qcj1O-9lwyS0ZhDCJmez6BkFEmGE-OArsP_xHg4fRjGVQdiGMH6XKHEdbSnuPbdoC2fqSzSfnZ54FJNvuGi6PJFMJ7OUuNqRBD2gZpMEv_aEYL9Kv7xgCytW4vj/h57/blue-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." 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" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 4: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjue54puMn94h_JwvFT6UTlqutBk4MhpF6JgTx5womEFCm-bl14dGvkpYtT5vGijYasr2BZdaPWFEItEbqMqndcHBhwmHzWs5HIL7aCUK1xWIe3K985igWYmxSXUQ0aqlZf8bo2uUI-C9z9/h57/transparent-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." 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" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 5: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-lgtdVUyLrTNgiNJOq1Xzbao3xAc8lWmtOO8jai6Csqo3SfBKmJwk_lEXfNO3p_Pc2n1rSbepRu8ECUyaoE5RnULaabBmHmORWZ_hoJl7t5M35S6YtWFpWIhEJ_-anU0_Ux1ojpVsuzD/h57/pink-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." 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" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Chúc các bạn thành công !
Nguồn terocket.com

Chú ý:
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..