Immer wieder kommt man auf Seiten, wo es eine Suchfunktion ‚powered by Google‘ gibt.

Mit einem Google Account bekommt man auf Google Code einen AJAX Search API key, der für dieanzugebende Domain gültig ist. Dann kann man sich auch gleich mit einem Wizard den Quelltext für eine der folgenden Google-Suchen zusammenstellen:

Zitat Google:

Map Search Wizard
Allow your users to search for places on a Google map without leaving your site.

Video Bar Wizard
Embed a set of Google Videos on your blog or web page.

Video Search Wizard
Let your users search for videos and watch ones you’ve selected without leaving your site.

News Bar Wizard – HorizontalNew!
Add a dynamic news bar to your web site or blog. Headlines fade in and out, giving your users direct access to timely and relevant news articles.

News Bar Wizard – VerticalNew!
Fill the empty column in your web page with news snippets and links to timely articles from Google News search.

Blog Bar WizardNew!
Add a dynamic blog bar to your web site or blog. Post titles fade in and out, giving your users direct access to timely and relevant blog posts.

Book Bar Wizard
Show off books on topics that interest you on your web site or blog.

Ich habe mir eine ‚Tabbed Search‘ ausgesucht, die inzwischen so aussieht: Search

Dazu lade ich die vorgegebene gsearch.css und den Java-Script im Header des Blogs und habe eine neue page-template gebastelt. Dort steht dann der Aufruf des ’scripts‘ (wenn man das so nennen kann, bin auch nicht der Spezialist)

Was mir nicht gefallen hat, war das normale Google-Styling in meinem schwarzen Hintergrund hier.

Ich dachte, okay, hol‘ Dir die gsearch.css auf den Blog und passe dort die erforderlichen Einstellungen an. Das Problem ist, in der CSS steht gross: Copyright Google! Noch dazu fehlen dann die Icons in der Suchseite.

Was macht man am besten? Den vorgegebenen Style mit der eigenen CSS überschreiben!

Man nimmt seinen Firefox und analysiert die Seite mit dem Firebug.

Der zeigt einem ganz klar, welche ID oder CLASS man wo findet. Nur, wie schaffe ich das, dass meine Änderung auch greift?

Google beschreibt zwar in langen TextenStyling Search Results wie das gehen soll, ich hab’s lange nicht kapiert.

Nach viel Probiererei will ich Euch den Code meiner style.css betreffend des Search Api’s aber doch hier nicht vorenthalten:

.search-control { padding: 20px; }
#search_control_tabbed { background:#000;}
.gsc-resultsbox-visible { width : 500px; }
.gs-result .gs-snippet {color:#f0e3b5; }
.gsc-tabHeader.gsc-tabhActive {background:#DBA24B; }
div.search_control_tabbed a {color :#e5c98c; }
#search_control_tabbed .gs-webResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-webResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-blogResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-blogResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-newsResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-newsResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-localResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-localResult .gs-directions { color:#DB4F00; }
#search_control_tabbed .gs-bookResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-bookResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gsc-trailing-more-results * { color:#DBA24B; }

sieht vielleicht nicht schön aus, aber so funktioniert’s bei mir!

Was andere dazu schreiben:

[rsspara:http://del.icio.us/rss/tag/google%20api]

CSS (Cascading Style Sheets, zu deutsch „Mehrstufige Formatvorlagen“) ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Warum Sie Layouts mit CSS einsetzen sollten, wird in diesem Artikel genauer erläutert. CSS is a that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. Start learning CSS now » (engl.: Cascading Sheets = gestufte Gestaltungsbögen) ist die Sprache, die Sie benutzen, um Ihre Webseite zu gestalten. lagen führt Sie durch die lagen dieser sheet-Sprache. Wir beantworten damit solche Fragen wie: »Wie CSS/Tutorials/Einstieg/Stylesheets einbinden – SELFHTML-Wiki Inline-s sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden. Formate zentral in einem -Element festlegen. Das HTML-Element erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen. Beispiel ansehen … Tags: csstutorialseinstiegstylesheets, einbinden, selfhtml, wiki, Cascading Sheets () bieten eine einfache und effektive Alternativen zu angeben verschiedenen Attribute für die HTML-Tags. Mit können Sie eine Reihe von Stileigenschaften für einen bestimmten HTML-Element angeben. Jede Eigenschaft hat einen Namen Sheets in basieren auf Regeln. Ein Selector(in unserem Beispiel “body”) welcher dem Browser mitteilt welche Elemente des Dokumentes von der Regel beeinflusst werden sollen Die Eigenschaft(hier sind es die Eigenschaften 'color' und 'background-color') 4 you - die deutsche Seite für Cascading sheets () Dies ist eine nahezu komplette -Referenz auf deutsch - ergänzt durch etliche Tipps, Tricks und andere Referenzen. Für Anfänger ist zunächst der -Workshop empfehlenswert.

2 Kommentare Schreibe einen Kommentar

  1. Pingback: Zur Google-Suche mit Ergebnissen auf der eigenen Seite - tunsinn - tun was sinn macht

Schreibe einen Kommentar


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.