Search Box Overlay version 3 for Blogger - Hưng Hoàng Văn | Tin tức - Thủ thuật - Phần mềm

1/18/2018

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
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 {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 1;
    /* Firefox */
}
.search-field-hung1001:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;
}
.search-field-hung1001::-ms-input-placeholder {
    /* Microsoft Edge */
    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
  • Blogger

6 comments

  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

LƯU Ý KHI BÌNH LUẬN

Viết Tiếng Việt có dấu, mọi bình luận sẽ được kiểm duyệt bởi quản trị viên
Đặt liên kết vào vị trí # theo mẫu <a href="#">Đây là liên kết</a>
In đậm theo mẫu <b>Từ cần in đậm</b>
In nghiêng theo mẫu <i>Từ cần in nghiêng</i>

Hãy ủng hộ tác giả bằng cách thường xuyên click vào quảng cáo nhé ! Sự đóng góp của bạn sẽ là động lực to lớn để tác giả duy trì website và mang đến những bài viết bổ ích


Please support the author by regularly clicking on ads ! Your contribution will be a great motivation for the author to maintain the website and bring useful articles