-->
fLWeAsNtTDyJ8LBwFzvbLJXLfZMxZVmQ7RFnAnMp
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.
Cara Mudah Pasang Google Custom Search di Widget Blog

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.
Search Engine Google

Gambar 1
 Pencarian Artikel Blog yang menuju pada Mesin Pencarian Google

Rapi Serui

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

Related Posts

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

Post a comment