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 :
<style>.search-box {background-color: transparent;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pN3ekmXvIQWSf_mA_M-euM9D6PHBnTgGXTapei_vdIH392u4b2TlUnNN5tfUa2UyE1E-UxrWpKX2woXWrvFdxCUvUNgqylxtHykxG8adbSpmWeARv0uLdYV1qB3ELX7sgymy43qNTIb4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pN3ekmXvIQWSf_mA_M-euM9D6PHBnTgGXTapei_vdIH392u4b2TlUnNN5tfUa2UyE1E-UxrWpKX2woXWrvFdxCUvUNgqylxtHykxG8adbSpmWeARv0uLdYV1qB3ELX7sgymy43qNTIb4/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 !
ConversionConversion EmoticonEmoticon