Hế lô 501 anh chị em blogger, hôm nay bài viết này sẽ chia sẻ một tiện ích khá hay mà mình lụm được bên trang indo. Đó là cách tạo box search trực tiếp trên Blogger/Blogspot.
Đây là chức năng tìm kiếm bằng Ajax, nó có nhiều ưu điểm so với các tùy chọn tìm kiếm thông thường, hình thức tìm kiếm sử dụng Ajax sẽ trực tiếp cho kết quả hiển thị tự động mỗi khi gõ vào, hoặc thay đổi từ khóa tìm kiếm mà không cần phải nhấn nút tìm kiếm hay enter.
Bạn có thể xem demo ảnh bên dưới hoặc thử tìm kiếm trực tiếp trên blog.
Lưu ý: Cách làm dưới đây này chỉ áp dụng cho các template có sẵn khung tìm kiếm, và mình nghĩ tất cả các template hiện nay đều đã có chức năng này rồi, trừ khi bạn tự tạo template thì bạn nên tạo khung tìm kiếm trước.
Bạn không cần thay đổi bất cứ điều gì trong khung tìm kiếm mặc định của template, chỉ cần cài đặt CSS và JS mà mình sẽ chia sẻ bên dưới. Và mình xin nhắc lại lần nữa, code này không phải của mình mà là lụm bên indo, nếu bạn cần nguồn thì hãy để lại bình luận bên dưới, mình sẽ chia sẻ link indo, nhọ cái là cái link nguồn indo ấy nó cũng lụm của trang indo khác lun cơ. 🤣
Giờ thì bắt đầu lun nào 👇
Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Copy đoạn CSS dưới đây rồi dán trước thẻ </head>.
<style type='text/css'>
/* ajax search */
.ajax-search.hidden{display:none}
.ajax-search{padding:10px 10px;background:rgba(255,255,255,.89)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:0 15px 10px -10px rgba(155,155,155,0.15),0 -15px 10px -10px rgba(155,155,155,0.15);max-height:450px!important;margin:0px auto;border-radius:8px;animation:fadeInDown .5s linear;font-weight:600;font-family:calibri;}
.ajax-search-results-empty{text-align:center;color:#df5b5b;font-weight:600;font-family:calibri;}
.ajax-search h3 {font-size:14px;font-weight:600;margin:0 10px 20px 10px;text-align:left;color:#df5b5b;font-family:calibri;}
.ajax-search-results{text-align:left}
.ajax-search li{background:#fff;position:relative;display:inline-block;width:100%;padding:8px;margin:0px 0px 0px 0px;border-radius:5px;border:1px solid rgba(155,155,155,0.15);overflow:hidden;transition:all .3s}
.ajax-search li:hover{border-color:#df5b5b}
.ajax-search li h4{font-size:13px;font-weight:600;margin:0 15px 0 0}
.ajax-search li h4 a{transition:all .3s;color:#444444;font-family:calibri;font-size:14px;font-weight:600}
.ajax-search li h4 mark{background-color:transparent;color:#df5b5b;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#df5b5b}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-block;clear:both;overflow:hidden;background:#df5b5b;color:#fff;font-size:13px;padding:7px 15px;border-radius:5px;margin:15px 3px 0 3px}
.ajax-search-pager{overflow:hidden;clear:both;position:relative}.ajax-search li:nth-child(odd){animation:bounceInLeft 1.5s}
.ajax-search li:nth-child(even){animation:bounceInRight 1.5s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#df5b5b}
.ajax-search-pager a:hover{background:#333;color:#fff}
.ajax-search li{position:relative;display:inline-block;float:left;width:100%;margin:0 0 3px 0;overflow:hidden}
</style>Bước 2: Thêm đoạn JavaScript dưới đây vào trước thẻ đóng </body> và lưu lại.
<script>
/*<![CDATA[*/
// live search dengan defer
function liveSearchDefer(){var d=document.createElement("script");d.src="https://dl.dropboxusercontent.com/scl/fi/rix7lp4j8tvhid3o0nbqz/Timkiem.js?rlkey=r73ajj78118uc7isidbml6p1k&dl=0?live=true&image=true&url=https://chitose2d.blogspot.com/",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",liveSearchDefer,!1):window.attachEvent?window.attachEvent("onload",liveSearchDefer):window.onload=liveSearchDefer; function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);
/*]]>*/
</script>Xong cmnr đó, giờ thì lưu lại và nhanh chóng test thành quả ngay và luôn nào. 🥰
Tốt hơn là sau này bạn hãy lưu trữ lại liên kết này trong đoạn code trên có màu xanh ấy, https://dl.dropboxusercontent.com/scl/fi/rix7lp4j8tvhid3o0nbqz/Timkiem.js?rlkey=r73ajj78118uc7isidbml6p1k&dl=0 và tìm ID blog này: 5792222503381100938 sau đó thay thế nó bằng ID blog của bạn.
Hashtag: Cách tạo box search trực tiếp trên Blogger/Blogspot
Không có nhận xét nào
Đăng nhận xét