Halaman ini menjelaskan cara menyesuaikan tampilan mesin telusur menggunakan file konteks, yang merupakan spesifikasi XML untuk mesin telusur Anda.
- Ringkasan
- Elemen
LookAndFeel
- Atribut Elemen
LookAndFeel
- Elemen Turunan
LookAndFeel
- Menambahkan Logo ke Halaman Hasil yang Dihosting Google
Ringkasan
Selain menggunakan Panel Kontrol Programmable Search Engine, Anda dapat mengontrol tampilan dan nuansa mesin telusur dengan mengedit file XML konteks. (Pelajari lebih lanjut kelebihan dan kekurangan setiap format di halaman Dasar-Dasar.) Jika Anda belum terbiasa dengan file konteks, baca Konteks: Menentukan Mesin Telusur.
Untuk fleksibilitas yang lebih baik dalam cara mesin telusur ditampilkan, Anda dapat menggunakan Programmable Search Element, yang memungkinkan Anda menyematkan Programmable Search Engine di halaman web Anda dan aplikasi lain menggunakan JavaScript.
Jika halaman web Anda juga menyertakan data terstruktur, Anda dapat membuat ringkasan dengan presentasi yang lebih beragam dan konten kustom. Informasi selengkapnya tentang menyesuaikan cuplikan hasil Anda.
Sebelum mulai mendesain tampilan dan nuansa Programmable Search Engine, baca Panduan menerapkan Programmable Search Engine. Skor Kualitas adalah dokumen singkat yang memberi tahu Anda cara menangani branding dan atribusi Google.
Elemen LookAndFeel
Dalam file konteks, semua spesifikasi tampilan dan nuansa ditentukan oleh elemen LookAndFeel
di bagian CustomSearchEngine
. Elemen ini menentukan apakah iklan ditampilkan, cara bagian hasil penelusuran dirender, dan cara setiap hasil penelusuran ditampilkan. Contoh berikut menampilkan semua atribut dan elemen turunan dari elemen LookAndFeel
.
<CustomSearchEngine ... > <Title>...</Title> <Description>...</Description> <Context> ... </Context> <LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/> <Logo /> <Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/> <Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" show_image="true" show_snippet="true" snippet_color="#330000" title_hover_color="#0000CC" title_active_color="#0000CC" /> <SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" /> <Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" /> </LookAndFeel> <AdSense /> <EnterpriseAccount /> </CustomSearchEngine>
Tidak semua atribut dan elemen LookAndFeel
relevan dengan semua jenis mesin telusur. Misalnya, atribut googlebranding
hanya digunakan untuk mesin telusur yang dihosting Google dan akan diabaikan jika mesin telusur Anda menggunakan opsi hosting "Elemen penelusuran".
Saat mendownload file konteks mesin telusur dari halaman Overview pada ControlPanel, Anda akan menemukan bagian LookAndFeel
yang lengkap. Bahkan atribut dan elemen yang tidak relevan dengan jenis mesin telusur yang Anda pilih akan memiliki nilai yang ditetapkan. Itu hanyalah nilai {i>default<i}; abaikan. Perhatikan hanya elemen dan atribut yang memengaruhi jenis mesin telusur Anda.
Bagian berikutnya membahas hal berikut:
Atribut Elemen LookAndFeel
Semua atribut LookAndFeel
bersifat opsional; jika Anda tidak menentukannya, Programmable Search Engine akan menggunakan nilai default. Misalnya, jika Anda tidak menentukan atribut element_layout
dari elemen LookAndFeel
, Programmable Search Engine akan menafsirkannya bahwa nilai element_layout
adalah "1"
. Tidak semua atribut relevan dengan semua jenis mesin telusur.
Sesuai dengan cara Anda menentukan nilai atribut, Programmable Search Engine akan menghasilkan serangkaian kode untuk kotak penelusuran dan hasil penelusuran. Anda dapat melihat pratinjau kode yang dihasilkan di bagian Dapatkan kode pada halaman Ringkasan mesin telusur. Anda dapat menyalin cuplikan kode yang dihasilkan dan memasukkannya ke halaman web.
Berikut adalah contoh elemen LookAndFeel
dengan atribut yang sepenuhnya ditentukan:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
Tabel berikut mencantumkan atribut CustomSearchEngine
dan nilainya.
Catatan: Tentukan nilai atribut yang relevan saja dengan opsi hosting yang Anda pilih. Kolom Opsi hosting menunjukkan opsi hosting yang diterapkan dengan atribut ini.
Atribut | Opsi hosting | Deskripsi | Nilai |
---|---|---|---|
googlebranding |
Dihosting Google | Menentukan kotak penelusuran untuk mesin telusur Anda. | Gunakan salah satu nilai berikut:
|
element_layout |
Elemen penelusuran | Menentukan bagaimana kotak penelusuran dan hasil penelusuran ditampilkan di halaman. Untuk mempelajari lebih lanjut opsi tata letak yang berbeda, lihat Tata Letak Elemen Penelusuran. |
Gunakan salah satu nilai berikut:
|
theme |
Elemen penelusuran | Menentukan gaya kotak penelusuran dan hasil penelusuran Anda. | Gunakan salah satu nilai berikut:
|
custom_theme |
Elemen penelusuran | Untuk menyesuaikan tema agar menampilkan berbagai warna dan jenis font dari standar, setel nilainya ke true . Jika tidak, Programmable Search Engine akan mengabaikan penyesuaian yang Anda buat pada warna dan font, yang ditentukan dalam elemen turunan LookAndFeel . |
Tentukan salah satu:
|
text_font |
Semua | Menetapkan jenis font untuk teks dalam hasil penelusuran. |
Meskipun Panel Kontrol memungkinkan Anda memilih hanya lima jenis font, Anda dapat memilih kumpulan jenis font yang lebih luas pada file konteks. Anda dapat memiliki daftar jenis font yang dipisahkan koma sebagai nilai untuk atribut ini, seperti dalam contoh berikut: text_font="Arial, sans-serif" Jika Anda mencantumkan lebih dari satu jenis font, browser akan menggunakan font pertama. Jika browser tidak mendukung font pertama, browser akan mencoba font berikutnya. Jadi mulailah dengan {i>font<i} yang Anda inginkan dan akhiri dengan keluarga umum, seperti serif atau san-serif. Keluarga generik memungkinkan browser memilih font serupa dalam keluarga generik bila tidak ada font yang Anda cantumkan. Jika Anda menggunakan jenis font yang namanya lebih dari satu kata, Anda harus melampirkannya di antara entitas kutipan ( |
Elemen Turunan LookAndFeel
Semua elemen turunan LookAndFeel
, kecuali elemen Promotions
, hanya berkaitan dengan elemen Penelusuran. Sebagian besar atribut elemen Promotions
berlaku untuk semua jenis mesin telusur. Sebagian besar elemen turunan mengontrol warna berbagai komponen di mesin telusur Anda. Nilai warna adalah notasi heksadesimal HTML. Jika Anda tidak menentukan atribut elemen, Programmable Search Engine akan menggunakan nilai default.
Catatan: Jika ingin menyesuaikan elemen Penelusuran, Anda harus menetapkan atribut custom_theme
dari elemen LookAndFeel
terlebih dahulu ke true
sebelum menentukan nilai dalam elemen turunan. Jika atribut custom_theme
tidak ditetapkan ke true
, semua nilai yang telah Anda tetapkan dalam elemen turunan (kecuali untuk Promotions
) akan diabaikan oleh Programmable Search Engine.
LookAndFeel
memiliki elemen turunan berikut.
Colors
- menentukan warna elemen penelusuran.Promotions
- menentukan tampilan dan nuansa promosi. Setelan ini berlaku untuk semua jenis mesin telusur.SearchControls
- menentukan warna komponen kotak penelusuran elemen Penelusuran.Results
- menentukan warna komponen bagian hasil elemen Penelusuran.
Elemen Turunan Colors
Elemen Colors
menentukan warna elemen Penelusuran. Untuk mengubah warna subkomponen elemen Penelusuran, seperti hasil penelusuran individual atau promosi, Anda harus menetapkan nilai dalam elemen seinduk lainnya.
Berikut adalah contoh elemen Colors
dengan atribut yang sepenuhnya ditentukan:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
Tabel berikut mencantumkan atribut opsional Colors
dan nilainya.
Atribut | Warna komponen |
---|---|
url |
URL di bagian bawah setiap cuplikan hasil. |
background |
Latar belakang seluruh bagian hasil. |
border |
Batas di sekeliling elemen penelusuran. |
title |
Judul cuplikan hasil. Judul adalah baris pertama dari setiap hasil. |
text |
Teks isi cuplikan hasil. |
visited |
Link yang muncul setelah pengguna mengkliknya. |
title_hover |
Warna judul saat pengguna mengarahkan mouse ke link. |
title_active |
Warna judul saat pengguna mengklik link. |
Elemen Turunan Promotions
Elemen Promotions
mengontrol warna promosi, serta menentukan apakah gambar dan deskripsi harus ditampilkan. Meskipun tampilan dan nuansa promosi ditentukan dalam file konteks, konten promosi itu sendiri didefinisikan dalam file XML promosi. Untuk mempelajari lebih lanjut, lihat Promosi.
Berikut adalah contoh elemen Promotions
dengan atribut yang sepenuhnya ditentukan:
<Promotions title_color="#006600" title_visited_color="#663399" url_color="#3366ff" background_color="#FFFFFF" border_color="#ffff33" snippet_color="#330000" show_image="true" show_snippet="true" title_hover_color="#0000CC" title_active_color="#0000CC" />
Tabel berikut mencantumkan atribut opsional Promotions
dan nilainya.
Atribut | Warna komponen |
---|---|
title_color |
Judul setiap promosi. |
title_visited_color |
Judul setelah diklik oleh pengguna. |
url_color |
URL di bagian bawah setiap promosi. |
background_color |
Warna latar belakang dari seluruh bagian promosi. |
border_color |
Batas di sekeliling bagian promosi. |
snippet_color |
Deskripsi promosi. Jika promosi Anda tidak memiliki deskripsi, setelan tidak akan mengubah apa pun. |
show_image |
Untuk menampilkan gambar dalam promosi Anda, tetapkan atribut ini ke Gambar yang akan ditampilkan ditetapkan di file promosi. |
show_snippet |
Untuk menampilkan deskripsi dalam promosi Anda, tetapkan atribut ini ke Konten deskripsi ditentukan dalam file promosi. |
title_hover_color |
Judul saat pengguna mengarahkan mouse ke link. |
title_active_color |
Judul saat pengguna mengklik link. |
Elemen Turunan SearchControls
Elemen SearchControls
mengontrol warna kotak penelusuran dan tab untuk penyempurnaan di elemen Penelusuran. Jika Anda telah membuat label penajaman di mesin telusur, label akan muncul sebagai tab di elemen penelusuran. Jika Anda tidak memiliki label penajaman, tab tidak akan muncul, dan Programmable Search Engine akan mengabaikan nilai atribut tersebut.
Jika Anda ingin Programmable Search Engine melengkapi kueri secara otomatis, lihat bagian yang menjelaskan atribut autocompletions
dari elemen CustomSearchEngine
dalam file konteks.
Berikut adalah contoh elemen SearchControls
dengan atribut yang sepenuhnya ditentukan:
<SearchControls input_border_color="#BCCDF0" button_border_color="#666666" button_background_color="#CECECE" tab_border_color="#E9E9E9" tab_background_color="#E9E9E9" tab_selected_border_color="#FF9900" tab_selected_background_color="#FFFFFF" />
Tabel berikut mencantumkan atribut opsional SearchControls
dan nilainya.
Atribut | Warna komponen |
---|---|
input_border_color |
Batas untuk kolom input untuk kueri penelusuran. |
button_border_color |
Batas di sekitar tombol penelusuran. |
button_background_color |
Tombol penelusuran. |
tab_border_color |
Batas di sekeliling tab yang saat ini tidak menjadi fokus (tidak dipilih oleh pengguna). |
tab_background_color |
Tab yang tidak fokus. |
tab_selected_border_color |
Tab yang baru saja dipilih pengguna dengan mengeklik. Tab yang terakhir diklik pengguna mengambil status yang dipilih. |
tab_selected_background_color |
Warna tab yang saat ini dipilih. |
Elemen Turunan Results
Elemen Results
mengontrol warna setiap hasil dalam elemen Penelusuran. Setiap hasil individual membentuk unit judul, cuplikan hasil, dan tautan. Mendefinisikan elemen turunan ini memungkinkan Anda menggambarkan setiap hasil secara visual atau menyoroti hasil yang sedang dipilih pengguna. Jika Anda tidak ingin menandai hasil individual atau menandai hasil, Anda dapat menyetel batas dan latar belakang agar cocok dengan warna latar belakang untuk keseluruhan bagian hasil.
Gambar 1: Hasil dengan hasil individual yang digambarkan dan hasil individual yang disorot saat mouse diarahkan.
Hasilnya memiliki dua status:
- Status normal - tampilan hasil individual saat mouse tidak mengarahkan kursor ke atasnya.
- Status pengarahan kursor - tampilan setiap hasil saat kursor mouse diarahkan ke atasnya.
Elemen ini mengontrol warna untuk setiap hasil. Guna mengubah latar belakang untuk semua hasil, lihat bagian Elemen Turunan Warna.
Berikut adalah contoh elemen Results
dengan atribut yang sepenuhnya ditentukan:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
Tabel berikut mencantumkan atribut opsional Results
dan nilainya.
Atribut | Warna komponen |
---|---|
border_color |
Batas setiap individu menghasilkan status normal. |
border_hover_color |
Batas hasil saat mouse diarahkan ke atasnya. |
background_color |
Warna latar belakang individu menghasilkan keadaan normal. |
background_hover_color |
Latar belakang hasil saat mouse diarahkan ke atasnya. |
Menambahkan Logo ke Halaman Hasil yang Dihosting Google
Jika Anda mengizinkan Google menghosting halaman hasil, Anda dapat menyertakan logo atau gambar kecil tepat di samping kotak penelusuran pada halaman hasil penelusuran. Gambar harus berupa file .jpg, .png, atau .gif yang dihosting di situs (mungkin milik Anda sendiri atau dari situs yang tidak memiliki pembatasan hak cipta). Anda dapat mengaitkan URL dengan gambar, sehingga dapat diklik.
Catatan:Jika menggunakan Programmable Search Element untuk menghosting hasil penelusuran, Anda tidak dapat menambahkan gambar menggunakan Panel Kontrol atau file konteks.
Berikut adalah contoh halaman hasil dengan logo.
Gambar 3: Kotak penelusuran yang berisi gambar
Gambar dan URL-nya ditentukan dalam atribut elemen Logo
di bawah elemen LookAndFeel
. Contoh berikut menunjukkan cara menambahkan logo ke halaman hasil yang dihosting Google.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
Tabel berikut mencantumkan atribut elemen Logo
.
Atribut | Deskripsi dan nilai |
---|---|
url |
URL gambar. Dapat berupa file .gif, .png, atau .jpg. |
destination |
Jika Anda ingin gambar menjadi link, tentukan tujuan URL. |
height |
Tinggi gambar dalam piksel. Tinggi maksimum adalah 100 piksel. Anda tidak perlu memberikan lebar karena Programmable Search Engine akan mempertahankan rasio aspek. Tidak perlu memberikan tinggi kecuali gambar terlalu besar dan Anda ingin Programmable Search Engine memperkecilnya. |