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]

Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet Re­lated The CSS validator Checks the syntax (and more) of style sheets. Digital Publishing Activity An Interest Group that looks at how Web technology Initialwert: disc: Vererbbar: Ja: Anwendbar auf: -, -Tags und display:list-item-Elemente: Medium: Visual: Werte: none Kein Aufzählungszeichen circle CSS Tutorial - W3 Schools: is a that describes the of an HTML document. describes how HTML elements should be displayed. This tutorial will teach you from Tags: tutorial, schools, Schriftstil (Kursiv): font-. Diese Eigenschaft gibt es seit Version: 1. Für font- stehen drei Werte zur Verfügung. Diese Werte sind: Italic steht als Abkürzung für: EDV: Cascading Sheets, eine Computersprache für die Gestaltung digitaler, vorwiegend webbasierter Dokumente What is ? stands for Cascading Sheets; describes how HTML elements are to be displayed on screen, paper, or in other media; saves a

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