5202

ein Blog über technische Fragen zu Blogger

Benutzerdefinierte Suche in Blogger

von



Bei Blogger ist die eingebaute Suchfunktion ... für einen Suchmaschinen-Betreiber mehr als peinlich. Die Suche über die Navbar Suchfunktion funktioniert seit 2009 nicht mehr richtig, das Blogger-Widget 'Suche' durchsucht die letzten 20 Posts und dann ist Schluss. Über beide Suchfunktionen ärgere ich mich mehr, als das ich damit jemals suche. Ihr kennt das bestimmt - ihr habt auf einem Blog einen alten Artikel gelesen, den ihr jetzt sucht; statt mit der internen Blogsuche, kommt ihr mit der allgemeinen Google-Suche meistens schneller an's Ziel. Warum also nicht gleich seinen Blog mit der allgemeine Google-Suche durchsuchen lassen? Das geht leicht mit einem fertigen Widget von Google, nämlich der "Benutzerdefinierte Suche".

Vorbereitung

Zur "Benutzerdefinierte Suche" holt ihr euch ihr als erstes eine Benutzerdefinierte Suchmaschine von Google.
Ihr erstellt eine neue 'Benutzerdefinierte Suchmaschine' - das geht einfach und ist selbsterklärend. Wenn ihr mit dem Einrichten fertig seit, könnt ihr die Suche sehr genau personalisieren. Es gibt dort unendlich viele Styles, Farben, Formen und Größe, schaut's euch einfach mal an. Am Ende bekommt ihr beim Punkt "Code abrufen" den Code für euren Blog.

Code

Der Code besteht aus drei Teilen: Einem <div> Container, einem Script und CSS. Bei mir schaut das Beispielsweise so aus:
<Div> Container
<div id="cse" style="width: 100%;">Loading</div>
Script
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'de', style : google.loader.themes.ESPRESSO});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};
    var googleAnalyticsOptions = {};
    googleAnalyticsOptions['queryParameter'] = 'Suche';
    googleAnalyticsOptions['categoryParameter'] = 'css';
    customSearchOptions['googleAnalyticsOptions'] = googleAnalyticsOptions; 
var customSearchControl = new google.search.CustomSearchControl(
      '006218488578192978542:e2edio1ssr8', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
CSS
<style type="text/css">
  .gsc-control-cse {
    font-family: Georgia, serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  input.gsc-input {
    border-color: #D3BCA1;
  }
  input.gsc-search-button {
    border-color: #300D00;
    background-color: #461200;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #ad3a2b;
    background-color: #ad3a2b;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #461200;
    background-color: #461200;
  }
  .gsc-tabsArea {
    border-color: #461200;
  }
  .gsc-webResult.gsc-result,
  .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover,
  .gsc-webResult.gsc-result.gsc-promotion:hover,
  .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b,
  .gs-imageResult a.gs-title:link,
  .gs-imageResult a.gs-title:link b {
    color: #950000;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b,
  .gs-imageResult a.gs-title:visited,
  .gs-imageResult a.gs-title:visited b {
    color: #950000;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b,
  .gs-imageResult a.gs-title:hover,
  .gs-imageResult a.gs-title:hover b {
    color: #950000;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b,
  .gs-imageResult a.gs-title:active,
  .gs-imageResult a.gs-title:active b {
    color: #950000;
  }
  .gsc-cursor-page {
    color: #950000;
  }
  a.gsc-trailing-more-results:link {
    color: #950000;
  }
  .gs-webResult .gs-snippet,
  .gs-imageResult .gs-snippet,
  .gs-fileFormatType {
    color: #333333;
  }
  .gs-webResult div.gs-visibleUrl,
  .gs-imageResult div.gs-visibleUrl {
    color: #A25B08;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #A25B08;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gs-promotion div.gs-visibleUrl-short {
    display: none;
  }
  .gs-promotion div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #ad3a2b;
    background-color: #FFFFFF;
    color: #950000;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #461200;
    background-color: #461200;
    color: #950000;
  }
  .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #FEFEDC;
    background-color: #FFFFCC;
  }
  .gsc-completion-title {
    color: #950000;
  }
  .gsc-completion-snippet {
    color: #333333;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #0000CC;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #0000CC;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #333333;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #A25B08;
  }
</style>

Einbau

Ihr packt Script und CSS in ein HTML/Java Gadget und platziert es möglichst tief im Blog. Den <div> Container könnt ihr einbauen wo ihr wollt - in einem HTML/Java Gadget, auf einer Seite, in einem Post, whatever. Wenn alles klappt, sollte das Ergebnis nun so aussehen:
Demo
Loading
Probiert's aus - mit dieser Suche durchsucht ihr mit der regulären Google-Suche meinen Blog. Das Ergebnis ist um Welten brauchbarer, als das 'offizielle' Blogger Suche-Gadget, was nur die letzten zwanzig Posts durchsucht.

Fragen, Anmerkungen

Ich habe mich lange mit der nicht-funktionierende Suche bei Blogger beschäftigt und nach einer besseren Lösung gesucht. Wieso ich bis jetzt nicht auf die Idee gekommen bin, die Google-Suche zu benützen? Weiß ich nicht, mnachmal liegt das Gute so nah, dass man es nicht erkennen kann, oder? Falls es Fragen oder Anmerkungen zu der Google-Suche gibt, fragt einfach in den Kommentaren nach.