Thứ Sáu, 21 tháng 11, 2014

Vài ngày trước, chúng tôi đã thảo luận về Làm thế nào để Thêm Công cụ Tìm kiếm Tuỳ chỉnh Google Blogger và hôm nay chúng ta sẽ chia sẻ Thêm hộp tìm kiếm nâng cao cho Blogger.Hộp tìm kiếm là một trong những yếu tố quan trọng nhất của một blog cho phép truy cập của bạn để tìm kiếm nội dung. Nó cho phép độc giả tìm kiếm thông qua tất cả các nội dung của bạn và tìm thấy chính xác những gì họ đang tìm kiếm. 
Tại sao nó quan trọng để Thêm một hộp tìm kiếm? Bởi vì bạn của bạn không có nhiều thời gian để di chuyển qua mỗi bài viết mà bạn đã từng viết. Vì vậy, bằng cách thêm một hộp tìm kiếm, truy cập của bạn có thể dễ dàng tìm kiếm và tìm thấy những nội dung mà họ đang tìm kiếm. Nó chỉ giống như một công cụ tìm kiếm nội bộ cho blog của bạn và nó cũng sẽ làm cho blog của bạn sử dụng. 

Theo Mặc định blogger thì vẫn có ô tìm kiếm riêng của mình nhưng thiết kế của nó là xấu xí và không hấp dẫn. Hôm nay trong bài viết này chúng ta sẽ chia sẻ 2 hộp tìm kiếm nâng cao, sạch sẽ và hấp dẫn cho blog của bạn. 

Thêm hộp tìm kiếm nâng cao cho Blogger

Mẫu 1 : 
Thêm hộp tìm kiếm nâng cao cho Blogger
<style>.search-box {background-color: transparent;background-image: url(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/s1600/search-icon.png);background-position: 5px center;background-repeat: no-repeat;background-size: 24px 24px;margin: 3px 0;cursor: pointer;height: 37px;padding: 0 0 0 34px;border: 2px solid transparent;position: relative;-webkit-transition: width 400ms ease, background 400ms ease;transition: width 400ms ease, background 400ms ease;width: 0;color: #222;font-family: Arial;font-weight: bold;}.search-box:focus {background-color: #FFF;border: 2px solid #8E8E8E;border-radius:5px;cursor: text;outline: 0;width: 270px;</style><form action='/search' id='search' method='get'><input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/></form>

Mẫu 2 :

<style>.search-box {background-color: #2aa4cf;background-image: url(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/s1600/search-icon.png);background-position: 5px center;background-repeat: no-repeat;background-size: 24px 24px;margin: 3px 0;height: 38px;width:280px;padding: 0 0 0 34px;border: 2px solid transparent;position: relative;-webkit-transition: width 500ms ease, background 500ms ease;transition: width 500ms ease, background 500ms ease;color: #222;font-family: helvitica;font-weight: bold;}.search-box:focus {background-color: #99E4FE;border: 2px solid #99E4FE;outline: 0;width: 280px;</style><form action='/search' id='search' method='get'><input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/></form>
Nhấn lưu lại và kiểm tra thành quả nhé. Chúc các bạn thành công ! 

0 nhận xét:

Đăng nhận xét