Tại sao phải thêm nút tìm kiếm toàn màn hình?
Các tìm kiếm màn hình đầy đủ đang trở thành một trong những phần quan trọng của một trang web. Với sự gia tăng số lượng người dùng điện thoại di động, người đang từ từ nhích về phía tìm kiếm toàn màn hình như nó cải thiện đáng kể trải nghiệm tìm kiếm của người dùng di động. Kể từ khi, điện thoại di động đang xảy ra để có kích thước nhỏ, thêm một tìm kiếm toàn màn hình sẽ làm cho nó dễ dàng hơn để gõ và tìm kiếm trang web của bạn.
Cài đặt tiện ích cho Blog của bạn
Điều đầu tiên bạn cần làm là để đi đến Blogger >> Mẫu >> Chỉnh sửa HTML . Bây giờ trong blogger template biên tập, bấm tổ hợp phím CTRL + F, tìm ]]> </ b: skin> thẻ và chỉ ở trên đó dán mã CSS sau.
.dialog-box button[type="submit"]{margin-top:20px;padding:.8em 2em;background-color:#10b765;color:#fff;border:none;text-transform:uppercase;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}.dialog-box input[type="text"]{padding:0 20px;font-size:13px;letter-spacing:.1em;color:#888;height:50px;line-height:1;background-color:#fff;border:1px solid #ddd;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s;box-sizing:border-box;width:100%}.dialog-box h2{margin:0;font-weight:400;font-size:24px;padding:32px 0 25px;text-transform:uppercase}.dialog-box{max-width:520px;min-width:290px;background:#fff;padding:20px;text-align:center;position:relative;z-index:5;margin:auto}.overlay{position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(55,58,71,0.9)}.overlay .overlay-close{width:30px;height:29px;position:absolute;right:0;top:0;border:none;background:#10B765;float:left;color:#fff;outline:none;z-index:100}.overlay .dialog-inner{text-align:center;position:relative;top:50%;height:60%;-webkit-transform:translateY(-50%);transform:translateY(-30%)}.overlay-mbl{opacity:0;visibility:hidden;-webkit-transition:opacity 0.5s,visibility 0 .5s;transition:opacity 0.5s,visibility 0 .5s;z-index:100}.overlay-mbl.open{opacity:1;visibility:visible;-webkit-transition:opacity .5s;transition:opacity .5s}.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover{background:#212121}#trigger-overlay{cursor:pointer;float:left;background:#10b765;color:#fff;padding:10px}#trigger-overlay a{color:#fff;text-decoration:none}#trigger-overlay:hover{background:#111}
Nếu bạn tốt về ngành CSS , bạn có thể chỉnh sửa nội dung đoạn css trên theo ý muốn của mình
Bây giờ chúng ta cần phải cài đặt các file jQuery tìm kiếm toàn màn hình. Trong mẫu blog của bạn, hãy tìm kiếm thẻ </ body> và ở trên thẻ đó dán các tập tin jQuery sau đây.
<script src = "http://mybloggerlab.com/Scripts/modernizr.custom.js"> </ script>
<script src = "http://mybloggerlab.com/Scripts/fullscreen_search.js"> </ script>
<script src = "http://mybloggerlab.com/Scripts/fullscreen_search.js"> </ script>
Bây giờ sau khi thêm các tập tin CSS và jQuery, chúng ta cần phải thêm HTML code tìm kiếm toàn màn hình sẽ xuất hiện khi nhấn vào nút tìm kiếm. Tìm kiếm <body> và ngay dưới đó dán đoạn mã sau.
<div class="overlay overlay-mbl">
<div class="dialog-inner">
<div class="dialog-box">
<h2>Enter your keyword</h2>
<form method="get" action='/search' class="search-popup-inner">
<input type="text" name="q" onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' value='Search the site' />
<button type="submit">Search</button>
</form>
<div><button type="button" class="overlay-close">X</button></div>
</div>
</div>
</div>
<div class="dialog-inner">
<div class="dialog-box">
<h2>Enter your keyword</h2>
<form method="get" action='/search' class="search-popup-inner">
<input type="text" name="q" onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' value='Search the site' />
<button type="submit">Search</button>
</form>
<div><button type="button" class="overlay-close">X</button></div>
</div>
</div>
</div>
Thêm nút tìm kiếm vào blog của bạn
Sau khi thêm CSS , javascript , html , giờ là bước cuối cùng để thêm tiện ích tìm kiếm toàn màn hình vào blog của bạn
Nó thuộc vào bạn nơi bạn muốn đặt biểu tượng tìm kiếm, bạn có thể thêm bất cứ nơi nào theo mẫu thiết kế của bạn. Để thêm các biểu tượng tìm kiếm trong thanh bên của trang web blogger của bạn, vào Layout(Bố cục) >> Thêm một tiện ích >> Thêm HTML / JavaScript . Bây giờ dán vào nút tìm kiếm HTML code sau trong vùng văn bản HTML.
<div id="trigger-overlay" ><a><i class="fa fa-search"></i> Tìm kiếm</div>
Một khi tất cả mọi thứ được thực hiện, tiết kiệm widget của bạn. Bây giờ hãy vào trang web của bạn và tận hưởng các phương pháp mới để tìm kiếm trang web của bạn. Chúng tôi hy vọng hướng dẫn này có thể giúp bạn trong việc học làm thế nào để thêm lớp phủ tìm kiếm toàn màn hình trong blogger. Nếu bạn có bất cứ đề nghị về plugin này, xin vui lòng viết lại cho chúng tôi thông qua Facebook, Google+ hoặc nhận xét dưới đây.