HƯỚNG DẪN CÁCH LÀM:
B1: Vào chỉnh sửa HTML và thêm đoạn code phía dưới lên trên thẻ </body> hoặc dưới thẻ <body> cũng được<!-- Search live -->B2: Tìm đoạn </head> và thêm code này lên trên nó
<div class='live-search'>
<form class='searchmein' id='search'>
<div class='input'>
<input class='search' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='search' value='Nhập từ khoá cần tìm...'/>
<button class='submit fa fa-search' type='submit' value=''/>
</div>
<button class='fa fa-times' id='close' type='reset' value=''/>
</form>
<div class='search-content'>
<div class='search-result'>
<span/>
</div>
<div class='more-result'>Tải thêm</div>
</div>
</div>
<script type='text/javascript'>B3: Thêm css này lên trên thẻ ]]></b:skin>
//<![CDATA[
var mql=window.matchMedia("screen and (min-width: 60em)");if(mql.matches){$(function(){$(".searchbutton").on("click",function(){$(".live-search").addClass("active").find(".search").focus()});$(".live-search").on("click",function(){$(this).find(".search").focus()});$("#close").on("click",function(){$(".live-search").removeClass("active")})})};function findit(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").show(),$(".search-filter").attr("data-query",e),$(".search-result span").show().html("Đang tìm kiếm ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".more-result").hide(),doSearch(t,e)}})}else $(".search-content").hide()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT1LxRI-nPmpE9MduA88GPSv7P2Zq8yeDRSaT0DkG9r-Sv7lqmxIb38mOgG7OqiyB-C4sucP6JKZg8LghJIh6TOAUFGYVZmfydG7dj4FStVav_NxjsszKrJv4NHgm2Hc9u5DwbDvEdpCq/s1600/default.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").hide(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".more-result").show()})}else $(".search-result span").show().html("Không có kết quả"),$(".more-result").hide()}$(".searchmein").submit(function(){return $(".search-item").remove(),findit(),!1}),$(".close-search").click(function(){$(".search-content").hide()}),$(".more-result").click(function(){$(".more-result").hide(),findit()});
//]]>
</script>
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}
.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}
#search .input .submit:focus,#search .input .submit:hover {background:#2c9bd5;}
#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.live-search .search:focus {outline:none;}
.search-result{padding:15px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.search-item img{width:60px;height:60px;float:left;border-radius:4px}
.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}
.search-item a:hover{color:#069;}
.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}
.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}
.more-result a{text-decoration:none;color:#fff;}
.more-result:hover a,.more-result a:hover{color:#fff;}
.queryword{font-weight:700}
B4: Thêm đoạn code phía dưới vào menu của blog<li class='searchbutton' title='Tìm kiếm'></li>Các bạn có thể xem demo Tại đây nhé
Chúc bạn thành công!
No comments