cara memodifikasi search --> Skip to main content

follow us

DATA COVID-19 INDONESIA

😷 Positif:

😊 Sembuh:

😭 Meninggal:

(Data: kawalcorona.com)

cara memodifikasi search

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>


#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;
}

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'/>

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.

<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>

lalu save sahabat bila sahabat belum yakin silahkan sahabat tinjau terlebih dahulu
selesai deh sahabat untuk memodifikasi search

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar