Cara Mudah Pasang Google Custom Search di Widget Blog - Erend Elektronik

Cara Mudah Pasang Google Custom Search di Widget Blog - Andai saja yang kita genggam itu alamat palsu seperti yang didendangkan Ayu Ting Ting, maka kita perlu kolom pencarian yang akurat agar tidak kesasar. Kolom pencarian sebuah website atau blog sangat diperlukan ketika Older Posts dan Newer Post pada blog kita dihilangkan karena mengandung internal link yang menurut pakat SEO kurang bagus untuk perkembangan web/blog kita.

Pada Blog Rapi Serui ini kolom pencarian ada dua buah, satu di halaman blog dan yang satunya saya pasang di widget blog. Kotak Pencarian yang berada di halaman blog adalah yang menuju langsung pada blog ini, silahkan dibuka saja untuk melihat demonya disini pada "Pencarian Artikel Lainnya". Sedangkan yang dipasang pada widget blog adalah kotak pencarian blog yang menuju pada search engine Google.

Gambar 1
 Pencarian Artikel Blog yang menuju pada Mesin Pencarian Google

Gambar 2
Pencarian Artikel Blog yang menuju pada artikel blog ini 

Menurut pakar SEO pencarian artikel yang menuju pada mesin pencari google adalah sangat perlu karena hal ini bisa membantu mesin pencari google dalam pengindeksian artikel blog kita.

1. Kode HTML ini Tambahkan pada Kolom HTML/Javascrift pada draf Tata Letak blog sobat :

<div id='search-box'>
<form id='search-form' method='get' target='_blank' action='https://google.com/search'>
  <input name='q' placeholder='Cari Google...' type='text'/>
  <input id='search-button-top' type='submit' value=''/>
  <input name='domains' type='hidden' value='https://www.rapiserui.com'/>
  <input name='sitesearch' type='hidden' value='https://www.rapiserui.com'/>
  <input name='ie' type='hidden' value='UTF-8'/>
  <input name='hl' type='hidden' value='id'/>
<button id='search-button' type='submit'><span class="icon"><i class="fa fa-search"></i></span></button>
</form>
</div>

Keterangan :
Link https://rapiserui.com/ ganti dengan Url blog sobat

2. Kode style  CSS ini pastekan diatas penutup skin atau penutup style blog sobat :

#search-box{box-shadow:0 0 8px #444;position:relative;margin:0 auto;border:1px solid #ccc;padding:8px; border:4px}
#search-form{height:40px;background-color:#01a3a4;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:#01a3a4;line-height:15px}
#search-box input[type=&quot;text&quot;]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#01a3a4;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}
.snipter{max-height: calc(23px * 3); overflow: hidden;}
.search {float: left; margin: 0 0;}
.search h3{display:none;}
.search-submit-container button {border: 0 none; background:#01a3a4; color: #9babce; cursor: pointer; font-size: 18px; margin: 10px 0 0 -40px; position: absolute;}
.search-input input {background:#4A5877; color:#01a3a4; padding:5px 5px; height:45px; border: none; text-indent:3px; border-radius:4px; width:750px; float:left; }
.search-input input::placeholder {color:#9babce;}
.search-input{padding:0 10px; margin:8px 0 0;}

Artikel Terkait