File Konteks

Halaman ini menjelaskan cara menyesuaikan tampilan mesin telusur menggunakan file konteks, yang merupakan spesifikasi XML untuk mesin telusur Anda.

  1. Ringkasan
  2. Elemen LookAndFeel
  3. Atribut Elemen LookAndFeel
  4. Elemen Turunan LookAndFeel
  5. 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.

Kembali ke atas

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:

Kembali ke atas

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.

Kembali ke atas

Atribut Opsi hosting Deskripsi Nilai
googlebranding Dihosting Google Menentukan kotak penelusuran untuk mesin telusur Anda.

Gunakan salah satu nilai berikut:

  • watermark - Default.

    Kotak penelusuran dengan watermark Programmable Search Engine

  • smnar

    Kotak penelusuran yang sempit dengan latar belakang putih

  • smwide

    Kotak penelusuran yang sempit dengan latar belakang putih

  • smwidg

    Kotak penelusuran yang sempit dengan latar belakang abu-abu

  • smnarg

    Kotak penelusuran yang sempit dengan latar belakang abu-abu

  • smnarb

    Kotak penelusuran yang lebar dengan latar belakang hitam

  • smwidb

    Kotak penelusuran yang sempit dengan latar belakang hitam

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:

  • 1 - Default. Lebar penuh.
  • 2 - Rapat.
  • 3 - Dua kolom.
  • 4 - Dua halaman.
  • 5 - Dihosting Google: terbuka di jendela saat ini.
  • 6 - Dihosting Google: terbuka di jendela baru.
  • 7 - Hasil saja.
theme Elemen penelusuran Menentukan gaya kotak penelusuran dan hasil penelusuran Anda.

Gunakan salah satu nilai berikut:

  • 1 - Default. Menyerupai hasil penelusuran dari Google.

    Gaya yang disebut Default

  • 2 - Minimalis memiliki palet warna sederhana.

    Gaya yang disebut Minimalis

  • 3 - Green Sky menggunakan Trebuchet sebagai font.

    Gaya yang disebut Langit Hijau

  • 4 - Bubblegum menggunakan Arial sebagai font.

    Gaya bernama Bubblegum

  • 5 - Espresso menggunakan font serif, Georgia, dalam palet warna hangat.

    Gaya dengan nama Espresso

  • 6 - Shiny menggunakan Verdana, font sans-serif, dalam palet warna dingin.

    Gaya yang disebut Shiny

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:

  • false - Default. Google menampilkan tema standar.
  • true - Menetapkan Programmable Search Engine untuk menerima nilai yang Anda tetapkan dalam elemen turunan LookAndFeel.
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 (&quot;), misalnya, Trebuchet MS harus ditulis sebagai &quot;Trebuchet MS&quot;.

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.

Kembali ke atas

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.

Kembali ke atas

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 true. Default-nya adalah false.

Gambar yang akan ditampilkan ditetapkan di file promosi.

show_snippet

Untuk menampilkan deskripsi dalam promosi Anda, tetapkan atribut ini ke true. Default-nya adalah false.

Konten deskripsi ditentukan dalam file promosi.

title_hover_color Judul saat pengguna mengarahkan mouse ke link.
title_active_color Judul saat pengguna mengklik link.

Kembali ke atas

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.

Kembali ke atas

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.

Hasil dengan setiap hasil ditandaiHasil dengan hasil yang tinggi

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.

Kembali ke atas

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.

Kembali ke atas