Cara Membuat Kotak Pencarian Google Search Engine Valid HTML 5
Cara membuat tombol search kotak pencarian google valid HTML 5 di blog sendiri sangat mudah dilakukan, Google Custom Search adalah pencarian google khusus menelusuri blog kita saja yang di tampilkan pada mesin pencari tersebut, jadi menambah visitor dan penelusuran pada blog anda, untuk membuat search engine blog anda khusus juga mningkatkan penghasilan adsense melalui google penelusuran khusus, selahkan anda cermati langkah membuat tombol mesin pencari di blog melayang keren akan saya jabarkan, langsung saja menuju tutorial dengan mengcopy ID Mesin telusur di blog seperti gambar.- Pertama anda harus menuju ke Google Pencarian Custom untuk mendapatkan ID pencarian dan membuat kotak pencarian blog anda.
- Kedua klik tombol buat dengan memasukan url blog anda dengan username pencarian google di bawahnya seperti gambar.
- Jika sudah tahap selanjutnya adalah dengan klik Control Panel.
- Pilih tampilan lay out 2 kolom, dan pilih tema secara default lalu save.
- Pada menu basic tab setup pengaturan silahkan anda klik ID MESIN TELUSUR dan copy.
Selanjutnya kita hanya akan memasangnya pada blog di kotak pencarian blog anda, namun anda memerlukan kode di bawah ini agar kotak pencarian HTML blog anda muncul, atau anda bisa save pada tambahkan gadget HTML/Javascript pada menu tata letak blog anda.
<div id='search-box'>
<div id='gcsengine'></div>
<div id='gcsresults'></div>
</div>Copy kode CSS penting ini dan segera taruh di atas kode </head> dan klik simpan
<style type='text/css'>
#search-box{width:100%;padding:0;margin:0 auto}
.gsc-results-wrapper-visible{background:#fff;padding:0 0 10px!important;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border:1px solid #ddd!important;width:400px;height:auto;max-height:500px;position:absolute!important;top:100%;right:0;z-index:10000;margin:10px 0 0;overflow:auto}
.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;}
.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}
input.gsc-search-button{margin-top:3px!important;margin-left:0!important}
.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}
#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}
a.gsst_a{line-height:1}
.gsc-result .gs-title{height:auto!important;word-wrap:break-word}
.gsc-results-wrapper-visible table.gsc-search-box{position:relative}
.gsc-results-wrapper-visible table{border-collapse:collapse;border-spacing:0}
.gsc-results-wrapper-visible table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
.gsc-results-wrapper-visible table.gsc-search-box td.gsc-input{padding-right:5px!important}
.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:80px!important}
.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}
.gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important;transition:all .4s ease-in-out}
.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}
.gs-result .gs-snippet{font-weight:400;word-wrap:break-word}
.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{color:000!important;transition:all .4s ease-in-out}
.gsc-orderby-container{padding-right:10px!important;}
@media screen and (max-width:414px){.gsc-results-wrapper-visible{width:100%!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
}
</style> Tahap selanjutnya Copy seluruh javasript ini dan simpan taruh di atas kode </body> atau jika anda ingin lebih cepat anda bisa men defer kode penting javascript ini.
<script type='text/javascript'>
//<![CDATA[
var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="015076181515194632031:1uf30dyump0",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}();
function myFunction() {
document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>";
}myFunction();
//]]>
</script>Yang saya tandai tersebut silahkan ganti dengan ID yang terakhir anda copy tadi atau yang berhasil anda buat tadi pada Google Pencarian Custom, kotak pencarian melayang ini sudah valid HTML 5 padahal sebenarnya kotak pencarian google tidak valid HTML 5 namun ini sudah valid, jikalau anda pernah membuat atau sudah punya idnya maka tinggal melakukan langkah ke 3 untuk selanjutnya anda mempraktekanya, jangan lupa jika publisher adsense maka aktifkan make money pada Google Custom Search pada menu adsense.
