Bu sayfada, arama motorunuzun XML spesifikasyonu olan bağlam dosyasını kullanarak arama motorunuzun görünümünü nasıl özelleştireceğiniz açıklanmaktadır.
- Genel Bakış
LookAndFeel
ÖğesiLookAndFeel
Öğesinin ÖzellikleriLookAndFeel
Alt Öğeleri- Google Tarafından Barındırılan Sonuçlar Sayfasına Logo Ekleme
Genel bakış
Programlanabilir Arama Motoru Denetim Masası'nı kullanmaya ek olarak, bağlam XML dosyasını düzenleyerek arama motorunuzun görünümünü ve tarzını da kontrol edebilirsiniz. (Her biçimin avantajları ve dezavantajları hakkında daha fazla bilgiyi Temel Bilgiler sayfasında bulabilirsiniz.) Bağlam dosyalarına aşina değilseniz Bağlam: Arama Motoru Tanımlama bölümünü okuyun.
Arama motorunuzun görüntülenme şeklinde daha fazla esneklik için Programlanabilir Arama Öğesi'ni kullanabilirsiniz. Bu öğe, Programlanabilir Arama Motoru'nu web sayfanıza ve JavaScript kullanarak diğer uygulamalara yerleştirmenize olanak tanır.
Web sayfalarınızda yapılandırılmış veri de varsa daha zengin sunum ve özel içeriğe sahip snippet'ler oluşturabilirsiniz. Sonuç snippet'lerinizi özelleştirme hakkında daha fazla bilgi edinin.
Programlanabilir Arama Motorunuzun görünümünü ve tarzını tasarlamaya başlamadan önce Programlanabilir Arama Motoru Uygulama Yönergeleri'ni okuyun. Google markasını ve ilişkilendirmesini nasıl ele almanız gerektiğini gösteren kısa bir belgedir.
LookAndFeel
Öğesi
Bağlam dosyasında, tüm görünüm ve tarz spesifikasyonları CustomSearchEngine
altındaki LookAndFeel
öğesi tarafından tanımlanır. Bu öğe, reklamların görüntülenip görüntülenmeyeceğini, arama sonuçları bölümünün nasıl oluşturulacağını ve tek tek arama sonuçlarının nasıl görüntüleneceğini belirler. Aşağıdaki örnekte LookAndFeel
öğesinin tüm özellikleri ve alt öğeleri gösterilmektedir.
<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>
LookAndFeel
özelliklerinin ve öğelerinin tümü, her tür arama motoruyla alakalı değildir. Örneğin, googlebranding
özelliği yalnızca Google tarafından barındırılan arama motorları için kullanılır ve arama motorunuz "Search element" barındırma seçeneğini kullanıyorsa yoksayılır.
Kontrol Paneli'nin Genel Bakış sayfasından arama motorunun içerik dosyasını indirdiğinizde tamamen tanımlanmış bir LookAndFeel
bölümü görürsünüz. Seçtiğiniz arama motoru türüyle alakalı olmayan öznitelikler ve öğeler bile tanımlanmış değerlere sahip olacaktır. Bunlar yalnızca varsayılan değerlerdir, görmezden gelin. Yalnızca arama motorunuzun türünü etkileyen öğelere ve özelliklere dikkat edin.
Sonraki bölümlerde aşağıdaki konular ele alınmaktadır:
LookAndFeel
Öğesinin Özellikleri
Tüm LookAndFeel
özellikleri isteğe bağlıdır; belirtmezseniz Programlanabilir Arama Motoru varsayılan değerleri kullanır. Örneğin, LookAndFeel
öğesinin element_layout
özelliğini tanımlamazsanız Programlanabilir Arama Motoru, bunu element_layout
değerinin "1"
olduğu anlamına gelecek şekilde yorumlar. Her özellik her arama motoru türüyle alakalı değildir.
Programlanabilir Arama Motoru, özniteliklerin değerlerini nasıl tanımladığınıza bağlı olarak arama kutusu ve arama sonuçları için bir kod kümesi oluşturur. Oluşturulan kodu, arama motorunuzun Genel Bakış sayfasının Kodu al bölümünde önizleyebilirsiniz. Oluşturulan kod snippet'ini kopyalayabilir ve web sayfanıza ekleyebilirsiniz.
Aşağıda, özellikleri tam olarak tanımlanmış bir LookAndFeel
öğesi örneği verilmiştir:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
Aşağıdaki tabloda CustomSearchEngine
özellikleri ve değerleri listelenmiştir.
Not: Yalnızca seçtiğiniz barındırma seçeneğiyle alakalı özelliklerin değerlerini tanımlayın. Barındırma seçenekleri sütunu, bu özelliklerin hangi barındırma seçenekleri için geçerli olduğunu gösterir.
Özellik | Barındırma seçenekleri | Açıklama | Değer |
---|---|---|---|
googlebranding |
Google tarafından barındırılan | Arama motorunuz için arama kutusunu belirler. | Aşağıdaki değerlerden birini kullanın:
|
element_layout |
Arama öğesi | Arama kutusunun ve arama sonuçlarının sayfada nasıl yerleştirildiğini belirler. Farklı düzen seçenekleri hakkında daha fazla bilgi edinmek için Arama Öğesi Düzeni bölümüne bakın. |
Aşağıdaki değerlerden birini kullanın:
|
theme |
Arama öğesi | Arama kutunuzun ve arama sonuçlarınızın stilini belirler. | Aşağıdaki değerlerden birini kullanın:
|
custom_theme |
Arama öğesi | Temayı standarttan farklı renkler ve yazı tipi ailesi gösterecek şekilde özelleştirmek için değeri true olarak ayarlayın. Aksi takdirde, Programlanabilir Arama Motoru, LookAndFeel alt öğelerinde tanımlanan renkler ve yazı tipleri üzerinde yaptığınız özelleştirmeyi yoksayar. |
Aşağıdakilerden birini belirtin:
|
text_font |
Tümü | Arama sonuçlarınızdaki metnin yazı tipi ailesini ayarlar. |
Kontrol Paneli yalnızca beş yazı tipi ailesini seçmenize izin verse de, bağlam dosyasında daha geniş bir yazı tipi ailesi grubu seçebilirsiniz. Aşağıdaki örnekte gösterildiği gibi, bu özelliğin değeri olarak yazı tipi ailelerinin virgülle ayrılmış listesini kullanabilirsiniz: text_font="Arial, sans-serif" Birden fazla yazı tipi ailesi listelediyseniz tarayıcı ilk yazı tipini kullanır. Tarayıcı ilk yazı tipini desteklemiyorsa bir sonraki yazı tipini dener. Bu nedenle, istediğiniz yazı tipiyle başlayın ve serif veya san-serif gibi genel bir aileyle bitirin. Genel aile, listelediğiniz yazı tiplerinin hiçbiri mevcut olmadığında tarayıcının genel aile içinde benzer bir yazı tipi seçmesine olanak tanır. Adı birden fazla kelimeden oluşan bir yazı tipi ailesi kullanıyorsanız yazı tipi ailesini tırnak içine almanız gerekir ( |
LookAndFeel
Alt Öğeleri
Promotions
öğesi hariç tüm LookAndFeel
alt öğeleri, yalnızca Search öğesiyle ilgilidir. Promotions
öğesinin çoğu özelliği, tüm arama motoru türleri için geçerlidir. Çoğunlukla, alt öğeler arama motorunuzdaki farklı bileşenlerin renklerini kontrol eder. Renk değerleri, standart HTML onaltılı gösterimleridir. Öğenin özelliklerini tanımlamazsanız Programlanabilir Arama Motoru, varsayılan değerleri kullanır.
Not: Bir Search öğesini özelleştirmek isterseniz alt öğelerdeki değerleri tanımlamadan önce LookAndFeel
öğesinin custom_theme
özelliğini true
olarak ayarlamanız gerekir. custom_theme
özelliğini true
olarak ayarlamazsanız alt öğelerde tanımladığınız tüm değerler (Promotions
hariç) Programlanabilir Arama Motoru tarafından yoksayılır.
LookAndFeel
, aşağıdaki alt öğelere sahip.
Colors
- arama öğesinin renklerini belirler.Promotions
, promosyonların görünümünü ve tarzını belirler. Ayarlar tüm arama motoru türleri için geçerlidir.SearchControls
- Arama öğeleri arama kutusundaki bileşenlerin renklerini belirler.Results
- Search element sonuçları bölümündeki bileşenlerin renklerini belirler.
Colors
Alt Öğesi
Colors
öğesi, Search element'ın rengini belirler. Search öğesinin alt bileşenlerinin (örneğin, tek bir arama sonucu veya sıra yükseltmeler) renklerini değiştirmek için diğer kardeş öğelerdeki değerleri ayarlamanız gerekir.
Aşağıda, özellikleri tam olarak tanımlanmış bir Colors
öğesi örneği verilmiştir:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
Aşağıdaki tabloda, Colors
için isteğe bağlı özellikler ve değerleri listelenmiştir.
Özellik | Bileşen rengi |
---|---|
url |
Her sonuç snippet'inin en altındaki URL. |
background |
Tüm sonuçlar bölümünün arka planı. |
border |
Arama öğesinin çevresindeki kenarlık. |
title |
Sonuç snippet'lerinin başlığı. Başlık, her sonucun ilk satırıdır. |
text |
Sonuç snippet'inin gövde metni. |
visited |
Kullanıcı tıkladıktan sonraki bağlantı. |
title_hover |
Kullanıcı fare imlecini bağlantının üzerine getirdiğinde görünen başlığın rengi. |
title_active |
Kullanıcı bağlantıyı tıkladığında görünen başlığın rengi. |
Promotions
Alt Öğesi
Promotions
öğesi, hem promosyonun renklerini kontrol eder hem de resimlerin ve açıklamaların gösterilip gösterilmeyeceğini belirler. Tanıtımların görünümü ve tarzı bağlam dosyasında tanımlanırken, promosyonların içeriği promosyonlar XML dosyasında tanımlanır. Daha fazla bilgi edinmek için Promosyonlar bölümüne bakın.
Aşağıda, özellikleri tam olarak tanımlanmış bir Promotions
öğesi örneği verilmiştir:
<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" />
Aşağıdaki tabloda, Promotions
için isteğe bağlı özellikler ve değerleri listelenmiştir.
Özellik | Bileşen rengi |
---|---|
title_color |
Her promosyonun başlığıdır. |
title_visited_color |
Kullanıcı tarafından tıklandıktan sonra başlık. |
url_color |
Her promosyonun alt kısmındaki URL. |
background_color |
Tüm promosyonlar bölümünün arka plan rengi. |
border_color |
Tanıtım bölümünün tamamının etrafındaki kenarlık. |
snippet_color |
Promosyonun açıklaması. Tanıtımınızın açıklaması yoksa ayar hiçbir şeyi değiştirmez. |
show_image |
Promosyonunuzda bir resim göstermek için bu özelliği Gösterilecek resim, promosyon dosyasında ayarlanır. |
show_snippet |
Promosyonunuzda bir açıklama göstermek için bu özelliği Açıklamanın içeriği, promosyon dosyasında tanımlanır. |
title_hover_color |
Kullanıcı, fareyi bağlantının üzerine getirdiğinde görüntülenen başlık. |
title_active_color |
Kullanıcı bağlantıyı tıkladığında görünen başlık. |
SearchControls
Alt Öğesi
SearchControls
öğesi, bir Arama öğesindeki arama kutusunun renklerini ve hassaslaştırmalar için sekmeleri kontrol eder. Arama motorunuzda ayrıntılandırma etiketleri oluşturduysanız bu etiketler arama öğesinde sekmeler olarak görünür. Ayrıntılandırma etiketleriniz yoksa sekmeler görünmez ve Programlanabilir Arama Motoru, özniteliklerin değerlerini yok sayar.
Programlanabilir Arama Motoru'nun sorguları otomatik olarak tamamlamasını istiyorsanız bağlam dosyasında CustomSearchEngine
öğesinin autocompletions
özelliğini açıklayan bölüme bakın.
Aşağıda, özellikleri tam olarak tanımlanmış bir SearchControls
öğesi örneği verilmiştir:
<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" />
Aşağıdaki tabloda, SearchControls
için isteğe bağlı özellikler ve değerleri listelenmiştir.
Özellik | Bileşen rengi |
---|---|
input_border_color |
Arama sorgularında giriş alanının kenarlığı. |
button_border_color |
Arama düğmesinin etrafındaki kenarlık. |
button_background_color |
Arama düğmesi. |
tab_border_color |
O anda odakta olmayan (kullanıcı tarafından seçilmeyen) sekmelerin çevresindeki kenarlık. |
tab_background_color |
Odaklanmamış sekmeler. |
tab_selected_border_color |
Kullanıcının tıklayarak yeni seçtiği sekme. Kullanıcının en son tıkladığı sekme, seçilen durumu alır. |
tab_selected_background_color |
Seçili olan sekmenin rengi. |
Results
Alt Öğesi
Results
öğesi, Arama öğesindeki bağımsız sonuçların rengini kontrol eder. Her bir sonuç bir başlık, sonuç snippet'i ve bağlantı birimi oluşturur. Bu alt öğenin tanımlanması, her bir sonucu görsel olarak betimlemenize veya kullanıcılar tarafından seçilen sonuçları vurgulamanıza olanak tanır. Sonuçları tek tek tanımlamak veya bir sonucu vurgulamak istemiyorsanız, kenarlıkları ve arka planları, sonuç bölümünün tamamında arka planın rengiyle eşleşecek şekilde ayarlayabilirsiniz.
Şekil 1: Açıklanmış bağımsız sonuçların yer aldığı sonuçlar ve fareyle üzerine gelindiğinde vurgulanan bağımsız sonuçlar.
Sonuçlarda iki durum mevcuttur:
- Normal durum - fare imleci üzerine getirilmediğinde tek bir sonucun görünümü.
- Fareyle üzerine gelme durumu - fare imleci bir sonucun üzerine geldiğinde tek bir sonucun görünümü.
Bu öğe, her bir sonucun rengini kontrol eder. Tüm sonuçların arka planını değiştirmek için Renk Alt Öğesi bölümüne bakın.
Aşağıda, özellikleri tam olarak tanımlanmış bir Results
öğesi örneği verilmiştir:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
Aşağıdaki tabloda, Results
için isteğe bağlı özellikler ve değerleri listelenmiştir.
Özellik | Bileşen rengi |
---|---|
border_color |
Her bir bağımsızlığın sınırı, normal durumu oluşturur. |
border_hover_color |
Fareyle üzerine gelindiğinde sonucun kenarlığı. |
background_color |
Kişilerin arka plan rengi normal durumu verir. |
background_hover_color |
Fareyle üzerine gelindiğinde sonucun arka planı. |
Google Tarafından Barındırılan Sonuçlar Sayfasına Logo Ekleme
Sonuç sayfanızı Google'ın barındırmasına izin veriyorsanız arama sonuçları sayfasındaki arama kutusunun hemen yanına bir logo veya küçük resim ekleyebilirsiniz. Resim, bir web sitesinde (kendi siteniz veya telif hakkı kısıtlamaları olmayan bir web sitesi) barındırılan bir .jpg, .png veya .gif dosyası olmalıdır. Bir URL'yi resimle ilişkilendirerek tıklanabilir hale getirebilirsiniz.
Not: Arama sonuçlarını barındırmak için Programlanabilir Arama Öğesi'ni kullanıyorsanız Denetim Masası'nı veya bağlam dosyasını kullanarak resim ekleyemezsiniz.
Aşağıda, logolu bir sonuç sayfası örneği verilmiştir.
Şekil 3: Görsel içeren arama kutusu
Resim ve URL'si, LookAndFeel
öğesi altındaki Logo
öğesinin özelliklerinde tanımlanır. Aşağıdaki örnekte, Google tarafından barındırılan sonuçlar sayfanıza nasıl logo ekleyeceğiniz gösterilmektedir.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
Aşağıdaki tabloda Logo
öğesinin özellikleri listelenmiştir.
Özellik | Açıklama ve değer |
---|---|
url |
Resmin URL'si. Bu bir .gif, .png veya .jpg dosyası olabilir. |
destination |
Resmin bir bağlantı olmasını istiyorsanız URL hedefini tanımlayın. |
height |
Resmin piksel cinsinden yüksekliği. Maksimum yükseklik 100 pikseldir. Programlanabilir Arama Motoru en boy oranını koruduğundan, genişliği belirtmeniz gerekmez. Resim çok büyük değilse ve Programlanabilir Arama Motoru'nun resmin ölçeğini küçültmesini istemiyorsanız yüksekliği belirtmekle uğraşmayın. |