stil der benutzerdefinierte google suche auf Ihrer website ändern

Wie man den stil der benutzerdefinierte google suche auf Ihrer website ändern

Google Custom Search durchsuchbar macht Ihre Website mit der gleichen Technologie angetrieben durch die Haupt Google.com -Suchmaschine. Sie benötigen einen JavaScript -Snippet auf Ihre Website Vorlage hinzufügen , damit Ihre Besucher in der Lage , leicht zu finden , die Inhalte , die sie suchen auf Ihrer Website.

Google Custom Search, verwendet standardmäßig die klassische Google -Layout – blau Titel , Grün -Links und schwarz -Snippets – Styling für die Suchergebnisse auf Ihrer Website. Sie haben die Möglichkeit, ein anderes Farbschema und Schriftfamilie wählen, für die Suchergebnisse * , aber das ist so ziemlich alles.

Google Custom Search mit benutzerdefinierten CSS-Stile

Wenn Sie jemals die Website-Suche -Funktion auf labnol.org verwendet haben, können Sie bemerkt , dass die Suchergebnisse etwas anders gestylt – es gibt keine URL unter den Titeln angezeigt werden, werden die passenden Schlüsselwörter nicht fett hervorgehoben und die Paginierung Zahlen werden als angezeigt quadratische Schaltflächen.

Sie können diese benutzerdefinierten Formate nicht , obwohl der Custom Search Editor hinzufügen , aber Sie können einfache CSS-Regeln , die den gleichen Effekt bringen wird zu schreiben. Die Idee ist einfach . Wie im obigen Screenshot kommentiert, jedes Element in der Suchergebnisseite eine Klasse zugeordnet. Sie können den Stil für eine Klasse als display: none , um ein bestimmtes Element zu verstecken oder verwenden Sie die normale Schrift , Farbe, Rahmeneigenschaften , dieses Element zu stilisieren .

So können gezielt die Info-Box in den Suchergebnissen , die das Ergebnis count ( class = gsc -result- info) zeigt . . Wenn Sie möchten , dass bestimmte Block verstecken , können Sie eine Regel in Ihrem Stylesheet , die gsc – Ergebnis -info sagt fügen {display: none;} und der Zähler wird nicht mehr angezeigt. Ebenso können Sie sagen, gs- Schnipsel {display: none} . Nur Titel und nicht Snippets anzuzeigen.

Die Custom Search Editor lassen Sie nicht die Schriftgröße den Titel und die Ergebnisse zu ändern, aber mit CSS, können Sie das ganz einfach tun .

Hier sind einige weitere CSS-Regeln, die Sie nutzen können, um Ihre Custom Search Engine Stil .

<style type=’text/css’>
/* Use a different font family for search results */
.gs-title, .gs-snippet {
font-family: courier;
}
/* Add a border between individual search results */
.gs-webResult {
border: 1px solid #eee;
padding: 1em;
}
/* Do no display the count of search results */
.gsc-result-info {
display: none;
}
/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}
/* Hide the thumbnail images in search results */
.gsc-thumbnail {
display: none;
}
/* Hide the snippets in Google search results */
.gs-snippet {
display: none;
}
/* Change the font size of the title of search results */
.gs-title a {
font-size: 16px;
}
/* Change the font size of snippets inside search results */
.gs-snippet {
font-size: 14px;
}
/* Google Custom Search highlights matching words in bold, toggle that */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Do no display the URL of web pages in search results */
.gsc-url-top, .gsc-url-bottom {
display: none;
}
/* Highlight the pagination buttons at the bottom of search results */
.gsc-cursor-page {
font-size: 1.5em;
padding: 4px 8px;
border: 2px solid #ccc;
}
</style>

Diese Regeln werden auch kommen praktisch, wenn Sie nicht über die Berechtigung , um die Standard Aussehen und fühlen sich von der Custom Search Editor. – (Ursprüngliche Quelle – Englisch – Textübersetzung: Alex)