Labels

Search Box Overlay version 3 for Blogger


Không hiểu sao lại đặc biệt có sở thích thiết kế form search box của blog đến vậy 😀. Chắc bởi vì nó là thành phần rất quan trọng của blog, hơn nữa thiết kế form search với hiệu ứng đẹp cũng phần nào khẳng định được đẳng cấp trong design web của mỗi webmaster, và để tiết kiệm được diện tích cho trang, tôi thường thiên về các seach box dạng button click hơn.

Khung search box overlay thứ ba này cũng sử dụng 1 đoạn jquery không đáng kể, nhưng với CSS3 thì hiệu ứng nó mang lại khiến bạn rất ấn tượng. Xem demo

 DEMO
Chuẩn bị
  • Jquery
  • Fontawesome
2 thứ này hầu hết template đều có, và bài viết nào tôi cũng có nhắc đến nên xin phép không nhắc lại ở bài viết này

Viết CSS

.search-btn-hung1001{text-align:center;font-size:20px;line-height:20px;cursor:pointer;color:#111;-webkit-transition:color .5s ease;-moz-transition:color .5s ease;-ms-transition:color .5s ease;transition:color .5s ease}
.search-btn-hung1001:hover{color:#2187e7}
.search-wrap-hung1001{height:100%;left:0;position:fixed;top:0;width:100%;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;transition:opacity .5s ease;z-index:9999}
.overlay-search-hung1001{height:100%;left:0;position:absolute;top:0;width:100%;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;transition:opacity .5s ease;z-index:9999}
.search-wrap-hung1001.active{visibility:visible;opacity:1}
.search-wrap-hung1001.active .overlay-search-hung1001{background:rgba(0,0,0,0.9);opacity:1;visibility:visible}
.search-wrap-hung1001 .search-form-hung1001{width:90%;left:50%;padding:50px;position:absolute;top:50%;-webkit-transform:scale(.3) translate(-85%,-50%);-moz-transform:scale(.3) translate(-85%,-50%);-ms-transform:scale(.3) translate(-85%,-50%);-o-transform:scale(.3) translate(-85%,-50%);transform:scale(.3) translate(-85%,-50%);-webkit-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s;opacity:0;visibility:hidden;z-index:99999}
.search-wrap-hung1001.active .search-form-hung1001{-webkit-transform:scale(1) translate(-50%,-50%);-moz-transform:scale(1) translate(-50%,-50%);-ms-transform:scale(1) translate(-50%,-50%);-o-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1;visibility:visible;-webkit-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.search-wrap-hung1001 .search-form-hung1001 .search-field-hung1001{outline:none;background:transparent;border:0;padding:8px 0;float:left;width:90%;font-size:35px;font-family:"Times",monospace;border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:#fff;color:#fff;text-align:center}
.search-wrap-hung1001 .search-form-hung1001 .search-submit{font-size:40px;width:10%;cursor:pointer;color:#fff;background:transparent;border:none}
.search-wrap-hung1001 .search-form-hung1001 .search-submit:hover,.search-wrap-hung1001 .close:hover{color:#2187e7;-webkit-transition:color .5s;-o-transition:color .5s;transition:color .5s}
.search-wrap-hung1001 .close{color:#fff;cursor:pointer;font-size:40px;line-height:80px;position:absolute;right:30px;top:0;z-index:99999}
.search-field-hung1001::placeholder{color:#fff;opacity:1}
.search-field-hung1001:-ms-input-placeholder{color:#fff}
.search-field-hung1001::-ms-input-placeholder{color:#fff}

Chèn đoạn code sau trước thẻ đóng </body>

<div class='search-wrap-hung1001'>
  <div class='close' title="Close"><i class="fa fa-close"></i>
  </div>
  <form action='/search' class='search-form-hung1001' method='get' role='search'>
    <input class='search-field-hung1001' name='q' placeholder='Type here...' type='search' value='' required="required" autocomplete="off" />
    <button class="search-submit" type='submit' title="Search"><i class="fa fa-search"></i>
    </button>
  </form>
  <div class='overlay-search-hung1001'> </div>
</div>
<script type='text/javascript'>//<![CDATA[
    $('.search-btn-hung1001').click(function() {
        $('.search-wrap-hung1001').toggleClass('active');
    });
    $('.close').click(function() {
        $('.search-wrap-hung1001').removeClass('active');
    });
//]]></script>

Cuối cùng là button dùng để mở form search, đặt ở bất cứ đâu bạn thích
<div class='search-btn-hung1001'>
   <i class='fa fa-search'></i>
</div>

Lưu mẫu lại và kiểm tra thành quả.

Tùy chỉnh
  • Chỉnh CSS theo ý thích của bạn
  • Nếu có bất kì id hoặc class nào trùng bạn vui lòng thay
  • Nếu bạn dùng công cụ tìm kiếm tùy chỉnh của google có thể thay action của form ví dụ action="/p/search.html" 

Kết luận: Form search overlay hiện đang khá thịnh hành, chiếm ít diện tích và tạo hiệu ứng đẹp khiến người dùng thích thú, hi vọng thiết kế form search này sẽ sớm được tích hợp lên website của bạn

Để lại bình luận nếu bạn gặp lỗi ! Chúc thành công
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Blog đang bị lỗi cái gì vậy? sao nhìn tùm lum thế bạn?

      ReplyDelete
      Replies
      1. Lỗi gì nhỉ ? thấy bình thường mà ||3

        Delete
      2. Lúc sáng thấy lỗi mà, mà Blog ông nhiều js quá, hơi lag.

        Delete
    2. Nếu bạn ko chê, chúng ta trao đổi text link nhé :D

      ReplyDelete
      Replies
      1. Rất hân hạnh, cho hỏi blog bạn là gì vậy :d

        Delete
      2. Blog mình là dan47.info vào blog bạn thấy logo ná ná nhau thế là bồ kết xin text link :))

        Delete