Scroll

Wie man eine benutzerorientierte Suche zur MotoCMS 3 Vorlage hinzufügen kann

Beachten Sie bitte darauf, dass man eine Suche nur zur Live-Website hinzufügen kann. Diese Option funktioniert in Demoversionen, auf temporäre URLs und auf der Seite "In der Bearbeitung" nicht. 

Eine benutzerorientierte Suche von Google ermöglicht es Ihnen, eine Suchmaschine auf der Website zu erstellen. Mit Hilfe von diesem Tool kann man eigene Suchmaschine in angegebenen Sammlung von Webseiten oder Seiten erstellen. Um ein benutzerorientiertes Suchen einzubauen, sollen Sie Folgendes ausführen:

1. Auf der Hauptseite Benutzerdefinierte Suchmaschine klicken Sie auf den Button Benutzerdefinierte Suchmaschine erstellen.


2. In dem Abschnitt Zu durchsuchende Websites geben Sie die den Namen der Website ein, die die Suchmaschine durchsuchen muss. Hier kann man jegliche (nicht nur eigene) Websiten oder separate Seiten angeben. 

3. Der Name Ihrer Suchmaschine wird automatisch laut angegebenen URLs erstellt. Er kann aber geändert werden. 

4. Wählen Sie die Sprache für Ihre Suchmaschine aus. So wird die Oberflächensprache der Suchmaschine festgelegt. Sie beeinflusst aber tatsächlichen Suchergebnisse nicht. 

5. Klicken Sie auf den Button Erstellen.


6. Klicken Sie dann den Button Code abrufen.

7. Öffnen Sie den Tab Einrichtung.

8. Öffnen Sie den Tab Design und dann wählen Sie Overlay aus.


9. Klicken Sie danach auf den Button Speichern & Code abrufen

10. Stellen Sie das Widget Eingebauter Code an die Seite, wo sich die Suche befinden soll. Danach fügen Sie den Code ins Feld HTML Code einfügen ein. Am Ende des Codes fügen Sie auch folgende Zeilen ein:

<style>

    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>

11. Jetzt haben die eine benutzerorientierten Suche auf der Seite

Wichtig! Wir können nicht garantieren, dass eine benutzerorientierte Suche korrekt funktionirt, wenn Sie einen anderen Quellcode oder Einstellungen nutzen. 

Mit Hilfe von diesem Teil der Anleitung kann man die Suche anpassen. 

Wenn Sie das Design der Suche ändern möchten, sollen Sie den Code bearbeiten, der in 8. Schritt benutzt wurde. Dafür sollen Sie den Code vor dem Tag </style> hinzufügen. 

a) Um die Hintergrund- und Rahmenfarbe des Widgets zu ändern, fügen Sie diesen Code ein:

.gsc-control-cse {
border-color: #FFFFFF;
background-color: #FFFFFF;

}

 

b) Um die Farbe des Buttons beim Schweben zu ändern, fügen Sie diesen Code hinzu:

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;

}

.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}


c) Um die Rahmenfarbe des Buttons beim Schweben zu ändern, fügen Sie diesen Code hinzu:

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #FFFFFF;


d) Um die Hintergrundfarbe des Fensters mit den Ergebnissen zu ändern, fügen Sie diesen Code hinzu:

.gsc-results-wrapper-overlay {
background: #FFFFFF;

}


e) Um die Hintergrundfarbe des Blocks mit den Ergebnissen zu ändern, fügen Sie diesen Code hinzu:

gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
background-color: #FFFFFF;

}


Statt #FFFFFF geben Sie den Farbcode, den Sie festlegen möchten um eigene Farben hinzuzufügen. 


Zum Beispiel, um die Hintergrund- und Buttonfarbe des Widgets zu bearbeiten, sollen Sie die Codes aus den Punken a) und b) vor den Tag </style> in den Code aus dem Punkt 8 hinzufügen. 

Standartmäßiger Code fürs Widget Suche sieht so aus:

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>


Dachdem Sie Ihre Einstellungen der Farbe festlegt haben, soll der Code so aussiehen:


<style>

    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}

.gsc-control-cse {

border-color: #FFFFFF;
background-color: #FFFFFF;

}

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;

}

.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}

</style>

Haben Sie Fragen? Anfrage einreichen

Kommentare