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

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj84_1/gg_search.inc.html"; ?>

alternative Einbindung:

<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">

</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="">» World Wide Web
<input type="radio" name="sitesearch" value="http://x5forum.home-wiekau.de" checked> » X5 Helpsite

</form>

</div>

Nach dem <BODY> Tag

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

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj84_2/gg_trans.inc.html"; ?>

alternative Einbindung:

<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>

<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</div>

Nach dem <BODY> Tag

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

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj84_3/gg_maps.inc.html"; ?>

alternative Einbindung:

<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>

</div>

Nach dem <BODY> Tag

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:

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

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj84_4/gg_cals.inc.html"; ?>

alternative Einbindung:

<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>

Nach dem <BODY> Tag

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 «