Searchbox CSS3 cho Blogger

Searchbox là thành phần không thể thiếu đối với các website/blog, nó giúp độc giả có thể tìm kiếm nhanh nội dung trong website/blog của bạn mà không cần phải xem từng trang để tìm nội dung đó. Bài viết này mình sẽ chia sẻ một style searchbox bằng CSS3 cho Blogger, hoàn toàn rất nhẹ, không ảnh hưởng đến tốc độ load trang.

Để tạo searchbox cho blog, bạn có thể lựa chọn một trong hai cách sau:

Cách 1: Vào Mẫu > Chỉnh sửa HTML và dán code của searchbox vào vị trí bạn muốn hiển thị (sử dung cách này nếu bạn có hiểu biết về code).

Cách 2: Cách này đơn giản hơn, bạn chỉ cần vào Bố cục, tạo một tiện ích HTML/JavaScripts và dán code của searchbox vào phần nội dung.  

Dưới đây là code của searchbox:

1<!--Searchbox by kjmagic.blogspot.com-->
<form id="kjmagic-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Nhập từ khóa tìm kiếm" />
<input id="submit" type="submit" value="Search" />
</form>
<p style="display:none;">Search box by <a href="http://kjmagic.blogspot.com">KJ Magic</a></p>
<style>
#kjmagic-css3-search{background:#eaf8fc;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px}
#search,#submit{float:left}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:#6cbb6b;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:hover{background:#95d788;background-image:0}
#submit:active{background:#95d788;outline:none;-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}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}
</style>
<!--/Searchbox by kjmagic.blogspot.com-->

Chúc các bạn thành công !