Google Scripte - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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
Downloads:
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
Downloads:
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
Downloads:
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; }
Feedbacks zu ""

Andreas Eberharter

05.08.2012, 11:28

+0 -0  

dieser code funktioniert nicht ! Ist derselbe wie bei den Widgets, habe diesen code schon mehrmals (zur Probe) in meine webside eingefügt, das Programm stürtzt dann in der Vorschau ab !

Naja nun mal ganz ehrlich. Er funktioniert doch, kann man doch hier probieren.
Ev. doch was falsch gemacht??

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 83 Heute
            » 111 Gestern
            » 194 Woche
            » 83 Monat
            » 58586 Jahr
            » 282792 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt