Sahabat- cara memodifikasi search .untuk search sahabat mungkin hal yang terkecil dan jarang sekali di gunakan para pengunjung untuk mencari artikel yang ada pada blog kita.
namun alangkah baiknya bila kita tetap memodifikasi search yang ada pada navbar blog kita.
ok sahabat langsung ajja ya biar ga terlalu bingung dan ga tahan lagi gimana caranya?
langsung ajja sahabat langsung ajjj login ke blog sahabat setelah login sahabat ke layout dan klik template dan edit HTML.
nah sebelum sahabat memasang nya anna sarankan ada baiknya untuk di simpan dulu tamplate sahabat jaga-jaga.Saabat temukan kode search di CCS sahabat seali lagi anna sarankan untuk mengganti kode di khawatirkan ada dua search biar tetap satu dan sebaris dengan navbar.
langsung ajja sahabat kode di bawah ini di atas ]]></b:skin>
selanjutnya cari kode <div class='menu> atau sejenisnya sabat tergantung pada tamplate blog yang intinya sejajar dengan menu navbar ya sahabat.
untuk warna biru silahkan sahabat ganti dengan URL Blog sahabat dan untuk tulisan "true" silahkan sahabat ganti "false" bila sahabat tidak memasang dengan gambar
dan yang terakir sahabat cari kode atau lebih jelasnya tulisan biar sahabat ga bingung untuk menaruhnya. <!--Page Navigation Ends -->
setelah ketemu sahabat tempelkan kode di bawah ini tepat di atasnya yang sudah ada di ganti dengan kode di bawah ini.yang terpenting kode sebelumnya sahabat ganti semua biar hasilnya meyakinkan.
lalu save sahabat bila sahabat belum yakin silahkan sahabat tinjau terlebih dahulu
selesai deh sahabat untuk memodifikasi search
namun alangkah baiknya bila kita tetap memodifikasi search yang ada pada navbar blog kita.
ok sahabat langsung ajja ya biar ga terlalu bingung dan ga tahan lagi gimana caranya?
langsung ajja sahabat langsung ajjj login ke blog sahabat setelah login sahabat ke layout dan klik template dan edit HTML.
nah sebelum sahabat memasang nya anna sarankan ada baiknya untuk di simpan dulu tamplate sahabat jaga-jaga.Saabat temukan kode search di CCS sahabat seali lagi anna sarankan untuk mengganti kode di khawatirkan ada dua search biar tetap satu dan sebaris dengan navbar.
langsung ajja sahabat kode di bawah ini di atas ]]></b:skin>
#search-form-feed {float:right; width:180px;top:9px; position:relative; margin:0 10px 10px; padding:0 0; font:normal normal 11px Arial,Sans-Serif; color:#333; }
#feed-q-input { display:block; width:100%; border:2px solid #bbb; background-color:green; padding:0px 5px; font:normal bold 13px Tahoma,Arial,Sans-Serif; color:#ccc; margin:0 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2); box-shadow:inset 0 1px 5px rgba(0,0,0,.2); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#feed-q-input:focus { border-color:#0D6786; color:#333; outline:none; -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95; -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95; box-shadow:0 0 5px #153E95,0 0 7px #153E95; }
#search-result-container { width:400px; height:300px; overflow:auto; position:absolute; top:100%; right:0; z-index:999; background-color:#E5EDF7; border:2px solid white; padding:10px 10px 0; margin:10px 0 0; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; }
#search-result-container mark { background-color:yellow; color:black; }
#search-result-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:12px; display:block; }
#search-result-container a:hover { color:#052748; }
#search-result-container h4 { margin:0 0 10px; font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif; color:#B50001; }
#search-result-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0; }
#search-result-container li { margin:0 0 1px; padding:7px 8px; list-style:none; border:1px solid #B7C1CE; background-color:green; overflow:hidden; word-wrap:break-word; }
#search-result-container li img { display:block; float:left; margin:0 10px 4px 0; border:1px solid #B7C1CE; background-color:#F5F5F5; padding:2px 2px; }
#search-result-loader { position:absolute; top:100%; left:5px; z-index:999; background-color:#0D6786; color:white; padding:3px 5px; margin:-2px 0 0; font:normal bold 10px 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; }
.go-top { position: fixed; bottom: 2em; right: 2em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); }
.status-msg-body {width:350px;
text-align: center;position: relative;
padding: 0.3em 0px;
z-index: 4;
}
#feed-q-input { display:block; width:100%; border:2px solid #bbb; background-color:green; padding:0px 5px; font:normal bold 13px Tahoma,Arial,Sans-Serif; color:#ccc; margin:0 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2); box-shadow:inset 0 1px 5px rgba(0,0,0,.2); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#feed-q-input:focus { border-color:#0D6786; color:#333; outline:none; -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95; -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95; box-shadow:0 0 5px #153E95,0 0 7px #153E95; }
#search-result-container { width:400px; height:300px; overflow:auto; position:absolute; top:100%; right:0; z-index:999; background-color:#E5EDF7; border:2px solid white; padding:10px 10px 0; margin:10px 0 0; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; }
#search-result-container mark { background-color:yellow; color:black; }
#search-result-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:12px; display:block; }
#search-result-container a:hover { color:#052748; }
#search-result-container h4 { margin:0 0 10px; font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif; color:#B50001; }
#search-result-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0; }
#search-result-container li { margin:0 0 1px; padding:7px 8px; list-style:none; border:1px solid #B7C1CE; background-color:green; overflow:hidden; word-wrap:break-word; }
#search-result-container li img { display:block; float:left; margin:0 10px 4px 0; border:1px solid #B7C1CE; background-color:#F5F5F5; padding:2px 2px; }
#search-result-loader { position:absolute; top:100%; left:5px; z-index:999; background-color:#0D6786; color:white; padding:3px 5px; margin:-2px 0 0; font:normal bold 10px 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; }
.go-top { position: fixed; bottom: 2em; right: 2em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); }
.status-msg-body {width:350px;
text-align: center;position: relative;
padding: 0.3em 0px;
z-index: 4;
}
selanjutnya cari kode <div class='menu> atau sejenisnya sabat tergantung pada tamplate blog yang intinya sejajar dengan menu navbar ya sahabat.
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onkeyup='resetField();' placeholder='Telusuri...' type='text'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Tunggu sebentar sahabat...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
url: "http://desalinggajati.blogspot.com/", // URL Blog
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // `true` jika ingin menampilkan deskripsi posting
summaryLength: 400, // Jumlah karakter ringkasan posting
resultTitle: "", // Judul hasil pencarian
noResult: "No result", // Deskripsi `tak ditemukan`
resultThumbnail: true, // `true` untuk menampilkan thumbnail posting
thumbSize: 40, // Ukuran & resolusi thumbnail
fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js'/>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onkeyup='resetField();' placeholder='Telusuri...' type='text'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Tunggu sebentar sahabat...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
url: "http://desalinggajati.blogspot.com/", // URL Blog
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // `true` jika ingin menampilkan deskripsi posting
summaryLength: 400, // Jumlah karakter ringkasan posting
resultTitle: "", // Judul hasil pencarian
noResult: "No result", // Deskripsi `tak ditemukan`
resultThumbnail: true, // `true` untuk menampilkan thumbnail posting
thumbSize: 40, // Ukuran & resolusi thumbnail
fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js'/>
dan yang terakir sahabat cari kode atau lebih jelasnya tulisan biar sahabat ga bingung untuk menaruhnya. <!--Page Navigation Ends -->
setelah ketemu sahabat tempelkan kode di bawah ini tepat di atasnya yang sudah ada di ganti dengan kode di bawah ini.yang terpenting kode sebelumnya sahabat ganti semua biar hasilnya meyakinkan.
<script type='text/javascript'>
//<![CDATA[
function showpageCount(n){var h=home_page_url;var f=new Array();var m=1;var c=1;var q=0;var s=0;var d=0;var e="";var a="";var o="";for(var l=0,k;k=n.feed.entry[l];l++){var r=k.published.$t.substring(0,19)+k.published.$t.substring(23,29);timestamp=encodeURIComponent(r);var t=k.title.$t;if(t!=""){if(q==0||(q%pageCount==(pageCount-1))){if(h.indexOf(timestamp)!=-1){m=c}if(t!=""){c++}f[f.length]="/search?updated-max="+timestamp+"&max-results="+pageCount}}q++}for(var g=0;g<f.length;g++){if(g>=(m-displayPageNum-1)&&g<(m+displayPageNum)){if(s==0&&g==m-2){if(m==2){a='<span class="showpage"><a href="/">'+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+f[g]+'">'+upPageWord+"</a></span>"}s++}if(g==(m-1)){e+='<span class="showpagePoint">'+m+"</span>"}else{if(g==0){e+='<span class="showpageNum"><a href="/">1</a></span>'}else{e+='<span class="showpageNum"><a href="'+f[g]+'">'+(g+1)+"</a></span>"}}if(d==0&&g==m){o='<span class="showpage"> <a href="'+f[g]+'">'+downPageWord+"</a></span>";d++}}}if(m>1){e=""+a+" "+e+" "}e='<div class="showpageArea"><span style="display:none;COLOR: #f2f2f2;font-weight:normal;text-transform:none;border:1px solid #000;background:#253991;" class="showpageOf">Total Pages ('+(c-1)+")</span>"+e;if(m<(c-1)){e+=o}if(c==1){c++}e+="</div>";var b=document.getElementsByName("pageArea");var j=document.getElementById("blog-pager");if(c<=2){e=""}for(var g=0;g<b.length;g++){b[g].innerHTML=e}if(b&&b.length>0){e=""}if(j){j.innerHTML=e}}function showpageCount2(r){var l=home_page_url;var k=new Array();var g=l.indexOf("/search/label/")!=-1;var d=g?l.substr(l.indexOf("/search/label/")+14,l.length):"";d=d.indexOf("?")!=-1?d.substr(0,d.indexOf("?")):d;var q=1;var e=1;var t=0;var v=0;var f=0;var h="";var a="";var s="";var c='<span class="showpageNum"><a href="/search/label/'+d+"?&max-results="+pageCount+'">';var l=home_page_url;for(var o=0,n;n=r.feed.entry[o];o++){var u=n.published.$t.substring(0,19)+n.published.$t.substring(23,29);timestamp=encodeURIComponent(u);var w=n.title.$t;if(w!=""){if(t==0||(t%pageCount==(pageCount-1))){if(l.indexOf(timestamp)!=-1){q=e}if(w!=""){e++}k[k.length]="/search/label/"+d+"?updated-max="+timestamp+"&max-results="+pageCount}}t++}for(var j=0;j<k.length;j++){if(j>=(q-displayPageNum-1)&&j<(q+displayPageNum)){if(v==0&&j==q-2){if(q==2){a=c+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+k[j]+'">'+upPageWord+"</a></span>"}v++}if(j==(q-1)){h+='<span class="showpagePoint">'+q+"</span>"}else{if(j==0){h=c+"1</a></span>"}else{h+='<span class="showpageNum"><a href="'+k[j]+'">'+(j+1)+"</a></span>"}}if(f==0&&j==q){s='<span class="showpage"> <a href="'+k[j]+'">'+downPageWord+"</a></span>";f++}}}if(q>1){if(!g){h=""+a+" "+h+" "}else{h=""+a+" "+h+" "}}h='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">Pages ('+(e-1)+")</span>"+h;if(q<(e-1)){h+=s}if(e==1){e++}h+="</div>";var b=document.getElementsByName("pageArea");var m=document.getElementById("blog-pager");if(e<=2){h=""}for(var j=0;j<b.length;j++){b[j].innerHTML=h}if(b&&b.length>0){h=""}if(m){m.innerHTML=h}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]>
</script>
//<![CDATA[
function showpageCount(n){var h=home_page_url;var f=new Array();var m=1;var c=1;var q=0;var s=0;var d=0;var e="";var a="";var o="";for(var l=0,k;k=n.feed.entry[l];l++){var r=k.published.$t.substring(0,19)+k.published.$t.substring(23,29);timestamp=encodeURIComponent(r);var t=k.title.$t;if(t!=""){if(q==0||(q%pageCount==(pageCount-1))){if(h.indexOf(timestamp)!=-1){m=c}if(t!=""){c++}f[f.length]="/search?updated-max="+timestamp+"&max-results="+pageCount}}q++}for(var g=0;g<f.length;g++){if(g>=(m-displayPageNum-1)&&g<(m+displayPageNum)){if(s==0&&g==m-2){if(m==2){a='<span class="showpage"><a href="/">'+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+f[g]+'">'+upPageWord+"</a></span>"}s++}if(g==(m-1)){e+='<span class="showpagePoint">'+m+"</span>"}else{if(g==0){e+='<span class="showpageNum"><a href="/">1</a></span>'}else{e+='<span class="showpageNum"><a href="'+f[g]+'">'+(g+1)+"</a></span>"}}if(d==0&&g==m){o='<span class="showpage"> <a href="'+f[g]+'">'+downPageWord+"</a></span>";d++}}}if(m>1){e=""+a+" "+e+" "}e='<div class="showpageArea"><span style="display:none;COLOR: #f2f2f2;font-weight:normal;text-transform:none;border:1px solid #000;background:#253991;" class="showpageOf">Total Pages ('+(c-1)+")</span>"+e;if(m<(c-1)){e+=o}if(c==1){c++}e+="</div>";var b=document.getElementsByName("pageArea");var j=document.getElementById("blog-pager");if(c<=2){e=""}for(var g=0;g<b.length;g++){b[g].innerHTML=e}if(b&&b.length>0){e=""}if(j){j.innerHTML=e}}function showpageCount2(r){var l=home_page_url;var k=new Array();var g=l.indexOf("/search/label/")!=-1;var d=g?l.substr(l.indexOf("/search/label/")+14,l.length):"";d=d.indexOf("?")!=-1?d.substr(0,d.indexOf("?")):d;var q=1;var e=1;var t=0;var v=0;var f=0;var h="";var a="";var s="";var c='<span class="showpageNum"><a href="/search/label/'+d+"?&max-results="+pageCount+'">';var l=home_page_url;for(var o=0,n;n=r.feed.entry[o];o++){var u=n.published.$t.substring(0,19)+n.published.$t.substring(23,29);timestamp=encodeURIComponent(u);var w=n.title.$t;if(w!=""){if(t==0||(t%pageCount==(pageCount-1))){if(l.indexOf(timestamp)!=-1){q=e}if(w!=""){e++}k[k.length]="/search/label/"+d+"?updated-max="+timestamp+"&max-results="+pageCount}}t++}for(var j=0;j<k.length;j++){if(j>=(q-displayPageNum-1)&&j<(q+displayPageNum)){if(v==0&&j==q-2){if(q==2){a=c+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+k[j]+'">'+upPageWord+"</a></span>"}v++}if(j==(q-1)){h+='<span class="showpagePoint">'+q+"</span>"}else{if(j==0){h=c+"1</a></span>"}else{h+='<span class="showpageNum"><a href="'+k[j]+'">'+(j+1)+"</a></span>"}}if(f==0&&j==q){s='<span class="showpage"> <a href="'+k[j]+'">'+downPageWord+"</a></span>";f++}}}if(q>1){if(!g){h=""+a+" "+h+" "}else{h=""+a+" "+h+" "}}h='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">Pages ('+(e-1)+")</span>"+h;if(q<(e-1)){h+=s}if(e==1){e++}h+="</div>";var b=document.getElementsByName("pageArea");var m=document.getElementById("blog-pager");if(e<=2){h=""}for(var j=0;j<b.length;j++){b[j].innerHTML=h}if(b&&b.length>0){h=""}if(m){m.innerHTML=h}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]>
</script>
lalu save sahabat bila sahabat belum yakin silahkan sahabat tinjau terlebih dahulu
selesai deh sahabat untuk memodifikasi search
