Jan 30, 2017

Cara Buat Google Search Custome di Blog

gsce

Didalam setingan Blogger sebenarnya sudah disediakan untuk memasang Google Search atau Google pencarian yang sudah disediakan, Tool ini sangat berguna 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 saya akan berbagi Cara Buat Google Search Custome di Blog, bagaimana cara memasangnya mari kita simak berikut ini.


Langkah Pertama
Silahkan sobat 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.

cse1

Langkah Kedua
Setelah di input data yang diperlukan 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.

cse2

Langkah Ke Tiga
Pilih Menu Tab Layout diatas lalu Lihat menu sebelah kiri pilih menu Look and Feel lalu pilih sesuai keinginan tampilan yang sobat mau, disini saya memilih tampilan Two Column, setelah itu klik Save.

cse3

Langkah Ke Empat
Masih di Menu Look and Feel kemudiah beralih ke menu tab Theme pilih yang tampilan Default saja lalu Klik Save.
cse4
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 kode ID yang nantinya kode tersebut akan dipasang pada Blog. Disini kalau sobat sudah punya account Adsense bisa secara otomatis di kaitkan pada Tab Make Money lalu aktifkan Adsensenya.

cse5

Langkah Ke Enam
Setelah Setingan dirasa cukup dan kode ID sudah sobat catat, kemudian kita beralih ke Blog untuk kita mulai Memasang Google Search Custome di Blog, caranya silahkan ikuti petunjuk berikut, silahkan sobat gunakan kode dibawah ini gunanya nanti untuk menampilkan kotak pencariannya, silahkan sobat simpan masuk ke menu edit HTML, kode di bawah ini bisa juga sobat simpan di Sidebar pada Tata Letak.
<div id='search-box'>
<div id='gcsengine'></div>
<div id='gcsresults'></div>
</div>


Langkah Ke Tujuh
Silahkan salin kode CSS berikut ini simpan tepat diatas kode </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 kode terpasang jika ingin mengatur lebar kotak pencariannya bisa sobat atur pada kode width di CSS #search-box silahkan atur sesuai dengan lebar yang diinginkan.


Langkah Ke Delapan
Langkah selanjutnya silahkan salin kode Javascript dibawah ini letakkan tepat diatas kode </body> atau jika ingin men-defer kodenya bisa 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 kode yang ditandai silahkan ganti dengan kode Search Engine ID Blog yang tadi sobat catat perhatikan kembali pada langkah ke lima diatas.

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

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.