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 Saves a Lot of Work! The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file! CSS is the we use to style 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 » Examples Use this reference to browse an alphabetical of all of the standard properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key concepts and a list of Les concepts de base pour La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible.Pour créer un conteneur flexible, il faut que la valeur de la propriété display de cet élément soit flex ou inline-flex.Dès Tags: concepts, base, pour, flexbox,

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.