Trang này mô tả cách tuỳ chỉnh giao diện của công cụ tìm kiếm bằng tệp ngữ cảnh, đây là thông số kỹ thuật XML cho công cụ tìm kiếm của bạn.
- Tổng quan
- Phần tử
LookAndFeel - Các thuộc tính của phần tử
LookAndFeel - Phần tử con của
LookAndFeel - Thêm biểu trưng vào trang kết quả lưu trữ trên Google
Tổng quan
Ngoài việc sử dụng Bảng điều khiển có thể lập trình của Công cụ tìm kiếm, bạn có thể kiểm soát giao diện của công cụ tìm kiếm bằng cách chỉnh sửa tệp XML ngữ cảnh. (Tìm hiểu thêm về ưu và nhược điểm của từng định dạng trong trang Thông tin cơ bản.) Nếu bạn chưa hiểu rõ về tệp ngữ cảnh, hãy đọc bài viết Ngữ cảnh: Xác định công cụ tìm kiếm.
Để linh hoạt hơn nữa trong việc hiển thị công cụ tìm kiếm, bạn có thể sử dụng Phần tử tìm kiếm có thể lập trình. Công cụ này cho phép bạn nhúng Công cụ tìm kiếm có thể lập trình vào trang web và các ứng dụng khác bằng JavaScript.
Nếu các trang web của bạn cũng bao gồm dữ liệu có cấu trúc, bạn có thể tạo các đoạn trích có nội dung tùy chỉnh và cách trình bày phong phú hơn. Thông tin thêm về cách tuỳ chỉnh đoạn trích kết quả.
Trước khi bắt đầu thiết kế giao diện của Công cụ tìm kiếm có thể lập trình, hãy đọc Hướng dẫn triển khai Công cụ tìm kiếm có thể lập trình. Đó là một tài liệu ngắn cho bạn biết cách bạn nên xử lý thương hiệu và thuộc tính của Google.
Phần tử LookAndFeel
Trong tệp ngữ cảnh, tất cả thông số kỹ thuật về giao diện đều được xác định bằng phần tử LookAndFeel trong CustomSearchEngine. Phần tử này xác định liệu quảng cáo có được hiển thị hay không, cách hiển thị phần kết quả tìm kiếm và cách hiển thị từng kết quả tìm kiếm. Ví dụ sau đây cho thấy tất cả các thuộc tính và phần tử con của phần tử 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>
Không phải tất cả các thuộc tính và phần tử LookAndFeel đều phù hợp với mọi loại công cụ tìm kiếm. Ví dụ: thuộc tính googlebranding chỉ được dùng cho các công cụ tìm kiếm do Google lưu trữ và sẽ bị bỏ qua nếu công cụ tìm kiếm của bạn đang dùng tuỳ chọn lưu trữ "Phần tử tìm kiếm".
Khi tải tệp ngữ cảnh của công cụ tìm kiếm xuống từ trang Overview (Tổng quan) của Control Panel, bạn sẽ thấy một phần LookAndFeel được định nghĩa đầy đủ. Ngay cả các thuộc tính và phần tử không liên quan đến loại công cụ tìm kiếm mà bạn đã chọn cũng sẽ có giá trị được xác định. Đó chỉ là những giá trị mặc định; bỏ qua chúng. Chỉ chú ý đến những phần tử và thuộc tính ảnh hưởng đến loại công cụ tìm kiếm của bạn.
Các phần tiếp theo sẽ thảo luận về những nội dung sau:
Thuộc tính của phần tử LookAndFeel
Tất cả thuộc tính LookAndFeel đều không bắt buộc. Nếu bạn không chỉ định các thuộc tính này, Công cụ tìm kiếm có thể lập trình sẽ sử dụng các giá trị mặc định. Ví dụ: Nếu bạn không xác định thuộc tính element_layout của phần tử LookAndFeel, Công cụ tìm kiếm có thể lập trình sẽ diễn giải điều đó để có nghĩa là giá trị element_layout là "1". Không phải mọi thuộc tính đều liên quan đến mọi loại công cụ tìm kiếm.
Tuỳ theo cách bạn xác định giá trị của các thuộc tính, Công cụ tìm kiếm có thể lập trình sẽ tạo một tập hợp mã cho hộp tìm kiếm và kết quả tìm kiếm. Bạn có thể xem trước mã được tạo trong phần Nhận mã trên trang Tổng quan của công cụ tìm kiếm. Bạn có thể sao chép đoạn mã đã tạo để chèn vào trang web của mình.
Sau đây là ví dụ về phần tử LookAndFeel có các thuộc tính được xác định đầy đủ:
<LookAndFeel googlebranding="watermark"
element_layout="1"
theme="1"
custom_theme="false"
text_font="Arial, sans-serif" />
Bảng sau đây liệt kê các thuộc tính của CustomSearchEngine và giá trị của các thuộc tính đó.
Lưu ý: Chỉ xác định các giá trị của các thuộc tính có liên quan đến lựa chọn lưu trữ mà bạn đã chọn. Cột Tùy chọn lưu trữ cho bạn biết các thuộc tính này áp dụng những lựa chọn lưu trữ nào.
| Thuộc tính | Tùy chọn lưu trữ | Nội dung mô tả | Giá trị |
|---|---|---|---|
googlebranding |
Được lưu trữ trên Google | Xác định hộp tìm kiếm cho công cụ tìm kiếm của bạn. | Hãy sử dụng một trong các giá trị sau:
|
element_layout |
Phần tử tìm kiếm | Xác định cách bố trí hộp tìm kiếm và kết quả tìm kiếm trên trang. Để tìm hiểu thêm về các tuỳ chọn bố cục, hãy xem phần Bố cục phần tử tìm kiếm. |
Hãy dùng một trong những giá trị sau:
|
theme |
Phần tử tìm kiếm | Xác định kiểu của hộp tìm kiếm và kết quả tìm kiếm của bạn. | Hãy sử dụng một trong các giá trị sau:
|
custom_theme |
Phần tử tìm kiếm | Để tuỳ chỉnh giao diện nhằm hiển thị nhiều màu và bộ phông chữ so với tiêu chuẩn, hãy đặt giá trị thành true. Nếu không, Công cụ tìm kiếm có thể lập trình sẽ bỏ qua thao tác tuỳ chỉnh màu sắc và phông chữ được xác định trong các phần tử con của LookAndFeel. |
Chỉ định một trong hai tuỳ chọn sau:
|
text_font |
Tất cả | Đặt bộ phông chữ cho văn bản trong kết quả tìm kiếm. |
Mặc dù Bảng điều khiển chỉ cho phép bạn chọn 5 bộ phông chữ, nhưng bạn có thể chọn bộ phông chữ rộng hơn trong tệp theo bối cảnh. Bạn có thể dùng danh sách các bộ phông chữ được phân tách bằng dấu phẩy làm giá trị cho thuộc tính này, chẳng hạn như trong ví dụ sau: text_font="Arial, sans-serif" Nếu bạn liệt kê nhiều bộ phông chữ thì trình duyệt sẽ sử dụng phông chữ đầu tiên. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, trình duyệt sẽ thử phông chữ tiếp theo. Vì vậy, hãy bắt đầu với phông chữ bạn muốn và kết thúc bằng một bộ phông chữ chung, chẳng hạn như serif hoặc san-serif. Bộ phông chữ chung cho phép trình duyệt chọn phông chữ tương tự trong bộ phông chữ chung khi không có phông chữ nào trong danh sách của bạn. Nếu bạn đang sử dụng bộ phông chữ có tên dài hơn một từ, bạn phải đặt phông chữ này vào giữa các thực thể trong dấu ngoặc kép ( |
Phần tử con của LookAndFeel
Tất cả các phần tử con của LookAndFeel, ngoại trừ phần tử Promotions, chỉ liên quan đến phần tử Tìm kiếm. Hầu hết thuộc tính của phần tử Promotions áp dụng cho mọi loại công cụ tìm kiếm. Trong hầu hết trường hợp, các thành phần con kiểm soát màu sắc của các thành phần khác nhau trong công cụ tìm kiếm của bạn. Các giá trị màu là các ký hiệu thập lục phân HTML tiêu chuẩn. Nếu bạn không xác định các thuộc tính của phần tử, Công cụ tìm kiếm có thể lập trình sẽ sử dụng các giá trị mặc định.
Lưu ý: Nếu muốn tuỳ chỉnh một phần tử Tìm kiếm thì trước tiên, bạn phải đặt thuộc tính custom_theme của phần tử LookAndFeel thành true trước khi xác định giá trị trong các phần tử con. Nếu bạn không đặt thuộc tính custom_theme thành true, thì mọi giá trị bạn đã xác định trong các phần tử con (ngoại trừ Promotions) sẽ bị Công cụ tìm kiếm có thể lập trình bỏ qua.
LookAndFeel có các phần tử con sau đây.
Colors– xác định màu của phần tử tìm kiếm.Promotions– xác định giao diện của chương trình khuyến mãi. Các chế độ cài đặt này áp dụng cho mọi loại công cụ tìm kiếm.SearchControls– xác định màu của các thành phần trong hộp tìm kiếm Phần tử tìm kiếm.Results– xác định màu của thành phần trong phần kết quả của phần tử Tìm kiếm.
Phần tử con Colors
Phần tử Colors xác định màu của phần tử Tìm kiếm. Để thay đổi màu của các thành phần phụ trong phần tử Tìm kiếm, chẳng hạn như kết quả tìm kiếm riêng lẻ hoặc kết quả được thăng hạng, bạn phải đặt giá trị trong các thành phần phụ khác.
Sau đây là ví dụ về phần tử Colors có các thuộc tính được xác định đầy đủ:
<Colors url="#3366cc"
background="#FFFFFF"
border="#336699"
title="#0000CC"
text="#000000"
visited="#ffbd10"
title_hover="#0000CC"
title_active="#0000CC"/>
Bảng sau đây liệt kê các thuộc tính không bắt buộc của Colors và giá trị của các thuộc tính đó.
| Thuộc tính | Màu thành phần |
|---|---|
url |
URL ở cuối mỗi đoạn mã kết quả. |
background |
Hình nền của toàn bộ phần kết quả. |
border |
Đường viền xung quanh phần tử tìm kiếm. |
title |
Tiêu đề của đoạn trích kết quả. Tiêu đề là dòng đầu tiên của mỗi kết quả. |
text |
Văn bản nội dung của đoạn mã kết quả. |
visited |
Đường liên kết sau khi người dùng đã nhấp vào. |
title_hover |
Màu của tiêu đề khi người dùng di chuột qua đường liên kết. |
title_active |
Màu của tiêu đề khi người dùng nhấp vào đường liên kết. |
Phần tử con Promotions
Phần tử Promotions kiểm soát màu sắc của chương trình khuyến mãi, cũng như xác định việc có hiển thị hình ảnh và nội dung mô tả hay không. Mặc dù giao diện của chương trình khuyến mãi được xác định trong tệp ngữ cảnh nhưng nội dung của chương trình khuyến mãi được xác định trong tệp XML về chương trình khuyến mãi. Để tìm hiểu thêm, hãy xem bài viết Chương trình khuyến mãi.
Sau đây là ví dụ về phần tử Promotions có các thuộc tính được xác định đầy đủ:
<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" />
Bảng sau đây liệt kê các thuộc tính không bắt buộc của Promotions và giá trị của các thuộc tính đó.
| Thuộc tính | Màu thành phần |
|---|---|
title_color |
Tiêu đề của mỗi chương trình khuyến mãi. |
title_visited_color |
Tiêu đề sau khi được người dùng nhấp vào. |
url_color |
URL ở cuối mỗi chương trình khuyến mãi. |
background_color |
Màu nền của toàn bộ phần chương trình khuyến mãi. |
border_color |
Đường viền xung quanh toàn bộ phần chương trình khuyến mãi. |
snippet_color |
Nội dung mô tả về chương trình khuyến mãi. Nếu chương trình khuyến mãi của bạn không có nội dung mô tả thì chế độ cài đặt sẽ không có gì thay đổi. |
show_image |
Để hiển thị hình ảnh trong chương trình khuyến mãi của bạn, hãy đặt thuộc tính này thành Hình ảnh để hiển thị được đặt trong tệp chương trình khuyến mãi. |
show_snippet |
Để hiển thị nội dung mô tả trong chương trình khuyến mãi của bạn, hãy đặt thuộc tính này thành Nội dung mô tả được xác định trong tệp chương trình khuyến mãi. |
title_hover_color |
Tiêu đề khi người dùng di chuột qua đường liên kết. |
title_active_color |
Tiêu đề khi người dùng nhấp vào đường liên kết. |
Phần tử con SearchControls
Phần tử SearchControls kiểm soát màu của hộp tìm kiếm và các thẻ cho tinh chỉnh trong phần tử Tìm kiếm. Nếu bạn đã tạo các nhãn tinh lọc trong công cụ tìm kiếm, các nhãn này sẽ xuất hiện dưới dạng thẻ trong phần tử tìm kiếm. Nếu bạn không có nhãn tinh lọc, các thẻ sẽ không xuất hiện và Công cụ tìm kiếm có thể lập trình sẽ bỏ qua giá trị của các thuộc tính.
Nếu bạn muốn Công cụ tìm kiếm có thể lập trình tự động hoàn thành cụm từ tìm kiếm, hãy xem phần mô tả thuộc tính autocompletions của phần tử CustomSearchEngine trong tệp ngữ cảnh.
Sau đây là ví dụ về phần tử SearchControls có các thuộc tính được xác định đầy đủ:
<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" />
Bảng sau đây liệt kê các thuộc tính không bắt buộc của SearchControls và giá trị của các thuộc tính đó.
| Thuộc tính | Màu thành phần |
|---|---|
input_border_color |
Đường viền cho trường nhập dữ liệu của cụm từ tìm kiếm. |
button_border_color |
Đường viền xung quanh nút tìm kiếm. |
button_background_color |
Nút tìm kiếm. |
tab_border_color |
Đường viền xung quanh các thẻ hiện không được đặt tiêu điểm (không được người dùng chọn). |
tab_background_color |
Các thẻ không được đặt tiêu điểm. |
tab_selected_border_color |
Thẻ mà người dùng vừa chọn bằng cách nhấp vào. Thẻ mà người dùng đã nhấp vào gần đây nhất sẽ có trạng thái đã chọn. |
tab_selected_background_color |
Màu của thẻ hiện được chọn. |
Phần tử con Results
Phần tử Results kiểm soát màu của từng kết quả trong phần tử Tìm kiếm. Mỗi kết quả riêng lẻ tạo thành một đơn vị của tiêu đề, đoạn trích kết quả và đường liên kết. Khi xác định phần tử con này, bạn có thể mô tả trực quan các kết quả riêng lẻ hoặc đánh dấu các kết quả đang được người dùng chọn. Nếu bạn không muốn mô tả từng kết quả riêng lẻ hoặc đánh dấu một kết quả, bạn có thể đặt đường viền và nền cho phù hợp với màu của nền cho toàn bộ phần kết quả.
Hình 1: Kết quả với kết quả riêng lẻ được mô tả và kết quả riêng lẻ được đánh dấu khi di chuột qua.
Kết quả có hai trạng thái:
- Trạng thái bình thường – sự xuất hiện của từng kết quả riêng lẻ khi con chuột không di chuột lên kết quả đó.
- Trạng thái di chuột – sự xuất hiện của từng kết quả khi con trỏ chuột di chuột qua kết quả đó.
Phần tử này kiểm soát màu của từng kết quả. Để thay đổi nền cho tất cả kết quả, hãy xem phần Phần tử con màu.
Sau đây là ví dụ về phần tử Results có các thuộc tính được xác định đầy đủ:
<Results border_color="#FFFFFF"
border_hover_color="#FFFFFF"
background_color="#FFFFFF"
background_hover_color="#FFFFFF" />
Bảng sau đây liệt kê các thuộc tính không bắt buộc của Results và giá trị của các thuộc tính đó.
| Thuộc tính | Màu thành phần |
|---|---|
border_color |
Đường viền của từng cá nhân dẫn đến trạng thái bình thường. |
border_hover_color |
Đường viền của kết quả khi di chuột qua kết quả đó. |
background_color |
Màu nền của các cá nhân dẫn đến trạng thái bình thường. |
background_hover_color |
Nền của kết quả khi di chuột qua kết quả đó. |
Thêm biểu trưng vào trang kết quả được lưu trữ trên Google
Nếu cho phép Google lưu trữ trang kết quả, bạn có thể đưa vào một biểu trưng hoặc hình ảnh nhỏ ngay bên cạnh hộp tìm kiếm trên trang kết quả tìm kiếm. Hình ảnh phải là tệp .jpg, .png hoặc .gif được lưu trữ trên một trang web (có thể là của bạn hoặc từ một trang web không có quy định hạn chế về bản quyền). Bạn có thể liên kết URL với hình ảnh để hình ảnh có thể nhấp vào.
Lưu ý: Nếu đang sử dụng Phần tử tìm kiếm có thể lập trình để lưu trữ kết quả tìm kiếm, thì bạn không thể thêm hình ảnh bằng Bảng điều khiển hoặc tệp ngữ cảnh.
Sau đây là ví dụ về trang kết quả có một biểu trưng.
Hình 3: Hộp tìm kiếm có hình ảnh
Hình ảnh và URL của hình ảnh đó được xác định trong các thuộc tính của phần tử Logo của phần tử LookAndFeel. Ví dụ sau cho biết cách thêm biểu trưng vào trang kết quả được lưu trữ trên Google.
<LookAndFeel>
<Logo url="http://www.ascii.com/logo.gif"
destination="http://www.ascii.com/"
height="90"/>
...
</LookAndFeel>
Bảng sau đây liệt kê các thuộc tính của phần tử Logo.
| Thuộc tính | Mô tả và giá trị |
|---|---|
url |
URL của hình ảnh. Đó có thể là tệp .gif, .png hoặc .jpg. |
destination |
Nếu bạn muốn hình ảnh đó là một đường liên kết, hãy xác định đích đến của URL. |
height |
Chiều cao của hình ảnh tính bằng pixel. Chiều cao tối đa là 100 pixel. Bạn không cần cung cấp chiều rộng vì Công cụ tìm kiếm có thể lập trình sẽ giữ nguyên tỷ lệ khung hình. Đừng bận tâm đến việc cung cấp chiều cao trừ phi hình ảnh quá lớn và bạn muốn Công cụ tìm kiếm có thể lập trình thu nhỏ lại. |