Montag, 28. Dezember 2015

Externen Downloadbereich für Blogspot-Blogger einrichten / 5

Es gibt einiges dem Beitrag zu ergänzen.

Warum ich soviele Teile zum Tutorial gemacht habe?
Nachdem ich merkte, dass ich selber der Überblick verlor, habe ich mich dazu entschlossen.

Ich habe mich bemüht Fachchinesisch aussen vor zu lassen und schnell möglichst auf dem Punkt zu kommen.
Fachleute die das lesen kriegen mit Sicherheit die Krätze, aber für die ist das auch nicht gedacht.

Gerade mit dem Umgang von htacces-Dateien kann eine Menge schief gehen.
Ausserdem wollte ich noch was zum Webspace sagen.

Ich kriege das nicht hin!
Falls Dich das hier überfordert, Du aber einen Downloadbereich bräuchtest und das Problem nicht im Support gelöst werden kann, kannst Du es Dir für einen kleinen Betrag einrichten lassen.
In dem Fall wende Dich an meinen Kollegen. Ich habe dafür keine Zeit oder besser gesagt, ich möchte dafür keine Zeit haben :)
Schreibe an: tupamaro@gmx.net.
Berufe Dich auf mich bzw auf dieses Tutorial.

Webspace
Du hast jetzt 1 bzw 2 GB Webspace zur Verfügung.
Du kannst ihn natürlich nur für Downloads nutzen, oder beispielsweise auch um Dateien online zu hinterlegen. Sei es zur Sicherung, falls Du versehentlich welche vom Google-Account löscht oder falls Dein Rechner crashen sollte.
In dem Fall würde ich einfach einen neuen Ordner anlegen und diesen ohne htaccess hochladen.
Es sei denn, Du willst diese ebenfalls auf Klick downloaden.

Ebenfalls lässt sich ohne große Umständen eine Startseite einrichten um ein paar Infos auf der Startseite zu plazieren.
Sogar ein kleiner WordPress-Blog ist als Startseite machbar.

Damit will ich sagen, dass man mit dem Webspace mehr machen kann als nur ein paar Dateien hochzuladen.

Zum Download
Dieser verhält sich je nach Browsereintstellung anders.
Bei mir startet der bei Chrome automatisch, aber bei Firefox bekomme ich die Meldung wo ich es hin laden will.
Das ist eine Sache der jeweiligen Einstellung.

htaccess
Immer wieder gibt es Probleme beim Up oder Downloaden von htaccess Dateien.
Bei FileZilla steht die Übertragungsform auf Automatisch.
Siehe unter "Übertragung>>Übertragungsform".
Ich selber hatte damit nie großartige Probleme.
Trotzdem wird im Netzt oft empfohlen, die Übertragungsart "ASCII" zu wählen.
Bei Bedarf google mal ein bißchen. Es gibt hierzu Unmengen von Seiten.

Auf jeden Fall kann bei der Übertragung die htaccess zerstört werden.
Da hilft nur neu anlegen.

Man kann einiges mit htaccess machen und man hätte das auch anders machen können. Ich habe mich für die schnellste Variante entschieden.

Fuckin' Cache
Wenn Du ein paar Versuche brauchst um den Download zu realisieren, leere zwischendurch mal den Cache.
Mich hat dieser schon einige Male veräppelt.
Alles klappte an sich, aber mein Browser hat nicht die neue Version ausgespuckt.

Mir ist FileZilla zu unsicher
Auch da kann ich Dich nur bitten Dich selber schlau zu machen.
Neben WinSCP (Windows) gibt es weitere Free-Clients, aber wenn Sicherheit im Vordergrund steht, solltest Du Dir kostenpflichtige anschauen.

Gibt es bessere Freehoster als bplaced?
Es gibt wohl noch ein paar, die ähnliche Leistungen anbieten.
Bei manchen sind bestimmte Dateiarten oder gar Downloads untersagt.
Ausserdem haben sich schon einige Freehoster verabschiedet.
Bislang ist bplaced nicht klein zu kriegen.

Wer mehr Sicherheit möchte, der muß eben ein paar Euro locker machen.
Verallgemeinern kann man da nichts, da viele Faktoren eine Rolle spielen.
Wieviel Speicherplatz, wieviele Datenbanken oder FTP-Zugänge.....
Wenn Du diesbezüglich Rat benötigst, kannst Du Dich ebenfalls an  tupamaro@gmx.net  wenden.

Ich habe WorpPress und htaccess wird nicht angenommen.
Dann versuche das hier, dabei unten entsprechende Dateiendungen ergänzen:

Options +Indexes
IndexOptions +FancyIndexing
IndexIgnore *.htaccess
AddType application/octet-stream .pdf .zip

Oder falls der Server einen 500er Fehler meldet nur
AddType application/octet-stream .pdf .zip

Wenn etwas nicht klappt, bitte unten kommentieren!


Bis dann
jpm

Externen Downloadbereich für Blogspot-Blogger einrichten / 4

Wir haben also einen Webspace und sind in der Lage mit ihm zu kommunizieren.
Abgesehen von den Standarddateien von bplaced, ist er bislang leer.

Wie gesagt ist der unter www.Benutzername.bplaced.net erreichbar.
Um einiges zu verdeutlichen werde ich folgende Adresse verwenden, die vom Kumpel nicht mehr benötigt wird: www.bergischertreff.bplaced.net.

Wenn ich diese im Browser aufrufe, erscheint das:

Wir (und jeder andere) haben Einsicht auf die Struktur.
Das ist eine Manko, dass bei bplaced auftritt, welches bei anderen Hostern nicht vorkommt.
Es gilt also erstmal diese Sicherheitslücke zu schließen.

Das machen wir mit einer sogenannten htaccess-Datei.
Diese kann mit dem Windows-Editor erstellt werden.

Das machen wir mal:
Editor öffnen und folgendes einfügen:
(Nimmt Euch die Zeit das mit der Hand einzugeben. Beim Kopieren können Probleme auftauchen)

Options -Indexes
ErrorDocument 403 /403.php
ErrorDocument 404 /404.php

Das ganze speichern wir als .htaccess
Dabei ist der Punkt vorne sehr wichtig.
Wichtig ist es auch die Datei in ANSI-Codierung zu speichern:

Das ist also jetzt keine Textdatei mehr.
In der Regel speichert der Editor ab Win7 die Datei problemlos.
Sollte diese als Textdatei gespeichert werden, dann müsst ihr die Endung .txt entfernen.
Bei Problemen >> melden oder googlen wie man Dateiendungen wieder sichtbar macht und diese dann entfernen.
Oder was auch geht, ist die Endung mit FileZilla zu entfernen.

Jetzt übertragen wir diese Datei auf die oberste Fläche des Servers (Root).
Dazu öffnen wir den bereits eingerichteten Filezilla.
Da die Daten schon eingetragen sind brauchen wir jetzt nur noch auf dem Pfeil zu drücken und unten erscheint unser Server.

Nach der Bestätigung öffnet sich dieser.
Navigiert links dahin, wo Ihr Eure htaccess gespeichert habt.
Bei mir ist es der Desktop.
Anschließend mit Rechtsklick auf "Hochladen" und die Übertragung beginnt.

Jetzt rufen wir erneut www.bergischertreff.bplaced.net auf und wir sehen:

Wie haben also jetzt eine Fehlermelung.
Eine "Du kommst hier net rein" Meldung.
Das Verzeichnis ist für den externen Zugriff erstmal gesperrt.
Bei bplaced Freehosting lässt sich leider keine eigene Fehlermeldung realisieren.
Soll uns aber Latte sein, Hauptsache der Server ist nicht offen.

Sicherlich mag sich der eine oder andere denken: "Hättet man genauso gut eine index-Datei hochladen können".
Das ist ja schön und gut, aber mit der htaccess sorge ich dafür dass kein Ordner mehr betreten werden kann. Das gilt auch für Unterordner.

Nachdem wir das erledigt haben wird es Zeit unsere Download-Dateien hochzuladen.
Ich werde das so machen, dass ich einen Ordner auf dem Rechner erstelle und dort eine png einfüge.
Mein Ordner heisst "downloads".  Oh, welch eine Überaschung :)
Meine png heisst: "download-test.png" .

Anschließend lade ich den gesamten Ordner genauso wie oben in den Root hinein.

Um diese Datei aufzurufen gehe ich von meiner Internetadresse aus:
Bei mir wäre es ja http://bergischertreff.bplaced.net .
Dahinter den weiteren Pfad zur Datei:
http://bergischertreff.bplaced.net/downloads/download-test.png

Wenn wir diese Adresse in den Browser aufrufen sehen wir, dass das Bild zwar geöffnet wird, aber ein Download findet nicht statt.
Dafür brauchen wir eine zweite htaccess, die wir in den Ordner "downloads" hochladen.

Wir erzeugen diese jetzt und haben es dann geschafft.
Wir gehen mit dem Editor genauso vor wie bei der ersten htaccess.
Diesmal geben wir folgendes ein:

<Files *.*>
Header set Content-Disposition attachment
</Files>

<Files .htaccess>
order allow,deny
deny from all
</Files> 

Jetzt sollte die Datei als Download zur Verfügung stehen.
HIER TESTEN

Es ist vollbracht!
Dein Downloadbereich wurde angelegt.

Ein paar Sachen möchte ich noch ergänzen.
Dafür lege ich aber noch einen Post an.
Ich würde mich freuen, wenn Du da mal vorbei schaust.

Externen Downloadbereich für Blogspot-Blogger einrichten / 3

Jetzt haben wir einen Webspace und müssen nur noch schauen, dass wir unsere Daten vom Rechner auf dem Server rüber bekommen.
Dafür benötigen wir ein Programm. Ein so genannter FTP-Client.

Das ist der Link zur Herstellerseite von FileZilla . Dieses Programm werden wir gleich benötigen.
Bitte runterladen und installieren. Darauf gehe ich jetzt nicht ein.

Für die Einrichtung benötigen wir lediglich unseren Benutzernamen und das Passwort, welches wir bei bplaced angegeben haben.

Nachdem wir FileZilla gestartet haben, erscheint dieses Fenster

Dabei fällt auf, dass auf der rechten Seite nichts steht.
Das liegt daran, dass dort die Serverdaten aufgelistet werden.
Da wir noch nicht verbunden sind, kann daher noch nichts erscheinen,
Hier zur Verdeutlichung:

So ähnlich wie bein Win-Explorer lässt sich auf beiden Seiten dort hin navigieren, wo ich es benötige.

Beim Navigieren werde ich klassisich vorgehen, das heisst mich über die Ordner durchnavigieren.
Drag and Drop kann ebenfalls verwendet werden.

Stellen wir also eine Verbindung her.
Wir öffnen den Servermanager

Daraufhin öffnet sich dieses Fenster und wir können den Server einrichten, indem wir den entsprechenden Button klicken (siehe unten)

Jetzt müssen wir unsere Daten eingeben, die wir bei bplaced vergeben haben.
Im folgenden Bild sehen wir welche Bereiche für uns von Bedeutung sind.

Ersetzte "Benutzername" durch Euren Benutzernamen um die Einrichtung zu tätigen.
1. Irgendwas (Benutzername,Mein Server, whatever)
2. Benutzername.bplaced.net
3. Stellst Du auf "Normal" und Passwort wird gespeichert. Stellst Du auf "Nach Passwort fragen", wird das Passwort bei jeder Verbindung abgefragt. (Lese hierzu ganz unten PS)
4. Benutzername
5. Das von Dir gewählte Passwort

Schließlich auf "Verbinden" klicken und wir müssen diese Verbindung lediglich noch bestätigen. Zertifikat akzepktieren  + OK

Jetzt sehen auf der rechten Seite die vom Server automatisch erstellten Dateien.
Diese sollen uns nicht weiter jucken.
Je nach Anbieter sieht die Struktur eh anders aus.

Wir haben also unser Ziel erreicht und sind mit unserem Server verbunden.

Das ganze funktioniert natürlich auch umgekehrt, soll heissen, dass man Daten vom Server auf dem Rechner runter laden kann.

Im nächsten Teil werden wir den Server für den Download einrichten.




PS
FileZilla ist wohl der beliebteste FTP-Client.
Leicht zu verstehen und zu handhaben.
Allerdings wird das Passwort in base64 kodiert.
Im Ordner Data>>Settings befindet sich die Datei sitemanager.xml.
Dort finden wir das kodierte Passwort.
Auf der Seite https://www.base64decode.org  lässt sich das Passwort ohne weiteres sichtbar machen.
Wer also mehr Sicherheit möchte, der soll Google bemühen.
Uns soll FileZilla erst einmal genügen.

Sonntag, 27. Dezember 2015

Externen Downloadbereich für Blogspot-Blogger einrichten / 2

Aufbauend auf  Teil 1, werden wir uns jetzt unseren Webspace anlegen.
Einerseits würde ich gerne diesen Schritt überspringen, aber andererseits gibt es welche, die das noch nie gemacht haben.

Wir gehen also auf  http://bplaced.net .
An sich ist die Sache selbsterklärend und es gibt Unmengen von Berichten darüber, deswegen gehe ich hier nur oberflächlich darauf ein.

Wir sehen auf der Seite folgendes:

Links zwei Free-Pakete, die sich etwas unterscheiden. Davon muß ich mir bei der Anmeldung gleich eins aussuchen.

Rechts unten haben wir die Option "domaincheck".
Hier müssen wir einen noch nicht verwendeten Benutzernamen finden.
Man sollte bedenken, dass Dein Space später unter dieser Adresse zu erreichen ist. Also:  www.Benutzername.bplaced.net.

Das finden eines anständigen Benutzernamens kann -so ähnlich wie bei blogger- ein paar Anläufe benötigen.
Wichtig ist, dass Ihr eine "echte" Mailadresse verwendet. Keine "Trash-Mail-Adresse".
Bplaced wird Euch nacher einen Bestätigungslink senden um Euren Account freizuschalten.
Pro Mailadresse darf nur ein Account angelegt werden.

Nachdem man einen freien Benutzernamen gefunden hat, geht es weiter zur eigentlichen Anmeldung.
( Ich habe eine übrig gebliebene Adresse, die ich verwenden werde. )

Den Benutzernamen und das angegebene Passwort werden wir noch zusätzlich benötigen um eine Verbindung zum Server herzustellen.

Jetzt geht es darum einen Paket auszusuchen. Wir können uns ruhig das 2GB-Paket aussuchen. Das ist genug Platz.
Wer nicht so viel Platz benötigt und evtl zukünftig mehrere Datenbanken braucht, der wähle das kleinere Paket.
Man könnte sich hier zB auch einen WordPress-Blog einrichten oder einfach eine ganz normale Homepage und je nach Vorhaben sind mehrere Datenbanken nötig.

Nachdem wir unsere Daten bei der Anmeldung eingegeben haben und diese erfolgreich war, schickt bplaced einen Bestätigungslink an die von uns angegebene Mailadresse. Diesen wie gewohnt bestätigen und somit ist der Account eingerichtet.

Um diesen jetzt und auch zukünftig zu betreten, gehen wir auf die Stratseite von bplaced .
Dort sehen wir den Userlogin.

Wir betreten den Account einfach mal abschließend.
Wenn es so wie unten aussieht, dann habt Ihr es geschafft und wir können zum nächsten Schritt gehen.

Dieser Bereich steht in der Regel sofort zur Verfügung.
Allerdings dauert es beim FTP-Zugang (Teil3) und bis die Seite extern erreichbar ist eine Weile.
Bei mir war es letztens eine Stunde, aber was solls, kostet ja nichts.

Man sollte nur daran denken sich mindestens alle 2 oder 3 Monate (müßt ihr selber mal googlen) den Account zu besuchen, da man sonst als inaktiv gilt und der Account dann gelöscht wird.
Dann wären alle Daten weg und Eure Besucher landen nur noch auf tote Links.
Ausserdem wäre die ganze Arbeit umsonst.
Man bekommt allerdings vorher eine Mail und wird darauf aufmerksam gemacht.
Ich schaue bei meinem Account einmal im Monat vorbei (einmal einloggen und dann wieder raus) und hatte noch nie Probleme.

Im nächsten Teil werden wir eine Verbindung zum Webspace herstellen.
Wie bereits gesagt: Wer weiter lesen möchten, kann mir folgen oder einfach zwischendurch schauen wann ich es online stelle.

Freitag, 25. Dezember 2015

Externen Downloadbereich für Blogspot-Blogger einrichten / 1

Das schöne an blogspot ist, dass man keinen eigenen Webspace benötigt, da man das gestellt bekommt.
Gleichzeitig ist es aber für einige Sachen nachteilhaft.
Für das was ich hier vorhabe, ist es der Fall.

Will man Dateien zum Download anbieten, wird es bei blogspot ätzend.
Zwar kann man mit Google Drive etwas in der Art machen, aber das ist mir nicht genug.
Damit meine ich auf einen Link klicken und Download startet automatisch und zwar egal welche Dateiform.

Das ist das was ich hier realisieren möchte.
Um die Sache übersichtlich zu halten, werde ich den Beitrag in mehreren Teilen splitten.

Erst einmal geht es darum grob zu verstehen was wir dafür benötigen.
Das wäre:
1. Einen Webspace um Dateien zu hinterlegen
2. Ein Programm um mit dem Webspace/Server zu kommunizieren
3. Zwei Dateien um das Ganze zu ermöglichen bzw anzupassen.

Natürlich auch entsprechende Dateien, die wir zum Download anbieten wollen.
Zumindest eine um einen Test durchzuführen.

Dadurch dass wir einen kostenlosen Anbieter verwenden werden, entstehen keine Kosten.
Ihr müßt lediglich etwas Zeit investieren.
Aber glaubt mir, das hier zu verfassen dauert wesentlich länger :)

Zu 1:
Als Webspace werde ich den kostenlosen Hoster bplaced verwenden.
Ihr könnt auch einen anderen verwenden.
Wichtig ist es das es PHP-tauglich ist bzw sogenannte ''htaccess'' Dateien unterstützt.
Für unser Vorhaben ist bplaced ausreichend.
Zwar sind bei bplaced-freehosting einige Funktionen eingeschränkt, die uns aber hierfür nicht betreffen.

Zu 2:
Um mit dem Server zu kommunizieren habe ich das weitverbreitete Programm FileZilla gewählt.
Ich verwende (wenn überhaupt) die Portable Version, damit ich es bei Bedarf in der Hosentasche habe.

Zu 3:
Diese Dateien können mit dem Windows-Editor erzeugt werden.
Nicht Notepad, Word oder so ein Kram.
Ich selber verwende Notepad++ .
Da bist du immer auf der sicheren Seite.
Im Tutorial werde ich aber den Windows-On-Board-Editor verwenden.

Soweit also kurz erklärt worum es geht.
Es mag zwar etwas schwierig klingen, aber das ist es nicht.

Der Download startet je nach Browsereinstellung automatisch oder es gibt eine Anfrage.

Im nächsten Teil werde ich auf dem Webspace eingehen.
Wer also weiter lesen möchten, kann mir folgen oder einfach nur mal zwischendurch schauen wann ich es online stelle.
Ich werde versuchen nicht zu vergessen den Beitrag zu teilen, was mir immer wieder passiert.

Ich hoffe bis hierhin ist es deutlich genug gewesen.
Falls nicht, bitte kurz unten kommentieren und ich kann dementsprechend hier was ergänzen/verändern.

Getestet wurde der Download unter:
Desk: Crome, Firefox, Explorer
Mobil: Samsung S6


Sonntag, 29. November 2015

Fullscreen Rotation Hintergrundbild auf Blogspot

Oder wechselnde Fullscreen Hintergundbilder.

Das Einbinden eines 100%-Hintergrundbildes hatten wir ja schon.
Wer es noch nicht kennt, kann es hier nachlesen.

Was ist aber, wenn ich möchte, dass das Hintergrundbild wechseln soll?
So wie auf diesem Blog .
Eine GIF-Animation käme in Frage, aber dann habe ich nach der Erstellung nicht die Möglichkeit die Bilder schnell auszutauschen, Also Käse.

Gott sei Dank gibt es jQuery.
Genauer gesagt handelt es sich um das  jQuery Cycle Plugin.

Allerdings erweist sich das Einbinden in den Quellcode bei blogspot als etwas umständlicher.
Der XML-Editor parst einige Sachen einfach nicht so, wie der Erfinder das gerne hätte, wenn ich den Code in die HTML rein kopiere.
Insofern ist die externe Auszulagerung der Plugins eine vernünftige, schnelle Alternative.
Wer keinen eigenen Webspace hat, sollte sich überlegen, ob Dropbox oder ähnliche Dienste das ebenfalls ermöglichen. Ich selber nutze solche Dienste nicht, von daher beschränke ich mich darauf, die Dateien auf einem Server zu legen.

Wir benötigen folgende Sachen:
1. Unsere Bilder. Ich gehe im Beispiel auf drei Stück ein (meine Maße: 1280 x 800 px).
Ihr könnt natürlich soviele Pics verwenden wir Ihr wollt.
Meine Bilder habe ich übrigens von wallpaperswide.com
2. Etwas CSS-Eingabe direkt in die blogger-HTML, damit er weisst, wie sich die Hintergrundbilder verhalten sollen.Ausserdem den Bildern im Dashboard auf transparent stellen>> also ohne den Standardhintergrund.
Eine CSS für jQuery selbst, die wir entern auslagern (jquery.maximage.css).
3. Etwas HTML-Code.
4. Die Scripts zum Einbinden.

Also los gehts
Jagd Eure Bilder auf Picasa oder wohin Ihr wollt hoch und kopiert den Pfad zu den Bildern.
Ich verwende jpg's, aber ihr könnt auch andere Formate nehmen.

Unsere Scripts hier herunterladen (WinRar-Datei) .

JETZT GEHT ES NUR DARUM UNSEREN CODE EINZUBAUEN.
Dazu müssen wir über unser Dashboard in den HTML-Code hinein.

Kopiert als aller erstes diese CSS-Anweisung in Euren Blog hinein 
#maximage {
position:fixed !important; /* das ist die Box wo unsere Bilder hinein kommen*/
} 

Ferner unter Dashboard>Vorlage>>Anpassen>>Erweitert>>Bilder>>Hintergrundfarbe>>transparent

Anschließend alle drei Dateien aus dem WinRar-Verzeichnis entpacken und auf dem Server hochladen und den Pfad kopieren.

Die jquery.maximage.css setzen wir zwischen <head> und </head>

<link rel="stylesheet" href="Pfad-zur-Datei/jquery.maximage.css" type="text/css" media="screen" />

Jetzt bereiten wir unseser Bilder vor und setzen danach die Links zu den anderen beiden Dateien aus der WinRar-Datei drunter. Der folgende Code setzen wir gleich direkt in unsere HTML hinein direkt oben in den Body:

<div id="maximage"> <img src="Pfad-zur-Bild-1.jpg" alt="" />
<img src="Pfad-zur-Bild-2.jpg" alt="" />
<img src="Pfad-zur-Bild-3.jpg" alt="" />
usw
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script> <script src="Pfad-zur-Datei/jquery.cycle.all.js" type="text/javascript"></script>
<script src="Pfad-zur-Datei/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){ // Trigger maximage jQuery('#maximage').maximage(); }); </script>

Aber Vorsicht! Es kann durchaus sein, dass das ganze bei Euch nicht läuft. Es kann passieren, dass sich JavaScripts gegenseitig aushebeln.

Zugegeben, so eine Spielerei braucht man nicht unbedingt. Andererseits habe ich das schon ein paar mal gesehen und war neugierig zu sehen, ob sich das auch auf blogspot umsetzen lässt.

Sonntag, 13. September 2015

Nivo-Slider in Blogger einbauen

Vorab sei gesagt, dass ich folgende Spielerei eher auf Desktopdesings empfehle.
Bei mobilen Versionen soll jeder bitte für sich abwägen.

Wir werden wie auf der Startseite von spy-photography einen Slider in unseren Blog einbauen.
Und zwar ganz oben wie auf meinen Testblog zu sehen.
Ihr könnt ihn einbauen wo Ihr wollt.

Dateien hierfür findet ihr hier zum Download.
Lizens bitte selber auf Anbieterseite durchlesen.
Die Anordnung der Dateien bzw Ordner kann etwas von meiner abweichen, da der Slider schon einige Jährchen auf dem Buckel hat und mittlerweile verschiedene Varianten erschienen sind.

Nun ist es für diejenigen,die einen eigenen Webspace haben kein großes Ding sich die Dateien auf den Server zu legen um diese aufzurufen.
Haben jedoch nicht alle.
Hierzu bitte ganz unten unter PS lesen.

Fangen wir damit an unter Layout eine neue HTML/Javascript  Cross Column Gadget einfügen.
Die neue Column nennt Blogger region-inner tabs-inner

Anschließend den Header und die navbar mittels CSS entfernen und den padding (Absand zum Rand) bei der neuen Column entfernen.
CSS lautet jetzt:
#navbar {display:none}
.header {display:none}
.region-inner.tabs-inner {margin:0;padding:0}
#crosscol {margin:0;padding:0}

Wenn man nicht möchte dass der slider nach dem Laden springt:
.region-inner.tabs-inner {margin:0;padding:0;height:397px}
Ihr tragt natürlich die Höhe Eurer Bilder ein.
Würde ich nur auf Desktopversion nehmen


Jetzt ein paar Angaben im Headbereich eingeben um den Slider zu steuern.
Wir gehen unter Vorlage>>HTML bearbeiten und geben zwischen <head>und</head> folgendes ein:
<!-- NIVO SLIDER ANFANG -->
<link href='pfad-zum-server/themes/default/default.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/light/light.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/dark/dark.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/themes/bar/bar.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='pfad-zum-server/nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- NIVO SLIDER ENDE -->


Fehlen nur noch meine vorbereiteten Bilder auf Picasa-Webalben hochzuladen und mir den Pfad zu kopieren
Ich habe mir drei Bilder vom Kumpel ausgeliehen, die die Maße 940x397 Pixel haben.
( slider-01.jpg – slider-02.jpg – slider-03jpg )
Das wird die Breite sein,die meine Column haben wird.
Die Höhe könnt Ihr so legen wie es Euch passt.
Wichtig ist nur,dass die Bilder alle die selben Maße haben.

Und jetzt geht es ab in unsere Column um folgendes einzugeben:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!-- Bild 1 - Einfaches Bild -->
<img src="pfad-picasa-album/slider-01.jpg" alt="" />

<!-- Bild 2 - Verlinktes Bild -->
<a href="#"><img src="pfad-picasa-album/slider-02.jpg" alt="" title="Klick auf das Bild und du gelangst zur Galerie" /></a>

<!-- Bild 3 - Verlinkte Schrift -->
<img src="pfad-picasa-album/slider-03.jpg" alt="" title="#htmlcaption" />
</div>
<!-- Dieser Text wird bei Bild 3 ausgegeben -->
<div id="htmlcaption" class="nivo-html-caption">
Direkt zur <a href="#"> Galerie</a>.
</div>
</div>

<script type="text/javascript" src="pfad-zum-server/scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="pfad-zum-server/scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Und wenn wir alles richtig gemacht haben sollte es sliden.

 


PS
Wer kein eigenen Webspace hat, der kann sich selber eins einrihten.
Das beschreibe ich in diesem Tutorial .

Freitag, 4. September 2015

Social Media Container - Rechts gefloatet

Folgendes schreibe ich für einen Bloguser und für andere natürlich auch.
Die Profis können ruhig wegschauen.
Aber das macht Ihr auch nicht,wohl? Diese Neugier... Erwischt!! :)

However. Es geht darum in einer Navigation Social-Media-Buttons einzubauen, die sich am rechten Rand ausrichten. Da lag das Problem.
Die Schwierigkeit ist der Kasten rechts mit den Buttons.
Auf das minimum reduziert und unausgeschmückt soll es so oder so ähnlich aussehen:
Mein Logo
Buttons

Jetzt müssen wir nur verstehen wie der Aufbau ist.
Das was Du immer im Quelltext siehst, als div bezeichnet, ist ja nichts anderes als eine Box.

In diesem Fall haben wie eine Box und darin befinden sich zwei boxen,
Eine links und die andere rechts positioniert. Alle Boxen haben hier eine Höhe von 30px.
Vereinfacht haben wir in der HTML:
<div class="green">
    <div class="red">Mein Logo</div>
    <div class="orange">Buttons</div>
</div>

Daher ist unsere CSS (background entspricht der jeweiligen Farbe) erstmal
.green {background:green; height:30px}
.red {background:red; height: 30px}
.orange {background:orange; height: 30px}

Doch das wird nicht klappen, weil die div-elemente von Haus aus einen Standardwert haben.
Das ist display: block.
Das heißt sie zieht sich -solange ich nichts anderes befehle- bis zum Ende des vorhandenen, restlichen Platzes.
Zum besseren Verständnis:
Die grüne Box alleine verhält sich so:
Volle Möhre auf die ganze Breite gezogen.

Und was passiert, wenn ich alle drei Boxen wie oben beschrieben miteinander verschachtel?
Mein Logo
Buttons


Die zwei Boxen innen verhalten sich wie die grüne.
Ziehen sich bis zum Ende, stellen sich untereinander und überdecken den Hintergrund der grünen Box.

Es wird also Zeit den inneren Boxen bescheid zu geben, dass sie sich anders verhalten sollen als sie standardmäßig unterwegs sind. Den Befehl aushebeln.

Dafür gibt es für diesen Zweck die CSS-Anweisung float (engl.sowas wie fließen,schweben,gleiten).
Da hätten wir   float:right - float:left - float:none

CSS:
.green {background:green; height: 30px}
.red {background:red; height: 30px;float:left}
.orange {background:orange; height: 30px; float:right}

Mein Logo
Buttons

Das einzige was wir noch machen müssen ist, bescheid zu geben, dass wir mit dem floaten aufhören.
Das machen wir mit CSS-Anweisung clear: both (tradizionelle Methode.gibt andere,aber lassen wir erstmal gut sein)

Hier um Verwirrung zu vermeiden die gesamte CSS nochmal,bevor wir anfangen sie auszuschmücken.
.green {background:green; } << Höhe jetzt weggelassen,damit sie sich automatisch anpasst
.red {background:red; height: 30px;float:left}
.orange {background:orange; height: 30px; float:right}
.clear {both}

Gesamte HTML:
<div class="green">
    <div class="red">Mein Logo</div>
    <div class="orange">Buttons</div>
    <div class="clear"></div>
</div>

Und jetzt fügen wir endlich unsere social-things-bums ein.
Ich nehme die ersten drei, die mir vor die Flinte laufen und lade sie auf Picasa hoch.


<div class="green">
    <div class="red">Mein Logo</div>
    <div class="orange">
          <img src="Pfad zum Bild1" alt="">
          <img src="Pfad zum Bild2" alt="">
          <img src="Pfad zum Bild3" alt="">
   </div>
    <div class="clear"></div>
</div>


Und hier das Ergebnis mit minimale Veränderungen
ICH HABE KEINE LUST MEHR ZU SCHREIBEN

Habe mich sehr bemüht verständlich zu schreiben.
Fachchinesisch möglichst vermieden.
Ein Webdesigner würde mir die Ohren lang ziehen, aber who cares?
Falls mir der Erklärbär nicht gelungen ist, einfach kommentieren.
Bei offenen Fragen, kommentieren.

Mittwoch, 2. September 2015

Saubere Ankerlinks bei blogger setzen

Auf Wunsch überarbeitet. Hoffe so ist es verständlicher.
Falls nicht, unten kommentieren. Bin ein schlechter Gedankenleser :-)

Kommen wir direkt zur Sache.
Der sauberste weg einen Ankerlink in blogger zu setzen ist der, eine id zu setzen.
Wie,wo,was?

Ich möchte folgendes machen:
Ich drücke auf einen Link und dann springe ich zu einer anderen Stelle auf meiner Seite.
Dafür muss ich ins HTML-Modus gehen.

Was ich benötige ist die ganaue Adresse meiner Seite bzw meines Posts.
Um das zu verdeutlichen nehme ich die Adresse dieses Posts.

Die Stelle von wo ich starte kennzeichne ich so:
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring">start</a>
Mein Anker heisst bei mir also "#spring"

Die Stelle wo ich hin springen will/mein Ziel, kennzeiche ich wie folgt:
<div id="spring">Ziel</div>

Der Text muss nicht zwingend im div stehen.
Bietet sich aber an,vor allem wenn es eine Überschrift ist.
Praktisches Beispiel hierzu ganz unten unter PS
Das würde natürlich auch gehen
<div id="spring"></div>
Ziel

Das einzige was Ihr tun müsst, ist lediglich Eure Adresse an die Stelle zu setzen, die ich oben rot gekennzeichnet habe. Einfach ersetzen und fertig.

Denkt daran, dass eine id nur einmal auf einer Seite vorkommen darf.
Wenn Ihr noch einen Ankerlink setzen wollt müsst Ihr eben einen anderen Namen vergeben.
Zb:
Die Stelle von wo ich starte zb "spring2" nennen:
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring2">start</a>

Die Stelle wo ich hin springen will/mein Ziel, dementsprechend "spring2":
<div id="spring2">Ziel</div>
usw.

Das ganze würde natürlich auch von einer anderen Seite aus funktionieren.
Nehmen wir mal an ich hätte einen Beitrag auf einer anderen Seite geschrieben und würde gerne auf diese bestimmte Stelle des Post hinweisen wollen, so könnte ich zb schreiben.
"Genaue Informationen zum Thema finden Sie
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring">hier</a>"
Dann würde mein Besucher genau an dieser Stelle landen, ohne den gesamten Beitrag lesen zu müssen.

Ihr könnt ebenfalls einen span-tag anstatt eines div-tags verwenden.
Also:
<span id="spring"></span>

Unten könnt Ihr einen Link in Aktion sehen.

Es gibt noch zwei andere Möglichkeiten, die jedoch überholt sind, und auf die sich nicht lohnt einzugehen.
Auf Wunsch kann ich das machen, aber die sind beide voll Banane, finde ich.

start























Ziel

PS 
Oft kommt es vor, dass man die Stelle wo man hin springt als Überschrift verwendet.
Diese ist meistens größer formatiert, die Schrift ist fett oder hat eine andere Farbe.
Da bietet sich an diesen div zu formatieren.
Wir nehmen den oben angesprochenen div:
<div id="spring1">Ziel</div>

Jetzt geben wir den div eine class. Zb die class "ueberschrift".
<div id="spring1" class="ueberschrift">Ziel</div>

Unsere CSS dazu:
.ueberschrift {
font-size: 22px;
font-weight: bold;
color: green
}

Hier das Ergebnis:
Ziel
Somit wird jede Überschrift automatisch formatiert.
Im Nachhinein kann ich zudem schnell eine Veränderung für alle divs auf einmal vornehmen.

Sonntag, 30. August 2015

Flexible Youtube-Videos für Mobilgeräte

Da ich nicht lange Blogge, hab ich mal ein Streifzug durch die Bloggemeinschaft gemacht.
Einiges war wirklich beeindruckend schön designt und mit viel Liebe zum Detail.

Was mir auffiel ist, dass viele Youtube-Videos eingebettet haben.
Entweder in der Sidebar ober im Post selber.
Oft ragen diese Videoboxen aus den Elemente oder gar der Seite hinaus.

Wenn wir ein Video von Youtube einbetten bekommen wir folgendes von Youtube:
<iframe width="420" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw" frameborder="0" allowfullscreen></iframe>

Youtube gibt mir eine feste Breite und Höhe vor, die ich dann manuell verändern muss, falls sie mich nicht anspricht.

Das ist natürlich der Tod für einige mobile Geräte, da die Videos einfach diese Breite beibehalten.

Damit die Videos flexibel/responsive werden, benötige ich lediglich etwas CSS und eine etwas veränderte HTML-Eingabe.

Geht mal auf diese Seite und zieht das Browserfenster seitlich kleiner.
Ihr werdet sehen, dass das Video sich der Breite automatisch anpasst.

Ich habe folgenden Code vor Jahren von einen professionellen Designer erhalten.
Wollen wir uns hier nicht mit fremden Federn schmücken.

Zur CSS (für meine Zwecke etwas angepasst):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid silver;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
border: 0
}

Zur HTML:
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>
Wir sehen jetzt, dass die Box sich nicht um die Angaben kümmert, sondern sich der Breite anpasst.

Ich habe den iframe noch etwas hinzugefügt, dass ich unten rot hervorhebe:
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>

Das bewirkt,dass am Ende keine Videovorschläge von Youtube erscheinen.
Ich mag das nicht.
Wenn Ihr das möchtet, dann ?rel=0 einfach weglassen.

Wenn Ihr jetzt auf der ganz sicheren Seite sein wollt, würde ich noch einen div drum herum einbauen.
Damit könnt Ihr später das ganze nachtäglich noch verändern, falls Ihr Euch umentscheidet.
Wir fügen also noch eine Box ein.
Diese nennen wir beispielsweise video-box (Ihr könnt die nennen wie Ihr wollt.Von mir aus Banane)

Unsere HTML sehe dann so aus:
<div class="video-box">
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>
</div>

In unserer CSS tragen wir die box auch ein. Erstmal ohne Werte:
.video-box {}

Wofür der ganze Stress?
Beispiel:
Ihr habt das Video wie beschrieben auf volle Breite gesetzt.
Jetzt entscheidet Ihr Euch, der soll nur 300px beit sein.
Dann geht ihr einfach in die CSS und verändert den Wert:
.video-box {width:300px}

Ein Eintrag genügt um dieses Ergebnis zu erzielen:

Man kann außerdem noch eine ganze Menge Spielerein mit diesen beiden Boxen anstellen.
Effekte wie Schatten,Rahmen,Hintergründe, Ladezeichen hinter der Box und weiß der Geier was noch.
Sollte ich Zeit haben und es besteht Interesse, werde ich noch einen Beitrag dazu schreiben.
Aber vorab könnt Ihr hier ein paar Spielereien sehen.

Bis............


Nachtrag

Für die jenigen die lieber mit Javascript arbeiten möchten

Das teilte mir Oliver Doetsch mit
(einfach hier hinein kopiert):

Eine sehr schöne Lösung von +Myriam Kreatief
<script>
    (function() {
        HTMLElement.prototype.wrap = function(elms) {
            if (!elms.length) elms = [elms];
            for (var i = elms.length - 1; i >= 0; i--) {
                var child = (i > 0) ? this.cloneNode(true) : this;
                var el = elms[i];

                var parent = el.parentNode;
                var sibling = el.nextSibling;

                child.appendChild(el);

                if (sibling) {
                    parent.insertBefore(child, sibling);
                } else {
                    parent.appendChild(child);
                }
            }
        };

        var iframe = document.querySelector('iframe[src*="youtube"]'),
            css = iframe.style;

        css.width = '100%';
        css.height = '100%';
        css.position = 'absolute';
        css.top = '0';
        css.left = '0';

        var div = document.createElement('div'),
            css = div.style;

        div.wrap(iframe);

        css.position = 'relative';
        css.width = '100%';
        css.height = '0';
        css.padding = '56.25% 0 0 0';
        css.display = 'block';
    })();
</script>

Freitag, 28. August 2015

Blogger Bild-Gadget ohne Überschrift

Einigen von Euch ist sicherlich bekannt, dass man die o.e. Überschrift mit
<!-- Zwangsüberschift -->
ausblenden kann.

Wenn nicht, wisst Ihr es jetzt.

Ich stand selber vor diesem Problem und habe es anders gelöst.

Mein Weg ist der, dass man einen HTML-Leerzeichen einfügt:
&nbsp;

Somit hätten wir jetzt zwei Wege.

Was mich interessieren würde ist, ob alle mobile Geräte diese beiden Anweisungen genau so fressen wie der Heim-PC.
Wer genaueres  weißt , kann mir einfach bescheid geben.
Wäre nett.

Donnerstag, 27. August 2015

Printfrieddly - Eigene Buttons einbinden

Der unten aufgeführte Code spuckt diese Grafik aus.

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>

Nehmen wir mal an du magst einen anderen Button haben,
Zb diesen hier von der printfriendly Homepage.


Einfach von der Homepage per Rechts-Klick die URL kopieren

Das wäre
http://cdn.printfriendly.com/pf-button.gif

Nun lediglich die URL tauschen mit der unten rot gefärbten URL

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>

Wie erhalten
Print Friendly and PDF

 
Was auch geht ist eine eigene Grafik einbauen.
Habe auf die schnelle eins bei Picasa hochgeladen.
URL dann ausgetauscht und schon habe ich einen eigenen Button.
Ok. Zugegeben es geht schöner, aber egal :)

Und fertig wäre die Laube :)

Naja, nicht ganz, weil der mir da nicht gefällt.
Ich hätte ihn gerne woanders


Die Zeile die ich jetzt suche:
<div class='post-share-buttons goog-inline-block'>
Und genau wie oben den Code dahinter/darunter setzen.

Somit bin ich nicht mehr so eingeschränkt und kann nach Belieben meine Buttons selbst bestimmen.
Mal schauen wann Printfriendly das unterbindet.

Hoffe es hat geholfen.
Da keiner hier ein Kommentar schreibt, weiß ich es ja nie.

Ja, hat mich denn gar keiner lieb :-(   ?

Printfrieddly - Button einbinden

Aus aktuellem Anlass, weil jemand im Forum und einer privat sagten, es würde nicht klappen mit dem Einbinden, habe ich das hier getippt.

Ich muß gestehen ich kannte diesen Dienst gar nicht, aber eigentlich ganz einfach das ganze.
Würde sich da nicht ein Parsing-Fehler einschleichen.
Wer was dazu lesen möchte siehe PS ganz unten.

Im Code unten ist der Übeltäter behoben, so daß es jetzt klappen müßte.

Ich habe diesen Button ausgesucht um einzubinden.

Der soll unter jeden Post erscheinen.

Das ist der Code der dafür verwendet wird:

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<a class="printfriendly" href="http://www.printfriendly.com" onclick="window.print();return false;" style="color:#6D9F00;text-decoration:none;" title="Printer Friendly and PDF"><img alt="Print Friendly and PDF" src="http://cdn.printfriendly.com/button-print-gry20.png" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a>


Wir kopieren also den Script und schalten in HTML-Modus.
Dafür gehen wir zur Hauptbedienungsfläche.
Also hier drüber:
Vorlage>>HTML bearbeiten

Die Zeile die wir benötigen lautet:
<div class='post-footer'>


Und genau hier drunter wird unser Code eingefügt.


Und schon steht der Button dort, wo wir ihn haben wollten.
Das könnt Ihr auf meinem Blog sehen.
Allerdings habe ich da einen anderen Button.

Ein Schönheitsfehler hat das ganze jedoch.
Solltet man von einer Seite, auf der sich mehrere Posts befinden, einen einzelnen Post drucken wollen, so wird trotzdem die ganze Seite gedruckt.
Wenn der Post alleine aufgerufen wird, dann ist das machbar.

Unter Umständen ist es ratsamer eine PDF zu basteln und diese direkt einzubinden um vom PDF-Reader öffnen zu lassen.
Das muß aber jeder für sich entscheiden.

Wenn Du wissen willst wie man andere Buttons, sogar eigene Button-Grafiken einbinden kann, dann schau mal hier vorbei

Enjoy!




PS
Die Meldung Parser-Fehler-Meldung kommt daher, dass wir hier eine XML-Datei haben.
Diese erwartet bestimmte Anweisungen.
In dem Fall ist es das abschließende img-tag, das Ärger macht.
Genauer gesagt fehlt da ein  /

bei
<img src="irgendwas">
fängt der an zu bocken

schreiben wir
<img src="irgendwas" />
frisst der das

Ist doch ein Sack, oder?

Dienstag, 25. August 2015

Facebook-Videos einbetten

Hey Toivi !

Du wolltest dieses Video in deinem Blog einbauen, klappte aber nicht.
An sich ist das Einbetten leicht gemacht.

Gehe auf die Seite und klicke auf  ``Video einbetten´´, so wie unten sichtbar.

Daraufhin öffnet sich ein Fenster und Du kannst den Code kopieren

Anschließend gehst Du über HTML und gibst den Code ein.
Und das Ergebnis sieht dann so aus


The UN's unhealthy obsession with Israel explained in one short video. Note: at time of production 40% of the UN Human Rights Council resolutions were against Israel. Now, we are at well over 50%. Your voice matters! Join us! worldjewishcongress.org/en/HumanRights
Posted by World Jewish Congress on Donnerstag, 25. Juni 2015


Das wäre eigentlich alles.
Hoffe ich konnte dir helfen.
Falls was ist, einfach melden.

Sonntag, 23. August 2015

100% Hintergrundbild in Blog einbauen

Oder: Fullscreen Hintergrund Bild.

Für alle die, die bereits Erfahrung haben, sind die ersten Schritte nicht notwendig, sogar nervig.
Für Anfänger jedoch schon wichtig. Daher führe ich sie auf.

Ich habe (um Urheberrechte nicht zu verletzen) einfach ein Foto geschossen.
So sieht es aus, wenn man bei mir aus dem Fenster glotzt.
Kein schönes Bild, aber für ein Beispiel sollte es reichen.
Ich werde also folgendes Bild als Hintergrund verwenden.
Meine Maße sind 1920x1080 Pixel.
(Zu den Maßen siehe Vermerk ganz unten bei PS)


Da ich selber auf meinem Blog kein Hintergrundbild möchte, habe ich einen Blog angelegt um es vorzuführen.
Ich habe ein ganz simples "Einfach-Layout" gewählt, der anfangs so aussieht:


Wenn ich den normalen Weg über das Dashboard nehme
Zur  Verdeutlichung:


Über:
Vorlage>>Anpassen>>Hintergrund>>Hintergrundbild
lande ich hier


Dort wähle ch mein Hintergrundbild aus und lade es hoch.


Das Ergebnis sieht dann so aus:


Und jetzt sieht man schon, dass das ganze nicht so richtig passt.
Wenn wir kleiner zoomen sehen wir es besonders gut.


Grauenhaft. Das bild wird gekachelt/wiederholt sich.
Und genau das wollen wir ja nicht.
Deshalb müssen wir mit etwas CSS nachhelfen.
Wir müssen die bereits vorhandene CSS überschreiben und so anpassen, wie wir sie brauchen.

Dafür haben wir zwei Möglichkeiten:
1. Über unser Dashboard:
    Vorlage>>Anpassen>>Erweitert>>CSS hinzufügen
Dann würden wir hier unsere Anweisung eingeben:


oder
2. In dem wir direkt in den Code hinein gehen
    Vorlage>>HTML bearbeiten
Dann würden wir hier landen:


Ich bevorzuge die zweite Variante, weil man dann weißt wo man es hingeschrieben hat und es dann, wenn man es ggf nochmal braucht, sofort finden und verändern kann.

Diese Möglichkeit werde ich zeigen.
Die, die sich nicht an den Quellcode trauen, wählen eben die andere Variante.
Jedoch ist es relativ einfach, so dass Ihr kein Bammel haben müsst.
Ihr könnt vorher ja ein Backup eures Designs machen und wenn was schief geht einfach neu hochladen. Auf Wunsch setze ich die Tage auch darüber was online. Einfach anschreiben :)


Unsere CSS muss vereinfacht gesagt sagen, dass wir ein Bild haben wollen, welches sich in Höhe und Breite anpasst und auch so stehen bleibt.
Und da ich Euch nicht tot quatschen möchte, zeige ich jetzt die Anweisung:

html, body {
background: url(hier kommt der Pfad zum Bild) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Bleibt nur die Frage: Wie ist der Pfad zum Bild, welches wir bereits eingefügt haben?
(Gibt nämlich auch andere Möglichkeiten. Lese bitte hierzu Vermerk ganz unten bei PS)

Das schnellste und sicherste ist, in den Quellcode zu gehen und den Pfad zu suchen.
Dazu gehen wir so vor wie im bisher letztem Bild:
Vorlage>>HTML bearbeiten

Dort sehen wir an der Zeile 9 (im original.kann abweichen) einen Pfeil.
Wenn wir darauf klicken öffnet sich weiterer Code.

Was wir jetzt brauchen ist eine bestimmte Zeile.
Diese fängt so an:
<Variable name="body.background" description="Body Background"

Wir können sie suchen oder suchen lassen.
Courser ins Fenster klicken und dann Strg+F drücken.
Darauf hin öffnet sich ein Suchfenster.
Dort kopieren wir den Suchegriff hiein und drücken Enter.

Beim runterscrollen sehen wir dunkel hinterlegter text und unmittelbar darunter unser gesuchter Pfad.
Die Angabe fängt mit url an.
Mein Pfad lautet also:
http://3.bp.blogspot.com/-pABA32wwyOs/VdneiA3f_4I/AAAAAAAAAiQ/bNendzTxlCo/s0/rs-1920x1080.jpg

Dementsprechend lautet meine CSS:

/* 100% HINTERGRUNDBILD
----------------------------------------------- */
html, body {
background: #000 url(
http://3.bp.blogspot.com/-pABA32wwyOs/VdneiA3f_4I/AAAAAAAAAiQ/bNendzTxlCo/s0/rs-1920x1080.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Hinzugefügt habe ich lediglich #000, denn ich möchte beim öffnen einen schwarzen Hintergrund laden und nicht das originale orange. Wollt Ihr es nicht,dann weglassen.
Und um es wieder zu finden ein Kommentar eigefügt

Jetzt brauche ich nur meine CSS-Anweisung in den in den Quellcode hinein zu kopieren.
Wichtig ist,dass wir die bereits vorhandene Anweisung überschreiben.
Das heisst hinter der bereits vorhandenen plazieren.




Hier das Ergebnis


Und wenn wir kleiner zoomen sehen wir

Damit hätten wir unser Ziel erreicht.

Was man nocht machen könnte, wenn man es mag, ist eine transparenz einbauen, wie auf diesem Blog .
Das kann ich auf Wuscht gerne machen. Ist relativ simpel.
Schreibt mich einfach an.

Für heute verabschiede ich mich.
Hoffe es einigermaßen deutlich hin bekommen zu haben.
Was mich interessieren würde ist, ob Ihr grundsätzlich Videotutorials bevorzugt.
Wäre für Kommentare dankbar.
Von der Zeit her tut sich da nicht viel.


PS
Zur Bildgröße/Auflösung
Leider sind die Zeiten vorbei, wo es nur zwei Bildschirmauflösungen gab.
Das macht das Einbinden eines solchen Hintergrundes etwas kompliziert.
Man kann also nie sagen, welche Bildgröße die optimale ist.
Ein bißchen Schund ist also immer.
Kaum schaust du mal weg, ist schon wieder eine neue Auflösung da.
Besonders bei Mobilgeräten weißt man nie was am Ende dabei raus kommt.
Das solltet Ihr dabei bedenken.
Ich persönlich kann auf solche Sachen gerne verzichten, aber wenn man es mag, warum nicht?

Zum Bildpfad:
Ihr könnt natürlich ein Bild aus Eurer Sammlug nehmen.
Den Pfad direkt in die CSS kopieren.
Ihr müsst also nicht vorher das Bild hochladen.
Ausserdem könnt Ihr auch einen externen Link nehmen.
Beispielsweise ein Bild, welches Ihr auf einem Server habt.