Thư viện

Trải nghiệm

Thứ Tư, tháng 11 19, 2014

[Tips] - Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger

Hướng dẫn thủ thuật cách thiết kế Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger tại Terocket dành cho cả nhà đây nhé!

Chia sẻ:
Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger
Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger rất ấn tượng và tương tác tốt hơn với người đọc đấy!

Terocket xin gửi một thủ thuật mới đến tất cả các bạn thành viên, thủ thuật blog lần này nói về khung tìm kiếm Search Bar có tên là [Tips] - Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger. Với thủ thuật này, giúp blog của các bạn trông chuyên nghiệp hơn, cuốn hút bạn đọc hơn, tạo sự tương tác cao hơn giữa blog và người đọc.

Live Demo

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 đượ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. Thực sự là một thủ thuật hay mà lâu nay Terocket muốn giới thiệu đến bạn đọc. Giờ cùng Terocket thực hiện thủ thuật này nha.

Chèn CSS & HTML của tiện ích vào một HTML/Javascript

Để 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://www.terocket.com">Terocket</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>

Vậy là đã xong thủ thuật blog với tiện ích [Tips] - Khung tìm kiếm / Search Bar CSS3 bo ròn, nổi bật & trong suốt cho Blogspot Blogger, rất đơn giản đúng không nào. Terocket tin rằng ai cũng làm được cái tiện ích thế này.Chúc tất cả thành công nhé!

Dưới đây là một số thủ thuật liên quan đến hộp tìm kiếm search bar cho blogspot dành cho bạn nào quan tâm nha.

  1. Một số style searchbox đẹp cho blog
  2. Popup search với Thumbnail từ JQuery cho blogspot ves2
  3. Hộp popup search từ JQuery cho blogspot
  4. Đề xuất từ khóa vào ô search cho blogger
  5. Hiển thị profile Google+ trên kết quả tìm kiếm
  6. Tùy chỉnh Google Custom Search bằng CSS3 cho blogger
  7. Chèn link Google Search vào footer của bài viết
  8. Nâng cấp khung tìm kiếm của Blogspot
  9. Chèn công cụ tìm kiếm của Yahoo vào blog
  10. Đăng ký blog vào bộ máy tìm kiếm của Live Search (Bing)
  11. Tạo hộp tìm kiếm cho blogspot
  12. Tạo khung tìm kiếm hiện kết quả tại trang tĩnh cho Blogspot

An Thành - Terocket

3 nhận xét:

  1. ad ơi cho em hỏi làm sao làm đc cái khung bình luận thế

    Trả lờiXóa
  2. Đã áp dụng thành công và click quảng cáo ủng hộ ad. Thanks !

    Trả lờiXóa
  3. đẹp lắm bác!
    tiếc là không search được giống blogger cung cấp

    Trả lờiXóa