Google Scripte - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Google Scripte

Scripte > Attachment

Google Search, Google Translator, Google Maps, Google Kalender

Eigentlich findet jeder die Code für die Google Suche, den Google Translator, die Google Map oder den Google Kalender problemlos im Internet.
Diese Standardcode aus dem Internet wurden hier ein wenig farblich gestaltet und mit CSS ein wenig aufgewertet, so dass die Skripte mit eigener CSS-Datei dem Style der Homepage angepsst werden können.
Es sind immer 2 Varianten zur Einbindung erläutert. Sollten diese Skripe auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Änderungen nur in einer Datei durchführen zu müssen. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese können aber auch durch einen Doppelklick ausgeführt werden.
Hinweis:
Bei den Skripten "Google Search" und "Google Translate" kann das "GOOGLE"-Kopflogo auch entfernt werden.
Hinweise dazu stehen im Skript. Google ist Markenzeichen der Google LLC, USA.
Google Search Konsole
Google-Logo

» World Wide Web » X5 Helpsite
Download Button
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj84_1/gg_search.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj84_1/gg_search.inc.html"; ?>

alternative Einbindung:
<div align="center">
<form method=GET action="http://www.google.com/search">
<a href="http://www.google.com/">
<img src="wsX5Obj/Obj84_1/gg_logo.gif" alt="Google-Logo">     <!-- Zeile löschen: ohne Google-Logo -->
</a>
<p>
<label>
<input class="Obj84_field" type="test" name="q" size="35" maxlength="40" required="required"
value="" placeholder="Suchbegriff eingeben (mind. 4 Zeichen)">
</label>
<button class="Obj84_btn" type="submit" name="btnG">
suchen
</button>
</p>
<input type="hidden" name="domains" value="http://x5forum.home-wiekau.de">  
<input type="hidden" name="ie" value="iso-8859-1">  
<input type="hidden" name="oe" value="iso-8859-1">
<input type="radio" name="sitesearch" value="">&raquo; World Wide Web
<input type="radio" name="sitesearch" value="http://x5forum.home-wiekau.de" checked> &raquo; X5 Helpsite
</form>
</div>
Code Datei "gg_search.css"
.Obj84_field { background-color: #ffffff; border: 1px solid #7C6031; padding: 4px; border-radius: 5px;
color: #000000; font-weight: normal; font-style: normal; }
.Obj84_btn   { font-family: tahoma; color: #7C6031; font-size: 12px; font-weight: bold; background-color: #EEF6E8;
border: 1px solid #7C6031; padding: 4px; border-radius: 5px; }
.Obj84_btn:hover { background-color: #B4DA9F; }
Google Translator

Google-Logo

Download Button
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj84_2/gg_trans.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj84_2/gg_trans.inc.html"; ?>

alternative Einbindung:
<div align="center" id="google_translate_element">
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'de'     // Grundeinstellung deutsch
}, 'google_translate_element');
}
</script>
<p><img src="wsX5Obj/Obj84_2/gg_logo.gif" alt="Google-Logo"></p>     
<!-- Zeile löschen: ohne Google-Logo -->
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
Code Datei "gg_trans.css"
.goog-te-combo { background-color: #ffffff; border: 1px solid #7C6031; padding: 4px; border-radius: 5px;
color: #000000; font-weight: normal; font-style: normal; }
Google Maps
Download Button
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj84_3/gg_maps.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj84_3/gg_maps.inc.html"; ?>

alternative Einbindung:
<div align="center">
<iframe
src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2405.8854281805106!2d8.391161315297264!
3d52.91448997989081!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b731dc712d1ad5%3A0xc6a8d2e0f9d46c12!
2sKleine%20Wiekau%201%2C%2027793%20Wildeshausen!5e0!3m2!1sde!2sde!4v1582374605609!5m2!1sde!2sde"
class="Obj84_maps"
allowfullscreen="">
</iframe>
<!--
1. Webseite aufrufen: https://www.google.com/maps
2. Karten-Adresse in oberer Suchleiste eingeben.
3. Menüpunkt aufrufen: "Karte teilen oder einbetten".
4. Reiter auswählen: "Karte einbetten".
5. Code kopieren und einfügen.
6. Code gemäß oberer Vorlage ändern.
7. CSS-Datei "gg_maps.css" ggf. anpassen.
-->
</div>
Code Datei "gg_maps.css"
.Obj84_maps { width: 650px; height: 400px; background-color: transparent; border: 1px solid #000; }
Google Kalender
Es müssen nicht alle Parameter zur Anwendung kommen, z. B. der Parameter width= kann auch entfallen, wenn die Höhe hight= mindestens angegeben wurde. Die Breiten und Höhenangaben müssen aus optischen Gründen mit der Frame-Formatierung in der CSS-Datei "gg_cals.css" übereinstimmen.
Wir gehen hier davon aus, dass der Google-Kalender auch die öffentliche Freigabe erhalten hat.
In unserem  Beispiel haben wir das Datum vom 08. bis 14. Juni 2014 zur Start-Ausgabe eingestellt:
Download Button
x runter geladen
Parameter:
title=
Bei mehreren Kalendern sinnvoll
Ausgabe Überschrift im Kopf des Kalenders

dates=
20140611/20140615&
zusätzlich Ausgabe und Anzeige Datum-Bereich

dates=
20190920T160000/20190920T180000&
...  wie obere aber mit Uhrzeitangabe

mode=
[WEEK/MONTH] Woche/Monat
Start-Tab des Kalenders

showNav=
[1/0] j/n
Ausgabe Navigationspfeile im Kopf des Kalenders

showDate=
[1/0] j/n
Ausgabe Datum im Kopf

showPrint=
[1/0] j/n
Ausgabe Druckersymbol im Kopf des Kalenders

showTabs=
[1/0] j/n
Ausgabe Reiter-Tabs

showCalendars=
[1/0] j/n
unbenutzt

showTz=
[1/0] j/n
Ausgabe Zeitzone in Fußzeile des Kalenders

width=
in px, identisch "gg_cals.css"
Breite des Frames (Kalender)

height=
in px, identisch "gg_cals.css"
Höhe des Frames (Kalender)

wkst=
[1/0] j/n
Muss zur Ausgabe des Kaleders =1 sein, sonst Blockierung

bgcolor=
statt # mit %23 beginnend
Hintergrundfarbe Kalenderkopf

src=
statt . (dot) Trennung mit %40
Anmelde-E-Mail des Kalenders

color=
statt # mit %23 beginnend
Schriftfarbe der Einträge

ctz=
statt / Trennung mit %2F
Angabe/Einstellung der Zeitzone

class=
siehe "gg_cals.css"
Formatierung des Kalenders

Nicht zwingend benötigte Parameter können entfernt werden. Auch leere Parameter enden mit dem Zeichen &.
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj84_4/gg_cals.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj84_4/gg_cals.inc.html"; ?>

alternative Einbindung:
<div align="center">
<iframe src="https://www.google.com/calendar/embed?
title=Website X5 - Helpsite&
dates=20140611/20140615&
mode=WEEK&
showNav=1&
showDate=1&
showPrint=1&
showTabs=1&
showCalendars=2&
showTz=1&
height=600&
wkst=1&
bgcolor=%23B4DA9F&
src=x5forum%40home-wiekau.de&
color=%232952A3&
ctz=Europe%2FBerlin"
class="Obj84_cals">
</iframe>
</div>
Code Datei "gg_cals.css"
.Obj84_cals { padding:10px; height:600px; width:800px; background-color:#B4DA9F; border:2px solid #7c6032;
border-radius:8px; overflow:none; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt