Membuat Google Search Engine Di Blog 2014

Membuat Google Search Engine Di Blog 2014

Bola Hero Gawai

Membuat Google Search Engine Di Blog 2014

Google Search Engine Di Blog 2014
Sebenarnya saya sudah pernah membuat tutorial cara menambahkan fungsi Google Search Engine atau Google Custom Search di blog. Namun karena pada waktu itu tutorialnya dibuat pada tahun 2012, maka tentunya langkah-langkah pembuatannya sudah tidak sesuai dengan tampilan GSE sekarang ini.


Untuk itu sekarang saya buat update tutorialnya agar tidak membingungkan bagi Anda yang ingin mencoba menambahkan GSE pada search box yang sudah ada di blog Anda.

Langkah Pertama
Silahkan Anda masuk DI SINI dan silahkan login dengan akun Google Anda.

Halaman login Google Search Engine

Langkah Kedua
Silahkan klik tombol "Add" untuk mulai membuat Google Search Engin untuk blog Anda.

Add Google Search Engine

Langkah Ketiga
Kemudian pada halaman yang tersedia silahkan tambahkan url blog Anda tanpa "http" seperti tertera pada contohnya. Kemudian beri nama untuk Search Engine blog Anda pada kotak di bawahnya, setelah itu silahkan klik tombol "Create".

Setup Google Search Engine

Langkah Keempat
Kemudian pada halaman selanjutnya silahkan klik tombol "Control Panel"

Halaman Sukses Menambahkan Google Search Engine

Langkah Kelima
Pada halaman selanjutnya pada menu "Setup" silahkan klik tombol "Search engine ID" dan silahkan copy search engine ID blog Anda ke notepad. Setelah itu silahkan klik tombol "Advanced" dan pilih "West European Latin-1 (ISO-8859-1)" pada option "Search engine encoding".

Halaman Search Engine ID

Search Engine Encoding

Langkah Keenam
Silahkan klik menu "Look And Feel" di kiri atas dan pada option "Layout" silahkan pilih "Results only" kemudian klik tombol "Save & Get Code"

Look And Feel

Langkah Ketujuh
Pada halaman berikutnya silahkan copy kode yang disediakan dan silahkan buat postingan baru pada Page Statis (halaman statis) blog Anda dan paste kode tersebut pada editor HTML, silahkan beri title untuk halaman tersebut misalnya "Blog Anda Search Results" kemudian publish postingan tersebut dan catat URL postingan statisnya.

Get Code Google Search Engine

Langkah Kedelapan
Pada langkah ini kita akan menyematkan Google Search Engine pada search box yang sudah ada di blog kita. Sebagai contoh saya akan memakai search box yang menyerupai search box Google dari tutorial yang lalu.

Baca juga: Membuat Search Box Blog Seperti Search Box Google

Kode HTML dari search box tersebut tampak seperti di bawah ini


<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Perhatikan kode di bawah ini


<form id='searchform' action='/search' method='get' target='_blank'>

Silakan ganti kode di atas menjadi seperti di bawah ini


<form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>

Silahkan ganti URL POSTINGAN STATIS PADA LANGKAH KETUJUH dengan URL page statis untuk Search Results yang Anda buat pada langkah ketujuh tadi.

Kemudian tambahkan kode di bawah ini setelah kode tadi


<input type='hidden' name='cx' value='partner-pub-KODE SEARCH ENGINE ID DARI LANGKAH KELIMA' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />

Silahkan ganti KODE SEARCH ENGINE ID DARI LANGKAH KELIMA dengan kode search engine ID yang Anda peroleh dari langkah kelima di atas.

Maka secara komplit setelah ada perubahan dan penambahan, penampakan kode HTML dari search box di atas akan seperti di bawah ini.


<div id='search'>
<form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>
<input type='hidden' name='cx' value='KODE SEARCH ENGINE ID DARI LANGKAH KELIMA' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Selesai...sampai di sini kita sudah menyematkan Google Search Engine pada search box blog. 

Anda juga bisa mencoba beberapa tema tampilan search results yang bisa Anda pilih pada menu "Look And Feel" seperti pada langkah keenam. Selahkan pilih satu tema kemudian "Save". Untuk melihat tema yang kita pilih silahkan lihat pada search results blog kita. Silahkan lakukan searching di blog kita untuk mendapatkan search results-nya. Jika ingin mencoba tema lainnya silahkan pilih lagi pada menu "Look And Feel" di halaman Google Search engine kemudian "Save" kemudian silahkan refresh halaman search results-nya untuk melihat perubahannya. Lakukan seperti itu untuk mencoba tema-tema lainnya. Anda juga bisa melakukan customize pada tampilan search results-nya pada option "Customize" di halaman "Look And Feel"

Setelah melakukan beberapa perubahan di menu "Look And Feel", Anda hanya perlu "Save" tidak perlu melakukan "Save And Get Code" kemudian refresh halaman hasil pencariannya untuk melihat perubahannya.

Di sini juga sering terdapat kasus tampilan hasil percariannya menjadi kotak-kotak dengan border. Itu karena terdapat kode CSS untuk table dengan border di HTML template Anda. Silahkan atur dengan tag conditional untuk halaman hasil percariannya dengan menghilangkan border pada table seperti berikut ini misalnya untuk contoh tag conditionalnya:


<b:if cond='data:blog.url == &quot;URL POSTINGAN STATIS UNTUK SEARCH RESULTS&quot;'>
<style type='text/css'>
table {border:0}
</style>
</b:if>

Pada tag conditional di atas juga Anda bisa membuat CSS untuk melebarkan halaman hasil pencarian menjadi full halaman dengan menghilangkan beberapa elemen lainnya misalnya sidebar jika lebar halaman statis blog Anda belum full halaman.

Sekedar Tambahan
Jika Anda memiliki akun Adsense, maka Anda bisa mengintegrasikan adsense Anda pada Google Custom Search Engine blog Anda pada menu Setup >> Making Money, silahkan Anda pelajari sendiri cara menghubungkan adsense Anda dengan Search Engine blog Anda pada link yang disediakan di sana. Atau silahkan baca postingan cara menghubungkan Adsense dengan Google Custom Search blog DI SINI.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

105 Comments Add Comment

Keren infonya... mangstab lah

Balas

Sama-sama mas :)

Balas

Makasih mas :) semoga bisa dimengerti

Balas

lho? kok hari ini kita melakukan postingan sama mas heheheh

Balas

Iya sis padahal ga janjian ya hehhehe :) topiknya sama dan waktu publish-nya juga hampir sama hehehehe...

Balas

Tutorial yang bermanfaat untuk membuat google search
di blog, pasti versi nya Kang Adhy lebih di percaya untuk
Segalanya nih. saya coba dulu Kang, terima kasih :-bd

Balas

Sangat panjang keterangan tutorial membuat googl search 2014
Itu yah Kang? saya masih agak bingung, belajar dulu ni Kang Adhy

Balas

terimakasih search nya kang, cuman saya teh pengennya ngga merubah tata letak search yang udah ada, pengennya tampilannya tetep seperti aslinya, munculnya OOPS 404......dibawahnya muncul tulisan search googlenya sepotong....kode css yang diatas itu ngga ada ditemplate saya mah....dari kemaren ge' gituh kang....:D

Balas

pasti gara gara saya kan?...hayo ngaku deh ngaku....:p

Balas

penjelasannya komplit poool.....!, ijin nyimak komengnya temen-temen aja mas...!

Balas

Itu karena ditambah gambar kang jadi terasa panjang hehehe coba saja step by step sambil diparktekan langsung biar ga bingung.

Balas

Hehehehe iya kang :)

Balas

boleh dicoba nih :) hehee

Balas

Mudah-mudahan bisa dimengerti kang :)

Balas

untuk bikin postingan hasil pencariannya di Page Statis kang jangan di postingan biasa, Oops 404 itu kemungkinan akan ngambil URL tidak lengkap jadi error 404. Coba saja langkah-langkah tuturial ini, sengaja saya juga mengambil html search boxnya yang itu (search box mirip search box Google) dan search box ini juga dipakai di template Kompi Males. Coba saja cari kode ini kang <div id='search'> untuk search box Kompi Males-nya.

Balas

tuh, gara2 mas cilembu thea kami berdua melakukan postingan yang sama hari ini hehehe :)

Balas

Hehehe lumayan mas jarinya keriting :p

Balas

Silahkan sis :) mudah2an bisa dimengerti.

Balas

dengan menggunakan cara tersebut, apakah dihitung sebagai "pengunjung dari google" ?

Balas

Hehehehe iya :)

Balas

heuydeuh...saya teh lagi bokek hari ini kang...tapi gituh search nya bisa, setelah 3 hari ngoprek bahagia deh rasanya, sesaat terlupakan bokek nya....
rupanya postingan yang tak taro distatis/laman ku tadi teh di draft lupa dipublish...huh dasar katrok saya teh deh ih.

biarin neng Leony palingan ge senyum senyum liat kelakuan saya...sabarodo deh ah...:p

Balas

Sepertinya tidak mas, karena ini disimpan sebagai Google Custom Search sehingga tidak akan sama dengan Google Search, hanya dengan ini lebih memudahkan pencarian postingan di blog tersebut.

Balas

Tapi sepertinya masih ada kesalahan kang, coba masuk ke halaman Google Custom Search Engine-nya kemudian pada menu Look And Feel coba pilih layout Result Only kemudian SAVE.

Balas

Hehehe sekarang sudah OK... ini screenshot halaman hasil pencarian Cilembu http://prntscr.com/38nl6z :-bd

Balas

kunjungan rutin kang,jadi lebih profesional nih dengan penambahan kode ini yah kang

Balas

cara menghilangkan tombol "sortir menurut..." nya gimana kang??? kagak nyaman nih,,,

Balas

Hehehe iya mas jadi tampak lebih profesional :)

Balas

Di halaman Google Custom Search Engine nya masuk ke menu Search Features >> Advanced >> kemudian pada Results Sorting-nya matikan (OFF) ini ss-nya mas http://prntscr.com/38nuj9

Balas

ijin tes kang.
oya kang, saya suka penjelasan yang ada gambarnya, karena cepat mengerti. hehehe

Balas

@@, @@, panjang bener

Balas

Heheheh iya mas tapi jadi lumayan panjang halamannya :)

Balas

Hehehhe panjang karena ada gambarnya mas :)

Balas

Beberapa hari bertapa, eh, sekarang muncul dengan serba baru
Tampilan blog baru,
Kolom komentar baru,
Materi baru,
Pokoknya serba Fresh... :-d di pelajari dan siap di praktekan Kang.

Balas

Mas, bisa buatlkan tutorial content locker? Hehe :]

Balas

oh ya kang, maksudnya "url statis" itu apa ya ? maklum masih newbie

Balas

Hehheehe iya mas :) seminggu kemarin buntu banget buat postingan, karena kata si mbah harus buat postingan maka saya kepikiran untuk menjawab beberapa pertanyaan pada postingan Custom SE sebelumnya yang kebingungan karena tampilan halaman CSE nya telah berubah.

Jika lagi ga ada ide buat postingan maka biasanya blog jadi korbannya mas hehehehe jadinya tampilan blog ada yang berubah hehehehe.

Balas

pantesan hari itu saya nyoba gak jadi malah bingung...hehe
saya coba lagi,makasih mas sharingnya.

Balas

Sepertinya cara ini perlu dipraktekan nih mas :D tapi tunggu postingan di blog saya banyak dulu, soalnya baru buat blog baru :D hehe.

Balas

berhasil juga saya buat tapi mas jika mahu bikin search tidak terbuka pada new tab gimana?

Balas

berhasil mas,thanks

Balas

Siiippp mas :-bd

Balas

Heheheehe silahkan mas :)

Balas

Perhatika kode ini
<form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>
Silahkan hapus kode ini target='_blank'

Balas

Sama-sama mas :) semoga blognya tambah sukses :)

Balas

iya mas.... di tunggu tutorial tentang emoticonnya mas :)

Balas

keren mas mesin telusur ubasuaiannya bisa kita modifikasi sesuai kemauan kita ya mas :)
kapan2 dicoba nih :-bd

Balas

Hore sukses berhasil , berhasil horeeee .... hehe
yang saya tutor dri sini kang yg jadul itu .. cuma di edit sedikit biar maknyus tampilannya

Balas

Kebetulan google CSE ini udah aku pasang di blog saya mas dan sudah saya integrasikan pula dengan akun Google adsense saya. Tapi ada yang mau saya tanyakan mas. Maksudnya Postingan statis untuk search result itu maksudnya seperti apa ya mas Adi?

Balas

Mungkin maksudnya url halaman statis mas

Balas

Betul mbak, dan bisa dihubungkan dengan adsense juga.

Balas

Silahkan mas, mudah2an bisa dimengerti :)

Balas

Maksudnya itu postingan di halaman statis / page statis.

Balas

rasanya mas, ada 2 cara membuat search engine ya.
rasanya di program google adsense juga bisa bikin search engine mandiri via blog kayak gini.
bedanya bisa dapet duit recehan ya mas.

"-"

Balas

Kang nanya boleh gak kenapa mesti pake West European Latin-1 (ISO-8859-1)
bukan unicode atau yg lain??

Balas

punya saya juga sudah nih kang :D dari postingan disini sebelumnya :D makasih kan adhy

Balas

sayangnya ngga valid HTML5 kang, ada dobel "id search" nyah ...saya utak atik sampe mletik, malah amburadul, ya berhubung hampir subuh, kepaksa tak balikin dulu keasal.
moga saya makin pinter ah...do'ain atuh kang... :)

Balas

aku pernah coba buat google SE ini...tapi sekarang aku pake yg bawaan template saja......keep happy blogging always..salam dari Makassar :-)

Balas

Betul mas, akun adsense bisa dihubungkan dengan custom search engine di blog sehingga adsense bisa muncul di halaman hasil pencariannya.

Balas

Itu adalah standar karakter encoding yg digunakan di hampir semua sistem pertukaran data untuk berkomunikasi dalam bahasa-bahasa Eropa sampai Asia termasuk Indonesia atau mungkin bisa juga disebut sebagai karakter latin. Bisa disimak di wikipedia

Balas

Iya mas sama-sama :) senang bisa membantu

Balas

Salam blogger juga mas :) itu tergantung kenyamanan kita aja mas sebagai pengelola blog untuk memilih fitur search box-nya :)

Balas

bookmark dulu. Untuk sekarang masih suka dengan bawaan template.

Balas

Kalo saya sudah pakai trik yg dulu. Dan, saya rasa, tetep sama ya kang dgn postingan yg dulu. cuma ada yg baru memang pada GSE-nya @@,

Balas

Silahkan mas :)

Balas

Betul mas :) intinya sama dengan yg dulu hanya berbeda tampilan di halaman Google Custom Serach Engine-nya aja, sehingga kadang pada bingung jika pakai tutorial yang lama karena gambarnya sudah berbeda.

Balas

Saya sama kaya diatas, masih pake cara yang lama. Menurut saya sama saja :D

Balas

thanks tutorialnya tentang membuat google search engine di blog..
keep sharing mas,,
oot mas, waktu jalan-jalan di google dengan keyword "urang kurai", ada yg unik di penampilan hasil pencariannya loh mas, ini screenshotnya, keren juga mas tapi gimana caranya bikin hasil pencarian seperti gambar ini ya?

[img]https://lh6.googleusercontent.com/-XkqoXwrRo4A/U0hFfBVJRCI/AAAAAAAAAEc/8uhu_oBEVU0/s728/urang%2520kurai%2520%2520%2520Penelusuran%2520Google.png[/img]

Balas

Panjang juga caranya tapi kalau dikit demi dikit baca pelan-pelan dan ikuti tutorialnya pasti bisa :)

Balas

udah dipraktekan nih di blog sy :D
kunjungan perdana nih di sini, ijin bookmark blognya, mantap nih blogna :D

Balas

wah mantab pak

tapi sy sudah membuat lewat adsense hehe

Balas

Maaf mas Adhy, ikut Update ya?. Oh ya mas Adhy, kok di blog saya http://marikitaketawa.blogspot.com hasil pencariannya, tidak sesuai dengan kata kunci yang dimasukkan ya.?
Terima kasih sebelumnya mas Adhy.
Salam santun, salam sukses selalu.

Balas

Langsung saya coba di template mas andy nih :)
hasilnya sangat memuaskan

Balas

Saya dulu pernah menggunakan ini untuk AdSen :)

Balas

Lama ga ngesot kemari Pertamax Kang Adhy.....hahhhayyyyy

Balas

Makasih Mas Adhy atas tutornya :)

Visit Back http://azramblog.blogspot.com/

Balas

mas maaf Oot nih, gimana caranya nambahin kotak komentar facebook di template kompi males :)

Balas

mas adi facebooknya apa mau konsultasi masalah blog bisa ?

Balas

Iya mas pada dasarnya sama saja hanya berbeda layout di GCSE nya saja :)

Balas

Sepertinya itu setting lokasi di Google Plus mas :)

Balas

Betul mas, baca pelan-pelan dan kalau bisa sambil dipraktekan pasti bisa :)

Balas

Silahkan mbak :) Terima kasih atas apresiasinya.

Balas

Iya lewat adsense juga sama mas, yang mana aja bisa :)

Balas

Coba gunakan fitur sorted by relevance, masuk ke menu Search Features >> Advanced >> kemudian pada Results Sorting. silahkan atur-atur di situ.

Balas

Siippp mas :-bd

Balas

Iya mas ini bisa untuk cari dolar juga di adsense.

Balas

Silahkan mas Icah hhehehe :)

Balas

Sama seperti pada tutorial lainnya mas, udah banyak di google untuk tutorial itu :)

Balas

Ini mas https://www.facebook.com/adhy.suryadii :)

Balas

berhasil :)
terimakasih mas kompi (y)

Balas

ilmu baru hari ini.. trimakasih kompi ajaib atas tutor yg diberikannya.. :)

Balas

Padahal saya sudah menjalankan semuanya dengan benar, kodenya sudah saya pasang di halaman statis, tetapi kenapa waktu di Search tidak terbuka di halaman statisnya mas? malahan hasil pencariannya dibawah kotak pencarian? bagimana cara mengatasinya mas? ini blog yang error > pusatcara.com

Balas

Coba perhatikan pada langkah keenam, silahkan pilih results only, kalau udah betul tapi masih error coba search boxnya pindahin jangan di sidebar.

Balas

Langkah keenam sudah betul mas, letak widgetnya juga sudah saya pindah, tetapi masih aja begitu. Ini masalahnya terletak dimana ya

Balas

mas kompi , saya mau tanya itu script nya di taruh mana ya ??

Balas

Ooooo jadinya barengan ya ? ha,,ha, ha,, mana ubinya Mas minta kang Lembu tuh biar enak ngopreknya. ha,, ha,,ha,,

Balas

Kang, naha masih ada kotak bordernya ? padahal saya sudah tempatkan kode table {border... =(

Balas

Kang, pertanyaan saya sama dengan kang Putra. Cara nempatin tag condisional yang benar dimana yah?

Balas

mantap,
pdahal tadi lagi kebingungan ngikutin tutor yang lama :D

ternyata update juga tutor yang baru mengikuti updatenya juga tampilan CSE :D

thanks you kang

Balas

Teu cios Kang, udah bisa ;)

Balas

thx mas, jadi nih :)
http://clickandskip.blogspot.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×