Cara Memasang Mesin Pencari Google di Blog

Kotak pencarian atau dalam bahasa blogger blogspot dikenal dengan widget search box adalah halaman pencarian artikel pada blog, Widget ini dirasa wajib untuk dipasang diblog. karena dengan tambahan search button ini dapat memudahkan pengunjung atau visitor blog lebih mudah menemukan artikel yang dicari.

Membuat kotak pencarian di blog bukanlah hal yang sulit, anda pasti bisa memasang dengan mudah walaupun tidak mengenal kode html. Widget kotak pencarian yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan berbagai perangkat mobile. hal ini sangat penting karena hampir 50-80% pengunjung saat ini menggunakan perangkat mobile.

Cara memasang google search widget di blog ini. Buat Sobat yang ingin punya mesin pencari tersikronisasi langsung dengan google, tentu Sobat kurang puas dengan search engine yang oleh blogspot, kali ini saya akan berbagi tips cara memasang google search engine widget yang tersikronisasi langsung dengan server om google sehingga Sobat tidak perlu membuka situs google terlebih dahulu, dan Sobat bisa langsung mencari kata kunci yang hasilnya 100% sama dengan Sobat membuka situs www.google.com silahkan baca artikel ini sampe tuntas.

Ada 2 macam kotak mesin pencari yang akan saya berikan


1. Kotak Mesin Pencari A

Screenshot

Untuk memasang google search widget ini :

1. Sobat login dulu di blogger

2. kemudian masuk ke halaman tata letak lalu tambahkan page element

3. pilih yang html/javascript.

4. copy paste kode dibawah ini

<form action="http://www.google.com/search" method="get"> <input onfocus="this.style.background='#fff';" maxlength="255" value="" type="text"onblur="if(this.value=='')this.style.background='#fff url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/378838_330830376943004_100000481334871_1329781_1354208778_n.jpg) 3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fff url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/378838_330830376943004_100000481334871_1329781_1354208778_n.jpg) 3px center no-repeat; position:relative;" size="25" name="q"/> <input id="btn_undefined" style="position:absolute;padding-left:5px;" value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png" type="image"/><br/> <div style="margin-top:5px;"> <li style="display:inline;padding-right:10px;margin-top:5px;"> <input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li> <li style="display:inline;padding-right:10px;margin-top:5px;"> <input checked="checked" value="http://blogSobat.blogspot.com" name="sitesearch" type="checkbox"/>Blog Sobat</li> </div> </form>

keterangan : Ganti warna dan link gambar sesuai selera. Link url web/blog ganti dengan link url web/blog nya Sobat.

5. setelah semuanya selesai, simpan dan jadi deyh...^_^

Update 07/02/2019

2. Kotak Mesin Pencari B

Cara yang kedua ini merupakan cara paling mudah yang bisa anda lakukan tanpa edit HTML. Kotak mesin pencari ini saya gunakan & terlihat dibawah judul blog. Untuk meletakkan dibawah judul blog, anda harus sedikit mengerti kode html blog anda. Jika anda tertarik silahkan ikuti tutorial berikut ini:

1. Login akun Blogger anda.

2. Pilih menu “Tata Letak” kemudian pilih Add Gagdet, lalu pilih “HTML/Javascript”

3. Copy dan Paste kode berikut ini kedalam kolom “HTML/Javascript”

<style> #search-box {position: relative;width: 100%;margin: 0;} #search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;} #search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;} #search-box input[type="text"] {width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;} #search-button {position: absolute;top: 0;right: 0;height: 42px; width: 80px;font-size: 14px;color: #fff;text-align: center; line-height: 42px;border-width: 0;background-color: #1a7db7; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer;} </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Cari Artikel Disini...' type='text'/> <button id='search-button' type='submit'><span>Search</span></button> </form> </div>

4. Selesai, jangan lupa klik Save/Simpan

Demikian 2 cara membuat kotak pencarian di blog semoga dapat bermanfaat, silahkan untuk praktek di blog pribadi anda. Selamat Mencoba.

Share this post