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. Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Die border- Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands. CSS 4 You - The 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. Tags: finest, stylesheets, (Cascading Sheets) in HTML-Seiten einbinden. Es gibt mehrere Möglichkeiten -Anweisungen in einer HTML-Seite einzubinden. Wir wollen die folgende -Anweisungen auf die verschiedenen Arten einbinden. Als Vorgriff, was diese beiden -Anweisungen „machen“. Die folgenden Initialwert: none: Vererbbar: Nein: Anwendbar auf: Alle Elemente: Medium: Visual: Werte: none Keine Linie dotted Gepunk Linie dashed Gestrichelte Linie solid Sie können Formate für ein HTML-Element definieren, indem Sie innerhalb des einleitenden HTML-Tags das globale Attribut notieren. Die Wertzuweisung an das -Attribut besteht in einer oder mehreren -Formatdefinitionen. Dabei gilt die gleiche Grammatik und

2 Kommentare Schreibe einen Kommentar

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

  2. Unhappy for the immense think, but I’m truly romantic the new Zune, and desire this, as comfortably as the superior reviews whatever otherwise people human , testament helpfulness you end if it’s the honorable selection for you.

Schreibe einen Kommentar


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