Mẫu khung tìm kiếm đẹp cho blogger

Mẫu khung tìm kiếm đẹp cho blogger : Trong bài viết trước mình có hướng dẫn các bạn cách tạo khung tìm kiếm cho blogspot.Nhưng bài viết đó mới chỉ là tạo khung tìm kiếm chứ chưa trang trí gì nhiều.Các bạn có thể vào khung tìm kiếm trên web để tìm lại bài đó.

Trong bài này mình sẽ hướng dẫn các bạn tạo một khung tìm kiếm cực đẹp cho blogspot.Khung tìm kiếm này được bo tròn ,trong suốt và nổi bật,được bo tròn các góc, màu xanh làm màu chủ đạo và được thiết kế nổi lên 3d trông rất ấn tượng.

Đặc biệt nó được làm bằng CSS3, tốc độ tải nhanh, thích hợp với mọi trình duyệt, chuẩn SEO với công cụ tìm kiếm rất thích hợp cho các template blogspot bán hàng.

Cách làm :

Để thực hiện tiện ích Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger này, bạn chỉ cần tạo 1 HTML/Javascript và copy đoạn mã code dưới đây vào và Lưu lại thôi.

Đầu tiên các bạn vào Blogger.com -> Blogger Title -> Bố cục -> Thêm tiện ích -> HTML/Javascript -> Copy đoạn mã sau đây vào -> Lưu lại.

<form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Type here" />
<input id="submit" type="submit" value="Search" />
</form>
<p style="display:none;">Search Box by <a href="http://thuthuat.nhomchung.net/">Thủ thuật blogspot</a></p>
<style>
#abt-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>

Các bạn nhớ thay link http://thuthuat.nhomchung.net bằng link của các bạn nha.

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

Xem thêm >> Hướng dẫn sửa lỗi 404 cho blogspot