Cara Buat Google Search Custome di Blog

Didalam setingan Blogger bersama-sama sudah disediakan untuk memasang Google Search atau Google pencarian yang sudah disediakan, Tool ini sangat memiliki kegunaan untuk meningkatkan Trafik pada Blog kita, cara pemasangannya pun cukup mudah, namun banyak juga dari Blogger yang mungkin belum mengetahuinya, nah untuk itu di postingan kali ini aku akan menyebarkan Cara Buat Google Search Custome di Blog, bagaimana cara memasangnya mari kita simak berikut ini.

Langkah Pertama

Silahkan sahabat Login terlebih dahulu di Blogger lalu masuk ke Google Custom Search, kemudian buat kotak pencarian isikan sesuai petunjuk lebih jelasnya dapat dilihat pada gambar ini.

Langkah Kedua

Setelah di input data yang dibutuhkan sesuai petunjuk gambar kemudian klik tombol Create maka akan muncul otomatis halaman baru, halaman ini untuk memodifikasi tampilan pada Google Search yang nantinya akan di tempatkan pada Blog untuk memodifikasinya Klik tombol Control Panel.

Langkah Ke Tiga

Pilih Menu Tab Layout diatas lalu Lihat menu sebelah kiri pilih menu Look and Feel lalu pilih sesuai cita-cita tampilan yang sahabat mau, disini aku memilih tampilan Two Column, setelah itu klik Save.

Langkah Ke Empat

Masih di Menu Look and Feel kemudiah beralih ke menu tab Theme pilih yang tampilan Default saja lalu Klik Save.

Langkah Ke Lima

Setelah mensetting tampilannya lanjut kita ke menu Setup lihat sebelah kiri kemudian pilih Menu Tab Basic lalu Cari tombol Search Engine ID Klik nanti akan muncul aba-aba ID yang nantinya aba-aba tersebut akan dipasang pada Blog. Disini kalau sahabat sudah punya account Adsense mampu secara otomatis di kaitkan pada Tab Make Money lalu aktifkan Adsensenya.

Langkah Ke Enam

Setelah Setingan dirasa cukup dan aba-aba ID sudah sahabat catat, kemudian kita beralih ke Blog untuk kita mulai Memasang Google Search Custome di Blog, caranya silahkan ikuti petunjuk berikut, silahkan sahabat gunakan aba-aba dibawah ini gunanya nanti untuk menampilkan kotak pencariannya, silahkan sahabat simpan masuk ke menu edit HTML, aba-aba di bawah ini mampu juga sahabat simpan di Sidebar pada Tata Letak.

<div id='search-box'> <div id='gcsengine'></div> <div id='gcsresults'></div> </div>

Langkah Ke Tujuh
Silahkan salin aba-aba CSS berikut ini simpan sempurna diatas aba-aba </head> pada Edit HTML

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

Setelah aba-aba terpasang jikalau ingin mengatur lebar kotak pencariannya mampu sahabat atur pada aba-aba width di CSS #search-box silahkan atur sesuai dengan lebar yang diinginkan.


Langkah Ke Delapan
Langkah selanjutnya silahkan salin aba-aba Javascript dibawah ini letakkan sempurna diatas aba-aba </body> atau jikalau ingin men-defer kodenya mampu juga.

<script type='text/javascript'> //<![CDATA[ var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="014007477998218462268:3Amvl5k-toztq",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>

Perhatikan aba-aba yang ditandai silahkan ganti dengan aba-aba Search Engine ID Blog yang tadi sahabat catat perhatikan kembali pada langkah ke lima diatas.

Kotak pencarian yang di buat ini sudah valid dengan HTML5, maka dari itu dimodify dengan aba-aba diatas sebab default aba-aba dari dari Google Search yang diberikan belum Valid HTML5, Jika sebelumnya di blog sahabat ada kotak pencariannya, silahkan ikuti dimulai dari langkah ke-3 cara diatas.