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