Tạo hộp tìm kiếm cho Blogspot / Blogger

Để tìm kiếm các bài viết hay từ khóa chúng ta cần trang bị cho blog của mình một khung tìm kiếm cho blogspot. Nếu thiếu các khung tìm kiếm này là một thiếu sót đối với một blogger.

Trong bài này mình sẽ hướng dẫn các bạn tạo một hộp tìm kiếm, hiện kết quả ngày tại đó mà không cần chuyển trang, trông rất chuyên nghiệp.
Tạo hộp tìm kiếm cho Blogspot / Blogger
Bước 1: Bạn đăng nhập blogger sau đó dán đoạn code sau lên trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    url: "http://www.phim12g.com", // Thay bằng địa chỉ web của bạn
    numPost: 9999,
    summaryPost: true,
    summaryLength: 180,
    resultTitle: "Kết quả tìm kiếm của từ khóa", 
    noResult: "Không có phim nào của từ khoá này",
    resultThumbnail: true,
    thumbSize: 80,
    fallbackThumb: "http://i.imgur.com/5YWAGAQ.png"
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function getId(e){return document.getElementById(e)}function showResult(e){var t=e.feed.entry?e.feed.entry:"",n,r,i;skeleton="<h4>"+config.resultTitle+" &quot;"+input.value+"&quot;</h4>";skeleton+='<a title="Close" style="display:block;position:absolute;top:5px;right:10px;line-height:normal;text-decoration:none;color:#fff;font-size:20px;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">&times;</a><ol>';if(t===""){function s(){window.location.href="/p/search.html"}skeleton+=s()}for(var o=0;o<config.numPost;o++){if(o==t.length)break;var u=new RegExp(input.value,"ig"),a=t[o],f=a.title.$t.replace(u,"<mark>"+input.value+"</mark>");for(var l=0;l<a.link.length;l++){if(a.link[l].rel=="alternate"){n=a.link[l].href;break}}r="summary"in a&&config.summaryPost===true?a.summary.$t:"";if(config.resultThumbnail===true){i="media$thumbnail"in a?a.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+config.thumbSize+"-c"):config.fallbackThumb}var c=window.location.host;if(c.slice(9,14)=="oc.ne"){r=r.replace(/<br ?\/?>/ig," ").replace(/<.*?>/g,"").replace(/[<>]/g,"")}if(r.length>config.summaryLength){r=r.substring(0,config.summaryLength)+"..."}r=r.replace(u,"<mark>"+input.value+"</mark>");skeleton+='<li><a href="'+n+'"><img style="width:'+config.thumbSize+"px;height:"+config.thumbSize+'px;" src="'+i+'" alt="" />'+f+"</a>"+r+"</li>"}skeleton+="</ol>";resultContainer.innerHTML=skeleton;resultLoader.style.display="none";resultContainer.style.display="block"}function updateScript(){resultContainer.style.display="none";resultLoader.style.display="block";var e=getId("search-feed-script"),t=document.createElement("script"),n=input.value;t.id="search-feed-script";t.type="text/javascript";t.src=config.url+"/feeds/posts/summary?alt=json-in-script&q="+n+"&max-results="+config.numPost+"&callback=showResult";e.parentNode.removeChild(e);document.getElementsByTagName("head")[0].appendChild(t);return false}function resetField(){if(input.value===""){resultContainer.style.display="none";resultLoader.style.display="none"}}var config=searchFormConfig,input=getId("keyword"),resultContainer=getId("search-result-container"),resultLoader=getId("search-result-loader"),skeleton="";(function(){var e=document.createElement("script");e.type="text/javascript";e.id="search-feed-script";document.getElementsByTagName("head")[0].appendChild(e)})()
//]]>
</script>
Lưu ý: Bạn thay : www.phim12g.com thành địa chỉ web của bạn.
Bước 2: Bạn cần dán đoạn code sau vào nơi cần hiển thị: 
<div id='search-input'>
<form class='form-search' onsubmit='return updateScript();'>
<input autocomplete='off' id='keyword' name='q' onblur='if (this.value == "") {this.value = "Nhập tên phim, diễn viên...";}' onfocus='if (this.value == "Nhập tên phim, diễn viên...") {this.value = ""}' onkeyup='resetField();' type='text' value='Nhập tên phim, diễn viên...'/>
<button><i class="search-bt"></i></button>
<div class='top-search-box' id='suggestions' style='display: none'>
</div>
</form>
<div id='search-result-container'>
</div>
<div id='search-result-loader'>Đang tìm kiếm...
</div>
</div>
Bước 3: Để làm đẹp cho khung tìm kiếm bạn dùng CSS sau, bạn có thể tuỳ chỉnh để phù hợp: 
#search-result-container {
width:500px;
height:393px;
overflow:auto;
position:absolute;
top:43px;
right:0;
z-index:99999;
background-color:#282828;
border:2px solid #fff;
padding:15px 10px 0;
margin:10px 0 0;
border-radius:5px;
display:none;
text-align:left
}

#search-result-container mark {
background-color:#ff0;
color:#000
}

#search-result-container a {
text-decoration:none;
color:#eee;
font-weight:400;
font-size:12px;
display:block;
margin:0 0 5px
}

#search-result-container a:hover {
color:#f90
}

#search-result-container h4 {
margin:0 0 10px;
color:#26a7ed;
font-size:12px;
font-weight:700
}

#search-result-container ol {
background:transparent;
border:0;
margin:0 0 10px;
padding:0
}

#search-result-container li {
margin:0 0 10px;
padding:8px;
list-style:none;
box-shadow:inset 0 0 1px #fff;
background-color:#282828;
overflow:hidden;
word-wrap:break-word;
font-size:12px
}

#search-result-container li img {
display:block;
float:left;
margin:0 10px 10px 0
}

#search-result-loader {
position:absolute;
top:100%;
left:0;
z-index:999;
background-color:#0d6786;
color:#fff;
padding:3px 5px;
margin:0;
font:normal bold 10px/normal Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none
}

#ajaxloader {
position:fixed!important;
top:0;
right:0;
z-index:9999999;
width:100%;
height:30px;
line-height:30px;
display:none;
background:none repeat scroll 0 0 #040818;
color:#fff;
text-align:center;
font-size:14px;
font-weight:700;
text-transform:uppercase;
opacity:.8
}

.form-search {
float:right
}

.form-search #keyword {
background:rgba(0,0,0,0.5);
border:none;
color:#aaa;
height:35px;
line-height:35px;
padding-left:10px;
width:350px;
outline:none;
float:right;
font-family:'Roboto',sans-serif
}

.form-search button {
background:#0094da;
border:none;
color:#fff;
position:absolute;
right:2px;
top:2px;
height:31px;
width:31px
}

.search-bt {
background:url(http://i.imgur.com/WnKiex9.png) -5px 0;
background-size:30px;
padding:8px 10px;
background-repeat:no-repeat
}
Cuối cùng lưu mẫu lại và xem kết quả.
Bạn có thể sửa để phù hợp với blog của mình hơn!
Hy vọng với thủ thuật nhỏ này sẽ giúp ích được bạn trong việc sử dụng hoặc thiết kế.

Comments

Post a Comment

Popular posts from this blog

60 bài giáo trình Adobe Photoshop CS5 giúp bạn làm chủ photoshop dễ dàng hơn

Image
Ngày nay, các bạn có thể dễ dàng tìm, mua được những tài liệu hướng dẫn sử dụng Adobe Photoshop Cs5 trên các trang mạng nhưng khó có thể tìm được một tài liệu đầy đủ chi tiết mà miễn phí để có thể học và làm theo. 1. Về bộ 60 bài giáo trình học Adobe Photoshop CS5 Chắc hẳn rất nhiều bạn đã từng nghe nói tới phần mềm chỉnh sửa ảnh chuyên nghiệp bậc nhất là Photoshop và tìm tài liệu về cách sử dụng nó phải không ? Xem thêm:  Tải về Adobe Photoshop CS5 Protable không cần cài đặt
Read more

Ghost Windows 10 – 64bit -Cho máy UEFI – Office 2016

Image
Trong bài viết này mình xin giới thiệu với các bạn bản ghost win 10 dành cho máy UEFI cài sẵn office 2016 ổn định nhất hiện nay được Build từ Windows 10 nguyên bản không chỉnh sửa với các đặc điểm: Build riêng cho máy chuẩn UEFI & hoạt động ổn định Đã Actived có thể update thỏa mái Được cài sẵn Office 2016 cũng đã Actived Nguyên bản không cá nhân hóa Update to 06/11/2016 Các bạn tải xuống Ghost Windows 10 Full – Chuẩn UEFI tại đây: Đọc thêm »
Read more