tag:blogger.com,1999:blog-17026720322353460322024-02-26T09:24:06.736+01:00blogschandeAnonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-1702672032235346032.post-73804193304076643222016-01-09T05:44:00.000+01:002016-01-09T17:29:08.953+01:00 Scrollende Fullscreen HintergrundbilderErstmal schauen wir uns <a href="http://blogschande-tutorial-01.blogspot.com/" target="_blank">einen Beispiel an</a>, zudem was ich vorhabe.<br />
<br />
Normalerweise weisen wir das Hintergrundbild in der CSS dem body bzw html zu.<br />
Idealerweise bei großen Bildern so, dass der gesamte Screen voll ausgefüllt ist.<br />
Wenn wir aber mehrere Bilder hintereinander haben wollen, die mitscrollen?<br />
Und vor allem so, dass wir diese nach Lust und Laune auch wieder austauschen können.<br />
<br />
Wir laden unsere Bilder ersteinmal hoch (ich mache das auf Picassa Webalben) und kopieren uns den jeweiligen Pfad.<br />
Ich werde drei Bilder verwenden (Maße: 1280x800 Pixel)<br />
<br />
Als aller erstes setzen wir <a href="http://blogschande.blogspot.de/2015/08/100-hintergrundbild-in-blog-einbauen.html" target="_blank">wie im diesem Tutorial</a> unser Hintergrundbild im body.<br />
Müssen wir zwar nicht, aber um sicher zu gehen, dass immer ein Bild vorhanden ist.<br />
<i>Ich nehme das erste Bild, dass ich unten in der Box verwende.</i><br />
<br />
Jetzt wird es etwas seltsam, denn wir verwenden für unsere Bilder einen ganz normalen div, den wir in die HTML selber reinschreiben/kopieren.<br />
Dieser wird auf "position:absolute" gesetzt.<br />
Darin befinden sich unsere Bilder, ebenfalls in jeweils einen div.<br />
Jedoch nicht wie üblich im img-tag, sondern als Hintergrundbild des divs.<br />
<br />
Zur Verdeutlichung:<br />
<b><div id="bg-box"> </b>/* Masterbox */<br />
<div id="bg-01"></div> /* Erstes Bild */<br />
<div id="bg-02"></div> /* Zweites Bild */<br />
<div id="bg-03"></div> /* Drittes Bild */<br />
<b></div></b><br />
<br />
Und hier unsere CSS:<br />
#bg-box {<br />
top:0;<br />
position:absolute;<br />
width: 100%;<br />
height: 100%;<br />
z-index:-1;} /* ganz wichtig den z-index negativ zu setzen! */<br />
<br />
#bg-01 {<br />
background: #000 url(<b>Pfad zu 01.jpg</b>) no-repeat center center fixed;<br />
background-size: cover;<br />
margin: 0;<br />
padding: 0;<br />
width: 100%;<br />
height: 100%;}<br />
<br />
#bg-02 {<br />
background: #000 url(<b>Pfad zu 02.jpg</b>) no-repeat center center fixed;<br />
background-size: cover;<br />
margin: 0;<br />
padding: 0;<br />
width: 100%;<br />
height: 100%;<br />
}<br />
<br />
#bg-03 {background: #000 url(<b>Pfad zu 03.jpg</b>) no-repeat center center fixed;<br />
background-size: cover;<br />
margin: 0;<br />
padding: 0;<br />
width: 100%;<br />
height: 100%;<br />
}<br />
<br />
Jetzt können wir direkt in unsere HTML hinein gehen.<br />
<i>(Dashboard>>Vorlage>>HTML bearbeiten)</i><br />
<br />
Als aller erstes die CSS-Anweisung kopieren.<br />
Wohin ist nicht so wichtig. Hauptsache Ihr findet sie wieder falls Ihr die umschreiben/löschen/whatever wollt.<br />
<br />
Die HTML-Anweisung, also diese:<br />
<div id="bg-box"><br />
<div id="bg-01"></div><br />
<div id="bg-02"></div><br />
<div id="bg-03"></div><br />
</div><br />
kopieren wir genau so hinein.<br />
Am besten direkt hinter den öffnenden body-Befehl ( <body> )<br />
<br />
Und das war es, mehr brauchen wir nicht.<br />
<br />
<a href="http://jpmhost.blogspot.de/" target="_blank">jpm</a><br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-38279771671269512762015-12-28T17:22:00.000+01:002022-11-06T23:02:49.285+01:00Externen Downloadbereich für Blogspot-Blogger einrichten / 5<div id="teile-top">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>Abschließende Ergänzung :<br>
<br><b style="letter-spacing: 0.2px;"><u>Webspace</u></b><div>
Du hast jetzt 1 bzw 2 GB Webspace zur Verfügung.<br>
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.<br>
<br>
Ebenfalls lässt sich ohne große Umständen eine Startseite einrichten um ein paar Infos auf der Startseite zu plazieren.<br>
Sogar ein kleiner WordPress-Blog ist als Startseite machbar.<br>
<br>Man kann also mit dem Webspace mehr machen als nur ein paar Dateien hochzuladen.<br>
<br>
<u><b>Zum Download</b></u><br>
Dieser verhält sich je nach Browsereintstellung anders.<br>
Bei mir startet der bei Chrome automatisch, aber bei Firefox bekomme ich die Meldung wo ich es hin laden will.<br>
Das ist eine Sache der jeweiligen Einstellung.<br>
<br>
<b><u>htaccess</u></b><br>
Immer wieder gibt es Probleme beim Up oder Downloaden von htaccess Dateien.<br>
Bei FileZilla steht die Übertragungsform auf Automatisch.<br>
Siehe unter "Übertragung>>Übertragungsform".<br>
Ich selber hatte damit nie großartige Probleme.<br>
Trotzdem wird empfohlen, die Übertragungsart "ASCII" zu wählen.<br>
Bei Bedarf google mal ein bißchen. Es gibt hierzu Unmengen von Seiten.<br>
<br>
Auf jeden Fall kann bei der Übertragung die htaccess zerstört werden.<br>
Da hilft nur neu anlegen.<br>
<br>
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.<br>
<br><b><u>Ärger mit dem Cache</u></b><br>
Wenn Du ein paar Versuche brauchst um den Download zu realisieren, leere zwischendurch mal dein Cache.<br>
Mich hat dieser schon einige Male veräppelt.<br>
Alles klappte an sich, aber mein Browser hat nicht die Aktualisierung ausgespuckt.<br>
<br><b><u>Ist FileZilla sicher? </u></b><br>
Auch da kann Google weiterhelfen.<br>
Neben WinSCP (Windows) gibt es weitere Free-Clients, aber wenn Sicherheit im Vordergrund steht, solltet man sich einen kostenpflichtigen Client anschauen.<br>
<u><br></u>
<b><u>Gibt es bessere Freehoster als bplaced?</u></b><br>
Es gibt noch einige, die ähnliche Leistungen anbieten.<br>
Bei manchen sind bestimmte Dateiarten oder gar Downloads untersagt.<br>
Ausserdem haben sich schon einige Freehoster verabschiedet.<br>
Bislang ist bplaced nicht klein zu kriegen.<br>
<br>
Wer mehr Sicherheit möchte, der muß eben ein paar Euro locker machen.<br>
Verallgemeinern kann man da nichts, da viele Faktoren eine Rolle spielen.<br>
Wieviel Speicherplatz, wieviele Datenbanken oder FTP-Zugänge.....<br><br>
<div id="teile-bottom">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
</div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-28709088885155201872015-12-28T17:18:00.001+01:002022-11-06T23:34:30.813+01:00Externen Downloadbereich für Blogspot-Blogger einrichten / 4<div id="teile-top">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
Wir haben also einen Webspace und sind in der Lage mit ihm zu kommunizieren.<br>
Abgesehen von den Standarddateien von bplaced, herrscht da Leere. <br>
<br>
Wie gesagt ist deine Seite unter www.Benutzername.bplaced.net erreichbar.
<br>
Um folgendes zu verdeutlichen werde ich folgende Adresse verwenden: http://bergischertreff.bplaced.net (<i>anschließend ist diese down</i>). <br>
<br>
Wenn ich diese im Browser aufrufe, erscheint das:
<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpFj7ps7RH5mBT4jvRgyHUoS-BTUib1dsxLE8369lyqSel1NuTJFQXUTkcIxZX90AzKeqpDz5OVCMQyov9o9sXrDSc83lvwwoEw-fr2xjXgNbaTaf-6ym5-PCap5h6WVz_6usb4tFhM4I/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-01.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpFj7ps7RH5mBT4jvRgyHUoS-BTUib1dsxLE8369lyqSel1NuTJFQXUTkcIxZX90AzKeqpDz5OVCMQyov9o9sXrDSc83lvwwoEw-fr2xjXgNbaTaf-6ym5-PCap5h6WVz_6usb4tFhM4I/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-01.jpg"></a></div>
<br><b>Jeder</b> hat jetzt Einsicht auf die Struktur.<br>
Das ist eine Manko, dass bei bplaced auftritt, welches bei anderen Hostern nicht vorkommt.<br>
Es gilt erstmal diese Sicherheitslücke zu schließen.<br>
<br>
Das machen wir mit einer sogenannten htaccess-Datei.<br>
Diese kann mit dem Windows-Editor erstellt werden.<br><br>
Editor öffnen und folgendes einfügen:<br>
<i>(Nimmt Euch die Zeit das mit der Hand einzugeben. Beim Kopieren können Probleme auftauchen)</i><br>
<br>
Options -Indexes<br>
ErrorDocument 403 /403.php<br>
ErrorDocument 404 /404.php<br>
<br>
Das ganze speichern wir als <b>.htaccess</b> <br>
Dabei ist der Punkt vorne sehr wichtig.<br>
Wichtig ist es auch die Datei in ANSI-Codierung zu speichern:<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xFhmSWpLigsgNfQtzVIIg7dGbUbVvHQ-zhE_BjQ3antu7kA0As4jTIbRWjkiQierTB2nMe5U1DF79xxPk9Xeb7KUYXL3GIwY_n9OFWUpIBSw72i8mwRQp78K8gYfOp25qveFdTTkOco/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-02.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xFhmSWpLigsgNfQtzVIIg7dGbUbVvHQ-zhE_BjQ3antu7kA0As4jTIbRWjkiQierTB2nMe5U1DF79xxPk9Xeb7KUYXL3GIwY_n9OFWUpIBSw72i8mwRQp78K8gYfOp25qveFdTTkOco/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-02.jpg"></a></div>
<br>
Das ist also jetzt <u>keine </u>Textdatei mehr.<br>
In der Regel speichert der Editor ab Win7 die Datei problemlos.<br>
Sollte diese als Textdatei gespeichert werden, dann müsst ihr die Endung <b>.txt</b> entfernen.<br><span style="letter-spacing: 0.2px;">Das könnt ihr problemlos mit FileZilla erledigen. </span><div>
<br>
Jetzt übertragen wir diese Datei auf die oberste Fläche des Servers (Root).<br>
Dazu öffnen wir den bereits eingerichteten Filezilla.<br>
Da die Daten schon eingetragen sind brauchen wir jetzt nur noch auf dem Pfeil zu drücken und unten erscheint unser Server.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IVxg_syy-yqO6CYOcJ911njV_UT0envO0MXiUYC3852FrmNhlHw7ZP8daUlf_i-nyL0qO2fTBIEmBDXk70l7EqkNh-2RH2ihsQv3r6NhxfOGDTLYHYqKjFYXpRmWMpZrKj0SsS4g24I/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-03.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IVxg_syy-yqO6CYOcJ911njV_UT0envO0MXiUYC3852FrmNhlHw7ZP8daUlf_i-nyL0qO2fTBIEmBDXk70l7EqkNh-2RH2ihsQv3r6NhxfOGDTLYHYqKjFYXpRmWMpZrKj0SsS4g24I/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-03.jpg"></a></div>
<br>
Nach der Bestätigung öffnet sich dieser.<br>
Navigiert links dahin, wo Ihr Eure htaccess gespeichert habt.<br>
Bei mir ist es der Desktop.<br>
Anschließend mit Rechtsklick auf "Hochladen" und die Übertragung beginnt.<br>
<div class="separator" style="clear: both; text-align: left;">
<img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Xj-UYTtFB5_H2GzkbeeJoDZKx02YKfqZxAumStEwtPuzgPEn1m5MSm7gqaTnd381L6nOQC1v8nKNTFd55a3EWva1uxgqag2DDSOCsdeF6QgkTeqM4la_Yom4J6fuPfEMLdTt9GfPG04/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-4-04.jpg"></div>
Jetzt rufen wir erneut unsere Seite auf und wir sehen eine Fehl<span style="letter-spacing: 0.2px;">ermelung.</span><br>
Eine "Du kommst hier net rein" Meldung.<br>
Das Verzeichnis ist für den externen Zugriff erstmal gesperrt.<br>
Bei bplaced Freehosting lässt sich leider keine eigene Fehlermeldung realisieren.<br>
Soll uns aber Latte sein, Hauptsache der Server ist nicht offen.<br>
<br>Mit 'der htaccess sorge ich dafür dass kein Ordner mehr betreten werden kann. Das gilt auch für Unterordner.<br>
<br>
Nachdem wir das erledigt haben wird es Zeit unsere Download-Dateien hochzuladen.<br>
Ich werde das so machen, dass ich einen Ordner auf dem Rechner erstelle und dort eine png einfüge.<br>
Mein Ordner heisst "downloads". Dort lege ich eine Datei ab. </div><div>Eine png namens "test.png" .<br>
<br>
Anschließend lade ich den gesamten Ordner genauso wie oben in den Root hinein.<br>
<br>
Um diese Datei aufzurufen gehe ich von den Pfad ein. <br>
Bei mir ist es http://bergischertreff.bplaced.net/downloads/test.png<br>
<br>Jetzt öffnet der Browser zwar das Bild, aber ein Download findet nicht statt.<br>
Dafür brauchen wir eine zweite htaccess, die wir in den Ordner "downloads" hochladen.<br>Diesmal geben wir folgendes ein:<br>
<br>
<div style="margin-bottom: 0cm;">
<div style="margin-bottom: 0cm;">
<Files *.*></div>
<div style="margin-bottom: 0cm;">
Header set Content-Disposition
attachment</div>
<div style="margin-bottom: 0cm;">
</Files></div>
<div style="margin-bottom: 0cm;">
<br></div>
<div style="margin-bottom: 0cm;">
<Files .htaccess></div>
<div style="margin-bottom: 0cm;">
order allow,deny</div>
<div style="margin-bottom: 0cm;">
deny from all</div>
</Files> </div>
<div style="margin-bottom: 0cm;">
<br></div>
<div style="margin-bottom: 0cm;">
Jetzt sollte die Datei als Download zur Verfügung stehen.</div><div style="margin-bottom: 0cm;">
<br>Dein Downloadbereich wurde angelegt.<br>
<br>
Ein paar Sachen möchte ich noch ergänzen.<br>
Dafür lege ich aber noch einen Post an.<br></div>
<div id="teile-bottom">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a></div></div> JPMhttp://www.blogger.com/profile/16137835898754350032noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-48058019095118402832015-12-28T06:18:00.001+01:002022-11-06T14:08:03.466+01:00Externen Downloadbereich für Blogspot-Blogger einrichten / 3<div id="teile-top">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
Jetzt haben wir einen Webspace und müssen nur noch schauen, dass wir unsere Daten vom Rechner auf dem Server rüber bekommen.<br>
Dafür benötigen wir ein Programm. Ein so genannter FTP-Client.<br>
<br>Ich benutze hier FileZilla. <br>
Bitte runterladen und installieren. Darauf gehe ich jetzt nicht ein. <br>
<br>
Für die Einrichtung benötigen wir lediglich unseren Benutzernamen und das Passwort, welches wir bei bplaced angegeben haben.<br>
<br>
Nachdem wir FileZilla gestartet haben, erscheint dieses Fenster<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPGxzAkYURMR1suM6Y7EpvK-oF9FxjiFyqLj0FxBPxv1BV6S3grJZkNhlvcw1DWqf6lfoh1hww4ZeIpqJWI__ugG2H4bsZ0ZcIhKr5lQYIw2qc3sau_t2Nox6NsnXseg6J32X_uO9xJ0/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-01.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPGxzAkYURMR1suM6Y7EpvK-oF9FxjiFyqLj0FxBPxv1BV6S3grJZkNhlvcw1DWqf6lfoh1hww4ZeIpqJWI__ugG2H4bsZ0ZcIhKr5lQYIw2qc3sau_t2Nox6NsnXseg6J32X_uO9xJ0/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-01.jpg"></a></div>
<br>
Dabei fällt auf, dass auf der rechten Seite nichts steht.<br>
Das liegt daran, dass dort die Serverdaten aufgelistet werden.<br>
Da wir noch nicht verbunden sind, kann daher noch nichts erscheinen,<br>
Hier zur Verdeutlichung:<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4iKV3zI3BC9oRKYsLxU6EVXX_NbZsEMGmJGG0u60klHXF7uwLmITvG9PPdIEMjJHdPAarRks8rHB358DH_w94x-S9M274E4lAAMY-CXBd29toPNu2EafFk7CwbS4XveC8-pLlAHW6S4/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-02.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4iKV3zI3BC9oRKYsLxU6EVXX_NbZsEMGmJGG0u60klHXF7uwLmITvG9PPdIEMjJHdPAarRks8rHB358DH_w94x-S9M274E4lAAMY-CXBd29toPNu2EafFk7CwbS4XveC8-pLlAHW6S4/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-02.jpg"></a></div>
<br>
So ähnlich wie bein Win-Explorer lässt sich auf beiden Seiten dort hin navigieren, wo ich es benötige.<br>
<br>
Beim Navigieren werde ich klassisich vorgehen, das heisst mich über die Ordner durchnavigieren.<br>
Drag and Drop kann ebenfalls verwendet werden.<br>
<br>
Stellen wir also eine Verbindung her.<br>
Wir öffnen den Servermanager<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgI98PpPkthRV68cdSFCQJNPSakTSsM29tyBiKfvHJM8afteqRKexBgMna7yjDLF6WF9YOkh5lY0kM_vYFPWHuq3m9mqu7nH3807XTOFTqo9-Vxd7h57xakAXnhJOh45nM9ki0IX8xNX4/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-03.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgI98PpPkthRV68cdSFCQJNPSakTSsM29tyBiKfvHJM8afteqRKexBgMna7yjDLF6WF9YOkh5lY0kM_vYFPWHuq3m9mqu7nH3807XTOFTqo9-Vxd7h57xakAXnhJOh45nM9ki0IX8xNX4/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-03.jpg"></a></div>
<br>
Daraufhin öffnet sich dieses Fenster und wir können den Server einrichten, indem wir den entsprechenden Button klicken (siehe unten)<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrElTiMHSJRKSMCFHdVBol-UYjx9wblDsjVuKJ90sxYKQsQId3N_vWya0cbcrUEBRYTdAUiXT1htyYJqtZlwrZH0EFAep6k62b_CgAD3woTlKxM0hRoQz8JjK7HoLNHmkROWfv1jDZnn0/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-04.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrElTiMHSJRKSMCFHdVBol-UYjx9wblDsjVuKJ90sxYKQsQId3N_vWya0cbcrUEBRYTdAUiXT1htyYJqtZlwrZH0EFAep6k62b_CgAD3woTlKxM0hRoQz8JjK7HoLNHmkROWfv1jDZnn0/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-04.jpg"></a></div>
<br>
Jetzt müssen wir unsere Daten eingeben, die wir bei bplaced vergeben haben.<br>
Im folgenden Bild sehen wir welche Bereiche für uns von Bedeutung sind.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWJB6Il4HLVMZiFRichzODZrogOEMkMGIGXLJR8tRVvqisLI0kt4EONldBMTGQnk01brheB7KxaZH1P0t5-SQ1HAcWy5-7ErsiR5DwDuNaOXzAVyUBOFB0pw0mAbp23OsAnOfT35FeQ8/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-05.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWJB6Il4HLVMZiFRichzODZrogOEMkMGIGXLJR8tRVvqisLI0kt4EONldBMTGQnk01brheB7KxaZH1P0t5-SQ1HAcWy5-7ErsiR5DwDuNaOXzAVyUBOFB0pw0mAbp23OsAnOfT35FeQ8/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-05.jpg"></a></div>
<br>
Ersetzte "<span style="color: blue;">Benutzername</span>" durch Euren Benutzernamen um die Einrichtung zu tätigen.<br>
<table class="standard">
<tbody>
<tr>
<td>1.</td>
<td>Irgendwas (Benutzername,Mein Server, whatever)</td>
</tr>
<tr>
</tr>
<tr>
<td>2.</td>
<td><span style="color: blue;">Benutzername</span>.bplaced.net</td>
</tr>
<tr>
</tr>
<tr>
<td>3.</td>
<td>Stellst Du auf "Normal" und Passwort wird gespeichert. Stellst Du auf "Nach Passwort fragen", wird das Passwort bei jeder Verbindung abgefragt. <i>(Lese hierzu ganz unten PS)</i></td>
</tr>
<tr>
</tr>
<tr>
<td>4.</td>
<td><span style="color: blue;">Benutzername</span></td>
</tr>
<tr>
</tr>
<tr>
<td>5.</td>
<td>Das von Dir gewählte Passwort</td>
</tr>
<tr>
</tr>
</tbody></table>
<br>
Schließlich auf "Verbinden" klicken und wir müssen diese Verbindung lediglich noch bestätigen. Zertifikat akzepktieren + OK<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuMepfhRPqXFe3CU55bwe_MnKjIay8-StqJvT3biGy1cz-qWJiHR0yWXDkLI_5l_4PoIK7aWBlW9Mo8O9QAhwMds-2Wxxqg3p3hAhnySUc0wmLoifoabrxKYdOZgSGY91y35-5yD-YAk/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-06.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuMepfhRPqXFe3CU55bwe_MnKjIay8-StqJvT3biGy1cz-qWJiHR0yWXDkLI_5l_4PoIK7aWBlW9Mo8O9QAhwMds-2Wxxqg3p3hAhnySUc0wmLoifoabrxKYdOZgSGY91y35-5yD-YAk/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-06.jpg"></a></div>
<br>
Jetzt sehen auf der rechten Seite die vom Server automatisch erstellten Dateien.<br>
Diese sollen uns nicht weiter jucken.<br>
Je nach Anbieter sieht die Struktur eh anders aus.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-90ksahuIO4BkdxjFjolAUbz3suD0Eozu0IgVOnLu-m3lLmKUyE4jN9G2p53Be1FSkzUY-gADXXLluzgDbKEJrnRibL9Fv4uzT5Xvr8grArbT9CW_HvlQrg5g_zJQQoGUQ6rQHh4gXyI/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-07.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-90ksahuIO4BkdxjFjolAUbz3suD0Eozu0IgVOnLu-m3lLmKUyE4jN9G2p53Be1FSkzUY-gADXXLluzgDbKEJrnRibL9Fv4uzT5Xvr8grArbT9CW_HvlQrg5g_zJQQoGUQ6rQHh4gXyI/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-3-07.jpg"></a></div>
<br>
Wir haben also unser Ziel erreicht und sind mit unserem Server verbunden.<br>
<br>
Das ganze funktioniert natürlich auch umgekehrt, soll heissen, dass man Daten vom Server auf dem Rechner runter laden kann.<br>
<br>
Im nächsten Teil werden wir den Server für den Download einrichten.
<br>
<div id="teile-bottom">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
<br>
<br>
<img class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4JJwC1jUpWjTwABlcY1KkZKakS1nSrI5lW8rpVyXj8GGYmE1uKjGBsm7VqY7NE2caQdUVI-8t___nZhZ4OghFVUizDla9YgOxaEKg9E7cw6wSfPsf0rLM3vRRNt1gb5SORvFhHwYr9I/h120/smilie-wave.png">
<br>
<hr>
<span style="color: red;"><i>PS</i></span><br>
FileZilla ist wohl der beliebteste FTP-Client.<br>
Leicht zu verstehen und zu handhaben.<br>
Allerdings wird das Passwort in base64 kodiert.<br>
Im Ordner Data>>Settings befindet sich die Datei sitemanager.xml.<br>
Dort finden wir das kodierte Passwort.<br>
Auf der Seite <a href="https://www.base64decode.org/" target="_blank">https://www.base64decode.org</a> lässt sich das Passwort ohne weiteres sichtbar machen.<br>
Wer also mehr Sicherheit möchte, der soll Google bemühen.<br>
Uns soll FileZilla erst einmal genügen. JPMhttp://www.blogger.com/profile/16137835898754350032noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-41025926215181028922015-12-27T18:00:00.000+01:002022-11-06T13:13:44.680+01:00Externen Downloadbereich für Blogspot-Blogger einrichten / 2<div id="teile-top">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
Aufbauend auf Teil 1, werden wir uns jetzt unseren Webspace anlegen.<br>
Einerseits würde ich gerne diesen Schritt überspringen, aber andererseits gibt es welche, die das noch nie gemacht haben.<br>
<br>
Wir gehen also auf <a href="http://bplaced.net/" target="_blank">http://bplaced.net</a> .<br>
An sich ist die Sache selbsterklärend und es gibt Unmengen von Berichten darüber, deswegen gehe ich hier nur oberflächlich darauf ein.<br>
<br>
Wir sehen auf der Seite folgendes:<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOeTlCrQ1wB4FuxNi95olzwEcIcd339ZHsQo1FVnEZtCm6lYCdLhOeIEFeChpbxghCCgfQAmCWcVDHW8MBRGijAPj4H9Xk34vQX5xtIjYF9JskSftk6bLoBzKccERFlxiCtNXax2W9eI/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-01.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOeTlCrQ1wB4FuxNi95olzwEcIcd339ZHsQo1FVnEZtCm6lYCdLhOeIEFeChpbxghCCgfQAmCWcVDHW8MBRGijAPj4H9Xk34vQX5xtIjYF9JskSftk6bLoBzKccERFlxiCtNXax2W9eI/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-01.jpg"></a></div>
<br>
Links zwei Free-Pakete, die sich etwas unterscheiden. Davon muß ich mir bei der Anmeldung gleich eins aussuchen.<br>
<br>
Rechts unten haben wir die Option "domaincheck". <br>
Hier müssen wir einen noch nicht verwendeten Benutzernamen finden.<br>
Man sollte bedenken, dass Dein Space später unter dieser Adresse zu erreichen ist. Also: www.<b>Benutzername</b>.bplaced.net.<br>
<br>
Das finden eines anständigen Benutzernamens kann -so ähnlich wie bei blogger- ein paar Anläufe benötigen.<br>
Wichtig ist, dass Ihr eine "echte" Mailadresse verwendet. Keine "Trash-Mail-Adresse".<br>
Bplaced wird Euch nacher einen Bestätigungslink senden um Euren Account freizuschalten.<br>
Pro Mailadresse darf nur ein Account angelegt werden.<br>
<br>
Nachdem man einen freien Benutzernamen gefunden hat, geht es weiter zur eigentlichen Anmeldung.<br>
<i>( Ich habe eine übrig gebliebene Adresse, die ich verwenden werde. )</i><br>
<i><br></i>
Den Benutzernamen und das angegebene Passwort werden wir noch zusätzlich benötigen um eine Verbindung zum Server herzustellen.<br>
<br>
Jetzt geht es darum einen Paket auszusuchen. Wir können uns ruhig das 2GB-Paket aussuchen. Das ist genug Platz.<br>
Wer nicht so viel Platz benötigt und evtl zukünftig mehrere Datenbanken braucht, der wähle das kleinere Paket.<br>
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.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsez3mqTTOJ4u-sEVetbXZ4aptqlSJnsV_AkhChII7omWMQtiJHatEE4Xb5GVi_WwV_KUqBMG48shD9GiVCQEQSVQdWz_sSR_1JNO_BoOxcc7KH5IUsRPAOEZQF4hsyqHumko5NglqDfo/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-02.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsez3mqTTOJ4u-sEVetbXZ4aptqlSJnsV_AkhChII7omWMQtiJHatEE4Xb5GVi_WwV_KUqBMG48shD9GiVCQEQSVQdWz_sSR_1JNO_BoOxcc7KH5IUsRPAOEZQF4hsyqHumko5NglqDfo/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-02.jpg"></a></div>
<br>
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.<br>
<br>
Um diesen jetzt und auch zukünftig zu betreten, gehen wir auf die <a href="http://bplaced.net/" target="_blank">Stratseite von bplaced</a> .<br>
Dort sehen wir den Userlogin.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1_nZ15x-Dx-NOkU47Dv-JaUd1yf5gk4uMhQil1od0CkdiUwwZ8iKwyBN2oIJvt09HckjCJ7XW9kPHKpCtW4WBG9wuVzM8i-rLvZKUsYXrZqC9JoR5GEh1djKKBFuXJYvQTZXYeiAuiQ/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-03.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1_nZ15x-Dx-NOkU47Dv-JaUd1yf5gk4uMhQil1od0CkdiUwwZ8iKwyBN2oIJvt09HckjCJ7XW9kPHKpCtW4WBG9wuVzM8i-rLvZKUsYXrZqC9JoR5GEh1djKKBFuXJYvQTZXYeiAuiQ/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-03.jpg"></a></div>
<br>
Wir betreten den Account einfach mal abschließend.<br>
Wenn es so wie unten aussieht, dann habt Ihr es geschafft und wir können zum nächsten Schritt gehen.<br>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudKupEW4qQtXNWZE928-26tLm_3QuY-vUVKUpexf6ZyDj4ktvNYJDal2A0e0JuBfGe4i5rRpUTB1mH5JFye5TIkg5SNJHRoEYJrgxVMuVa0HVgF0TaV5JVxh7vbpMerXwgTpE2djNFu8/s1600/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-04.jpg" imageanchor="1"><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudKupEW4qQtXNWZE928-26tLm_3QuY-vUVKUpexf6ZyDj4ktvNYJDal2A0e0JuBfGe4i5rRpUTB1mH5JFye5TIkg5SNJHRoEYJrgxVMuVa0HVgF0TaV5JVxh7vbpMerXwgTpE2djNFu8/s320/externen-downloadbereich-f%25C3%25BCr-blogspot-blogger-einrichten-2-04.jpg"></a></div>
<br>
Dieser Bereich steht in der Regel sofort zur Verfügung.<br>
Allerdings dauert es beim FTP-Zugang (Teil3) und bis die Seite extern erreichbar ist eine Weile.<br>
Bei mir war es letztens eine Stunde, aber was solls, kostet ja nichts.<br>
<br>
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.<br>
Dann wären alle Daten weg und Eure Besucher landen nur noch auf tote Links.<br>
Ausserdem wäre die ganze Arbeit umsonst.<br>
Man bekommt allerdings vorher eine Mail und wird darauf aufmerksam gemacht.<br>
Ich schaue bei meinem Account einmal im Monat vorbei (einmal einloggen und dann wieder raus) und hatte noch nie Probleme.<br>
<br>
Im nächsten Teil werden wir eine Verbindung zum Webspace herstellen.<br>
<div id="teile-bottom">
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a class="current" href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a></div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-85166488639805611182015-12-25T17:49:00.000+01:002022-11-06T13:21:09.244+01:00Externen Downloadbereich für Blogspot-Blogger einrichten / 1<div id="teile-top">
<a class="current" href="http://blogschande.blogspot.com/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.com/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a>
</div>
Das schöne an blogspot ist, dass man keinen eigenen Webspace benötigt, da man das gestellt bekommt.<br>
Gleichzeitig ist es aber für einige Sachen nachteilhaft.<br>
Für das was ich hier vorhabe, ist es der Fall.<br>
<br>
Will man Dateien zum Download anbieten, wird es bei blogspot ätzend.<br>
Zwar kann man mit Google Drive etwas in der Art machen, aber das ist mir nicht genug.<br>
Damit meine ich auf einen Link klicken und Download startet automatisch und zwar egal welche Dateiform.<br>
<br>
Das ist das was ich hier realisieren möchte.<br>
Um die Sache übersichtlich zu halten, werde ich den Beitrag in mehreren Teilen splitten.<br>
<br>
Erst einmal geht es darum grob zu verstehen was wir dafür benötigen.<br>
Das wäre:<br>
1. Einen Webspace um Dateien zu hinterlegen<br>
2. Ein Programm um mit dem Webspace/Server zu kommunizieren<br>
3. Zwei Dateien um das Ganze zu ermöglichen bzw anzupassen.<br>
<br>Ferner entsprechende Datei(en), die wir zum Download anbieten wollen.<br>
<br>
Dadurch dass wir einen kostenlosen Anbieter verwenden werden, entstehen keine Kosten.<br>
Ihr müßt lediglich etwas Zeit investieren.<br>
<br>
Zu 1:<br>
Als Webspace werde ich den kostenlosen Hoster <span style="color: blue;"><i>bplaced</i></span> verwenden.<br>
Ihr könnt auch einen anderen verwenden.<br>
Wichtig ist es das es PHP-tauglich ist bzw sogenannte ''htaccess'' Dateien unterstützt.<br>
Für unser Vorhaben ist bplaced ausreichend.<br>
Zwar sind bei bplaced-freehosting einige Funktionen eingeschränkt, die uns aber hierfür nicht betreffen.<br>
<br>
Zu 2:<br>
Um mit dem Server zu kommunizieren habe ich das weitverbreitete Programm <span style="color: blue;"><i>FileZilla</i></span> gewählt.<br>Es gibt eine Portable Version, die man bei Bedarf in der Hosentasche hat. <br>
<br>
Zu 3:<br>
Diese Dateien können mit dem <span style="color: blue;"><i>Windows-Editor</i></span> erzeugt werden.<br>
Nicht Notepad, Word oder so ein Kram.<br>
Ich selber verwende Notepad++ .<br>
Da bist du immer auf der sicheren Seite.<br>
Im Tutorial werde ich aber den Windows-On-Board-Editor verwenden.<br>
<br>
Soweit also kurz erklärt worum es geht.<br>
Es mag zwar etwas schwierig klingen, aber das ist es nicht.<br>
<br>
Der Download startet je nach Browsereinstellung automatisch oder es gibt eine Anfrage.<br>
<br>
Im nächsten Teil werde ich auf dem Webspace eingehen.<br>
<br>
<i><small>Getestet wurde der Download unter:</small></i><br>
<i><small>Desk: Crome, Firefox, Explorer</small></i><br>
<i><small>Mobil: Samsung S6</small></i>
<br>
<div id="teile-bottom">
<a class="current" href="http://blogschande.blogspot.com/2015/12/externen-downloadbereich-fur-blogspot_25.html">Teil 1</a>
<a href="http://blogschande.blogspot.com/2015/12/externen-downloadbereich-fur-blogspot_27.html">Teil 2</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot28_28.html">Teil 3</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-4.html">Teil 4</a>
<a href="http://blogschande.blogspot.de/2015/12/externen-downloadbereich-fur-blogspot-5.html">Teil 5</a></div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-79452141918149744802015-11-29T17:39:00.000+01:002022-10-29T21:38:05.131+02:00Fullscreen Rotation Hintergrundbild auf BlogspotOder wechselnde Fullscreen Hintergundbilder.<br>
<br>
Das Einbinden eines 100%-Hintergrundbildes hatten wir ja schon.<br>
Wer es noch nicht kennt, kann es <a href="http://blogschande.blogspot.de/2015/08/100-hintergrundbild-in-blog-einbauen.html" target="_blank">hier</a> nachlesen.<br>
<br>
Was ist aber, wenn ich möchte, dass das Hintergrundbild wechseln soll?<br>
So wie auf <a href="http://we-are-not-available.blogspot.de/" target="_blank">diesem Blog</a> .<br>
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.<br>
<br>
Gott sei Dank gibt es jQuery.<br>
Genauer gesagt handelt es sich um das jQuery Cycle Plugin.<br>
<br>
Allerdings erweist sich das Einbinden in den Quellcode bei blogspot als etwas umständlicher.<br>
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.<br>
Insofern ist die externe Auszulagerung der Plugins eine vernünftige, schnelle Alternative.<br>
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.<br>
<br>
Wir benötigen folgende Sachen:<br>
1. Unsere Bilder. Ich gehe im Beispiel auf drei Stück ein (meine Maße: 1280 x 800 px).<br>
Ihr könnt natürlich soviele Pics verwenden wir Ihr wollt.<br>
<i>Meine Bilder habe ich übrigens von wallpaperswide.com</i><br>
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.<br>
Eine CSS für jQuery selbst, die wir entern auslagern (jquery.maximage.css).<br>
3. Etwas HTML-Code.<br>
4. Die Scripts zum Einbinden.<br>
<br>
Also los gehts<br>
<b>Jagd Eure Bilder auf Picasa oder wohin Ihr wollt hoch und kopiert den Pfad zu den Bildern.</b><br>
<i>Ich verwende jpg's, aber ihr könnt auch andere Formate nehmen.</i><br>
<br>
<b style="white-space: pre;">Unsere Scripts <a href="https://www.facebook.com/groups/1645704485696784/files/" target="_blank">hier</a> herunterladen (WinRar-Datei) .</b><br>
<br>
<b>JETZT GEHT ES NUR DARUM UNSEREN CODE EINZUBAUEN.</b><br>
Dazu müssen wir über unser Dashboard in den HTML-Code hinein.<br>
<br>
Kopiert als aller erstes diese CSS-Anweisung in Euren Blog hinein<b> </b><br>
#maximage {<br>
<span class="Apple-tab-span" style="white-space: pre;"> </span>position:fixed !important; /* das ist die Box wo unsere Bilder hinein kommen*/<br>
}<span class="Apple-tab-span" style="white-space: pre;"> </span><br>
<span class="Apple-tab-span" style="white-space: pre;"><br></span>
<span class="Apple-tab-span" style="white-space: pre;">Ferner unter </span><span style="white-space: pre;">Dashboard>Vorlage>>Anpassen>>Erweitert>>Bilder>>Hintergrundfarbe>>transparent</span><br>
<span class="Apple-tab-span" style="white-space: pre;"><br></span>
<span class="Apple-tab-span" style="white-space: pre;">Anschließend alle drei Dateien aus dem WinRar-Verzeichnis entpacken und auf dem Server hochladen und den Pfad kopieren.</span><br>
<span class="Apple-tab-span" style="white-space: pre;"><br></span>
<span class="Apple-tab-span" style="white-space: pre;">Die </span><span style="white-space: pre;">jquery.maximage.css setzen wir zwischen <head> und </head></span><br>
<span style="white-space: pre;"><br></span>
<span style="white-space: pre;"><link rel="stylesheet" href="<span style="color: red;">Pfad-zur-Datei/</span>jquery.maximage.css" type="text/css" media="screen" /></span><br>
<span style="white-space: pre;"><br></span>
<span style="white-space: pre;">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:</span><br>
<span style="white-space: pre;"><br></span>
<span style="white-space: pre;"><div id="maximage">
<img src="</span><span style="color: red; white-space: pre;">Pfad-zur-Bild-1.jpg</span><span style="white-space: pre;">" alt="" /></span><br>
<span style="white-space: pre;"> <img src="</span><span style="color: red; white-space: pre;">Pfad-zur-Bild-2.jpg</span><span style="white-space: pre;">" alt="" /></span><br>
<span style="white-space: pre;"> <img src="</span><span style="color: red; white-space: pre;">Pfad-zur-Bild-3.jpg</span><span style="white-space: pre;">" alt="" /></span><br>
<span style="white-space: pre;"> usw</span><br>
<span style="white-space: pre;"></div></span><br>
<span style="white-space: pre;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script src="</span><span style="color: red; white-space: pre;">Pfad-zur-Datei/</span><span style="white-space: pre;">jquery.cycle.all.js" type="text/javascript"></script></span><br>
<span style="white-space: pre;"><script src="</span><span style="color: red; white-space: pre;">Pfad-zur-Datei/</span><span style="white-space: pre;">jquery.maximage.js" type="text/javascript"></script></span><br>
<span style="white-space: pre;"><script type="text/javascript"> $(function(){ // Trigger maximage jQuery('#maximage').maximage(); }); </script></span><br>
<span style="white-space: pre;"><br></span>
<span style="white-space: pre;">Aber Vorsicht! Es kann durchaus sein, dass das ganze bei Euch nicht läuft.
Es kann passieren, dass sich JavaScripts gegenseitig aushebeln.</span><br>
<span style="white-space: pre;"><br></span>
<span style="white-space: pre;">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.</span><br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-42028193163363195072015-09-13T11:30:00.000+02:002022-11-06T13:59:42.305+01:00Nivo-Slider in Blogger einbauenVorab sei gesagt, dass ich folgende Spielerei eher für Desktopdesings empfehle.<br>
Bei mobilen Geräten kann es schief gehen.<div><span style="letter-spacing: 0.2px;">Wie zB ganz oben auf </span><a href="http://blogstrasse.blogspot.de/" target="_blank" style="letter-spacing: 0.2px;">meinen Testblog</a><span style="letter-spacing: 0.2px;"> in der Web-Version zu sehen.</span><br></div><div><br>
Wir werden den Slider auf der Startseite einbauen.<br><br>Meine Bilder sind alle gleich groß (912 x 385 px) <br>
<br>
Fangen wir damit an unter Layout eine neue HTML/Javascript Cross Column Gadget einfügen.<br>
Die neue Column nennt Blogger <span style="white-space: pre;">r</span>egion-inner tabs-inner<br>
<span class="Apple-tab-span" style="white-space: pre;"> </span><br>
Anschließend den Header und die navbar mittels CSS entfernen und den padding (Absand zum Rand) bei der neuen Column entfernen.<br>
CSS lautet jetzt:<br>
#navbar {display:none}<br>
.header {display:none}<br>
.region-inner.tabs-inner {margin:0;padding:0}<br>
#crosscol {margin:0;padding:0}<br>
<br>
<i>Wenn man nicht möchte dass der slider nach dem Laden springt:</i><br>
<i>.region-inner.tabs-inner {margin:0;padding:0;height:397px}</i><br>
<i>Ihr tragt natürlich die Höhe Eurer Bilder ein.<br>Würde ich nur auf Desktopversion nehmen</i><br>
<br>
Jetzt ein paar Angaben im Headbereich eingeben um den Slider zu steuern.<br>
Wir gehen unter Vorlage>>HTML bearbeiten und geben zwischen <head>und</head> folgendes ein:<br>
<!-- NIVO SLIDER ANFANG --><br>
<link href='pfad-zum-server/themes/default/default.css' media='screen' rel='stylesheet' type='text/css'/><br>
<link href='pfad-zum-server/themes/light/light.css' media='screen' rel='stylesheet' type='text/css'/><br>
<link href='pfad-zum-server/themes/dark/dark.css' media='screen' rel='stylesheet' type='text/css'/><br>
<link href='pfad-zum-server/themes/bar/bar.css' media='screen' rel='stylesheet' type='text/css'/><br>
<link href='pfad-zum-server/nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/><br>
<!-- NIVO SLIDER ENDE --><br>
<br>
<br>
Fehlen nur noch meine vorbereiteten Bilder auf Picasa-Webalben hochzuladen und mir den Pfad zu kopieren<br>
Ich habe mir drei Bilder vom Kumpel ausgeliehen, die die Maße 940x397 Pixel haben.<br>
( slider-01.jpg – slider-02.jpg – slider-03jpg )<br>
Das wird die Breite sein,die meine Column haben wird.<br>
Die Höhe könnt Ihr so legen wie es Euch passt.<br>
Wichtig ist nur,dass die Bilder alle die selben Maße haben.<br>
<br>
Und jetzt geht es ab in unsere Column um folgendes einzugeben:<br>
<div class="slider-wrapper theme-default"><br>
<div id="slider" class="nivoSlider"><br>
<!-- Bild 1 - Einfaches Bild --><br>
<img src="pfad-picasa-album/slider-01.jpg" alt="" /><br>
<span class="Apple-tab-span" style="white-space: pre;"> </span><span style="white-space: pre;"> </span><br>
<!-- Bild 2 - Verlinktes Bild --><br>
<a href="#"><img src="pfad-picasa-album/slider-02.jpg" alt="" title="Klick auf das Bild und du gelangst zur Galerie" /></a><br>
<span class="Apple-tab-span" style="white-space: pre;"> </span><br>
<!-- Bild 3 - Verlinkte Schrift --><br>
<img src="pfad-picasa-album/slider-03.jpg" alt="" title="#htmlcaption" /><br>
</div><br>
<!-- Dieser Text wird bei Bild 3 ausgegeben --><br>
<div id="htmlcaption" class="nivo-html-caption"><br>
Direkt zur <a href="#"> Galerie</a>.<br>
</div><br>
</div><br>
<br>
<script type="text/javascript" src="pfad-zum-server/scripts/jquery-1.9.0.min.js"></script><br>
<script type="text/javascript" src="pfad-zum-server/scripts/jquery.nivo.slider.js"></script><br>
<script type="text/javascript"><br>
$(window).load(function() {<br>
$('#slider').nivoSlider();<br>
});<br>
</script><br>
<br>
Und wenn wir alles richtig gemacht haben sollte es sliden.<br></div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-9846209526117720282015-09-04T14:43:00.000+02:002022-11-06T10:46:50.764+01:00Social Media Container - Rechts gefloatetEs geht darum in einer Navigation Social-Media-Buttons einzubauen, die sich am rechten Rand ausrichten. Da lag das Problem.<br>
Die Schwierigkeit ist der Kasten rechts mit den Buttons.<br>
Auf das minimum reduziert und unausgeschmückt soll es so oder so ähnlich aussehen:<br>
<div style="background: green; height: 30px;">
<div style="background: red; float: left; height: 30px;">
Mein Logo</div>
<div style="background: orange; float: right; height: 30px;">
Buttons</div>
<div style="clear: both;">
</div>
</div>
<br>
Jetzt müssen wir nur verstehen wie der Aufbau ist.<br>
Das was Du immer im Quelltext siehst, als div bezeichnet, ist ja nichts anderes als eine Box.<br>
<br>
In diesem Fall haben wie eine Box und darin befinden sich zwei boxen,<br>
Eine links und die andere rechts positioniert. Alle Boxen haben hier eine Höhe von 30px.<br>
Vereinfacht haben wir in der HTML:<br>
<span style="color: #6aa84f;"><b><div class="green"></b></span><br>
<b> <span style="color: red;"><div class="red">Mein Logo</div></span></b><br>
<b> <span style="color: orange;"><div class="orange">Buttons</div></span></b><br>
<span style="color: #6aa84f;"><b></div></b></span><br>
<br>
Daher ist unsere CSS (background entspricht der jeweiligen Farbe) <b></b>erstmal<br>
.green {background:green; height:30px}<br>
.red {background:red; height: 30px}<br>
.orange {background:orange; height: 30px}<br>
<br>
Doch das wird nicht klappen, weil die div-elemente von Haus aus einen Standardwert haben.<br>
Das ist display: block.<br>
Das heißt sie zieht sich -solange ich nichts anderes befehle- bis zum Ende des vorhandenen, restlichen Platzes.<br>
Zum besseren Verständnis:<br>
Die grüne Box alleine verhält sich so:<br>
<div style="background: green; height: 30px;">
</div>
Volle Möhre auf die ganze Breite gezogen.<br>
<br>
Und was passiert, wenn ich alle drei Boxen wie oben beschrieben miteinander verschachtel?<br>
<div style="background: black; height: 30px;">
<div style="background: red; height: 30px;">
Mein Logo</div>
<div style="background: orange; height: 30px;">
Buttons</div>
</div>
<br>
<br>
Die zwei Boxen innen verhalten sich wie die grüne.<br>
Ziehen sich bis zum Ende, stellen sich untereinander und überdecken den Hintergrund der grünen Box.<br>
<br>
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.<br>
<br>
Dafür gibt es für diesen Zweck die CSS-Anweisung float (engl.sowas wie fließen,schweben,gleiten).<br>
Da hätten wir float:right - float:left - float:none<br>
<br>
CSS:<br>
.green {background:green; height: 30px}<br>
.red {background:red; height: 30px;<span style="color: red;">float:left</span>}<br>
.orange {background:orange; height: 30px; <span style="color: orange;">float:right</span>}<br>
<br>
<div style="background: green; height: 30px;">
<div style="background: red; float: left; height: 30px;">
Mein Logo</div>
<div style="background: orange; float: right; height: 30px;">
Buttons</div>
</div>
<br>
Das einzige was wir noch machen müssen ist, bescheid zu geben, dass wir mit dem floaten aufhören.<br>
Das machen wir mit CSS-Anweisung clear: both <i>(tradizionelle Methode.gibt andere,aber lassen wir erstmal gut sein)</i><br>
<br>
Hier um Verwirrung zu vermeiden die gesamte CSS nochmal,bevor wir anfangen sie auszuschmücken.<br>
<b>.green {background:green; } </b><i><span style="font-size: x-small;"><< Höhe jetzt weggelassen,damit sie sich automatisch anpasst</span></i><br>
<b>.red {background:red; height: 30px;float:left}</b><br>
<b>.orange {background:orange; height: 30px; float:right}</b><br>
<b>.clear {both}</b><br>
<br>
Gesamte HTML:<br>
<b><div class="green"></b><br>
<b> <div class="red">Mein Logo</div></b><br>
<b> <div class="orange">Buttons</div></b><br>
<b> <div class="clear"></div></b><br>
<b></div></b><br>
<b><br></b>
Und jetzt fügen wir endlich unsere social-things-bums ein.<br>
Ich nehme die ersten drei, die mir vor die Flinte laufen und lade sie auf Picasa hoch.<br>
<img border="0" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqD5kX1sAkOOlAdtKJAsKVTWuBVK5NWe4yq-vQCrdmr0y5BWUupJWAtoOAm724ebnuVamm8g2r0zRgQXZnn35Ksp9HgbXjMC5iRcccnucdbRe_osyKo2kkwC00-HCP_AbjPHG-eAT27kY/s1600/google%252B_30x30.png">
<img border="0" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOG_zToYc9RrffhEmVeNsrn4dkx2NLmwCIfaq3H4GEXG5Zz0KEj55PpJqbL3mUGi5pPiYqgY3A8zNy3WmSq6kTEEqfMdA07mQ0kp7iJeQZSUmscxXaGOS2Z67s9vk5WFYdYVrSUHa6ktc/s1600/facebook_30x30.png">
<img border="0" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgRpzmW48No4ioV-a92WnVQ3f3TzyP97rgEhv9nb736JiMKV7rcmjzPCnExlrqmJUlztYnIzC6RhiwBYU3xhMJ52lT3R5fJJkx9IcGe1IKAgPxsYXkpsTa_mo8Nrdgfre3TrjonAfD9Rs/s1600/youtube_30x30.png"><br>
<br>
<b><div class="green"></b><br>
<b> <div class="red">Mein Logo</div></b><br>
<b> <div class="orange"></b><br>
<b> <img src="Pfad zum Bild1" alt=""></b><br>
<b> <img src="Pfad zum Bild2" alt=""></b><br>
<b> <img src="Pfad zum Bild3" alt=""></b><br>
<b> </div></b><br>
<b> <div class="clear"></div></b><br>
<b></div></b>
<br>
<br>
<br>
Und hier das Ergebnis mit minimale Veränderungen<br>
<div style="background: black; padding: 10px;">
<div style="color: white; float: left; height: 30px; line-height: 30px;">
ICH HABE KEINE LUST MEHR ZU SCHREIBEN</div>
<div style="float: right; height: 30px; line-height: 0;">
<img alt="" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyAEtrl43Htu9OYSj0gs518x_XZ0FrS0TI6ya0WKW6Bu2-92b2h-3hil4Xz8FyZGQfVXaNT0UzhZJCpShZW3YBsHsINWd6CB0w2pqVlvvHLLFiclt5Np8Rk3sx4Z28aE3ZKQX0Mn3daHs/s30-Ic42/google%25252B_30x30.png" style="float: left; margin: 0; padding: 0;">
<img alt="" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIUZKXEm8Qxb3Jznm9scX_8zWI2Ly3gKagFxWNmUANYKY8Xty0Fspp5nopx3rNFTbJfAntek_gkfe76Nsf6QK2gGK10cC1ZCdx52Mdw1P218QYrvf-k75VnVw4MmFI_FGE5OXceRVIopY/s30-Ic42/facebook_30x30.png" style="float: left; margin: 0; padding: 0;">
<img alt="" class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3mvj9CCE8ETv_Zllt71RRnBlTcSsXHHJV8S21xuspNxRPRCQ3jXr3Z04-MpXG58M6qANzpg1Z0OQWjZpCY-flYJGVsItIuVxsE7aXtYk1J6yVYErjqVNQAtSsMzFfl0vi4qCjqE-Q2SI/s30-Ic42/youtube_30x30.png" style="float: left; margin: 0; padding: 0;">
</div>
<div class="clear">
</div>
</div>
<br>
Habe mich sehr bemüht verständlich zu schreiben.<br>
Fachchinesisch möglichst vermieden.<br>
Ein Webdesigner würde mir die Ohren lang ziehen, aber who cares?<br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-30888404036249189812015-09-02T02:40:00.000+02:002022-10-29T23:39:00.342+02:00Saubere Ankerlinks bei blogger setzenDer sauberste weg einen Ankerlink in blogger zu setzen ist der, eine id zu setzen.<br>
Wie,wo,was?<br>
<br>
Ich möchte folgendes machen:<br>
Ich drücke auf einen Link und dann springe ich zu einer anderen Stelle auf meiner Seite.<br>
Dafür muss ich ins HTML-Modus gehen.<br>
<br>
Was ich benötige ist die ganaue Adresse meiner Seite bzw meines Posts.<br>
Um das zu verdeutlichen nehme ich die Adresse dieses Posts.<br>
<br>
Die Stelle von wo ich starte kennzeichne ich so:<br>
<a href="<span style="color: red;"><b>http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html</b></span><b>#spring</b>">start</a><br>
Mein Anker heisst bei mir also "<b>#spring</b>"<br>
<br>
Die Stelle wo ich hin springen will/mein Ziel, kennzeiche ich wie folgt:<br>
<div id="<b>spring</b>">Ziel</div><br>
<br>
Der Text muss nicht zwingend im div stehen.<br>
Bietet sich aber an,vor allem wenn es eine Überschrift ist.<br>
<i>Praktisches Beispiel hierzu ganz unten unter PS</i><br>
Das würde natürlich auch gehen<br>
<div id="<b>spring</b>"></div><br>
Ziel<br>
<br>
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.<br>
<br>
Denkt daran, dass eine id nur einmal auf einer Seite vorkommen darf.<br>
Wenn Ihr noch einen Ankerlink setzen wollt müsst Ihr eben einen anderen Namen vergeben.<br>
Zb:<br>
Die Stelle von wo ich starte zb "spring2" nennen:<br>
<a href="<span style="color: red;"><b>http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html</b></span><b>#spring2</b>">start</a><br>
<br>
Die Stelle wo ich hin springen will/mein Ziel, dementsprechend "spring2":<br>
<div id="<b>spring2</b>">Ziel</div><br>
usw.<br>
<br>
Das ganze würde natürlich auch von einer anderen Seite aus funktionieren.<br>
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.<br>
"Genaue Informationen zum Thema finden Sie<br>
<a href="<span style="color: red;"><b>http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html</b></span><b>#spring</b>">hier</a>"<br>
Dann würde mein Besucher genau an dieser Stelle landen, ohne den gesamten Beitrag lesen zu müssen.<br>
<br>
Ihr könnt ebenfalls einen span-tag anstatt eines div-tags verwenden.<br>
Also:<br>
<span id="<b>spring</b>"></span><br>
<br>
Unten könnt Ihr einen Link in Aktion sehen.<br>
<br>
Es gibt noch zwei andere Möglichkeiten, die jedoch überholt sind, und auf die sich nicht lohnt einzugehen.<br>
Auf Wunsch kann ich das machen, aber die sind beide voll Banane, finde ich.<div><br>
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring">start</a><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="spring">
Ziel</div>
<hr>
<span style="color: red;"><i>PS </i></span><br>
Oft kommt es vor, dass man die Stelle wo man hin springt als Überschrift verwendet.
<br>
Diese ist meistens größer formatiert, die Schrift ist fett oder hat eine andere Farbe.<br>
Da bietet sich an diesen div zu formatieren.<br>
Wir nehmen den oben angesprochenen div:<br>
<div id="<b>spring1</b>">Ziel</div><br>
<br>
Jetzt geben wir den div eine class. Zb die class "ueberschrift".<br>
<div id="<b>spring1</b>" class="ueberschrift">Ziel</div><br>
<br>
Unsere CSS dazu:<br>
.ueberschrift {<br>
font-size: 22px;<br>
font-weight: bold;<br>
color: green<br>
}<br>
<br>
Hier das Ergebnis:<br>
<div id="spring2" style="color: green; font-size: 22px; font-weight: bold;">
Ziel</div>
Somit wird jede Überschrift automatisch formatiert.<br>
Im Nachhinein kann ich zudem schnell eine Veränderung für alle divs auf einmal vornehmen.</div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-73197071952658344892015-08-30T15:24:00.000+02:002022-10-29T21:37:21.711+02:00Flexible Youtube-Videos für MobilgeräteMir fiel auf, dass viele Youtube-Videos eingebettet haben.<br>
Entweder in der Sidebar ober im Post selber.<br>
Oft ragen diese Videoboxen aus den Elemente oder gar der Seite hinaus.<br>
<br>
Wenn wir ein Video von Youtube einbetten bekommen wir folgendes von Youtube:<br>
<iframe width="420" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw" frameborder="0" allowfullscreen></iframe><div><br><div>Youtube gibt mir eine feste Breite und Höhe vor, die ich dann manuell verändern muss, falls sie mich nicht anspricht.</div><div><br>
Das ist natürlich der Tod für einige mobile Geräte, da die Videos einfach diese Breite beibehalten.</div><div><br>
Damit die Videos flexibel/responsive werden, benötige ich lediglich etwas CSS und eine etwas veränderte HTML-Eingabe.</div><div><br><div><div><div>
Zur CSS (für meine Zwecke etwas angepasst):
<br>
.video-container {<br>
position: relative;<br>
padding-bottom: 56.25%;<br>
padding-top: 30px;<br>
height: 0;<br>
overflow: hidden;<br>
margin-bottom: 10px;<br>
border: 1px solid silver;<br>
}<br>
.video-container iframe,<br>
.video-container object,<br>
.video-container embed {<br>
position: absolute;<br>
top: 0;<br>
left: 0;<br>
width: 100%;<br>
height: 100%;<br>
}<br>
iframe {<br>
border: 0<br>
}<br>
<br>
Zur HTML:<br>
<div class="video-container"><br>
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe><br>
</div></div><div><br></div><div><div class="video-container"><span style="letter-spacing: 0.2px;">Wir sehen jetzt, dass die Box sich nicht um die Angaben kümmert, sondern sich der Breite anpasst.</span></div><div class="video-container"><span style="letter-spacing: 0.2px;"><br></span></div>
Ich habe den iframe noch etwas hinzugefügt, dass ich unten rot hervorhebe:<br>
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw<span style="color: red;">?rel=0</span>" width="420"></iframe></div><div><br>
Das bewirkt,dass am Ende keine Videovorschläge von Youtube erscheinen.<br>
Ich mag das nicht.<br>
Wenn Ihr das möchtet, dann <span style="color: red;">?rel=0 </span>einfach weglassen.</div><div><br>
Wenn Ihr jetzt auf der ganz sicheren Seite sein wollt, würde ich noch einen div drum herum einbauen.<br>
Damit könnt Ihr später das ganze nachtäglich noch verändern, falls Ihr Euch umentscheidet.<br>
Wir fügen also noch eine Box ein.<br>
Diese nennen wir beispielsweise video-box (Ihr könnt die nennen wie Ihr wollt.</div><div><br></div><div>
Unsere HTML sehe dann so aus:<br>
<span style="color: red;"><div class="video-box"></span><br>
<div class="video-container"><br>
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe><br>
</div><br>
<span style="color: red;"></div></span></div><div><font color="#ff0000"><br></font>
In unserer CSS tragen wir die box auch ein. Erstmal ohne Werte:<br>
.video-box {}</div><div><br>
Wofür der ganze Stress?<br>
Beispiel:<br>
Ihr habt das Video wie beschrieben auf volle Breite gesetzt.<br>
Jetzt entscheidet Ihr Euch, der soll nur 300px beit sein.<br>
Dann geht ihr einfach in die CSS und verändert den Wert:<br>
.video-box {width:300px}</div><div><br>
Ein Eintrag genügt um dieses Ergebnis zu erzielen</div><div><br></div><div>
<div class="video-box tutorial">
<div class="video-container"><span style="letter-spacing: 0.2px;">Man kann außerdem noch eine ganze Menge Spielerein mit diesen beiden Boxen anstellen.</span></div></div>
Effekte wie Schatten,Rahmen,Hintergründe, Ladezeichen hinter der Box und weiß der Geier was noch.<br>
<br>
Bis............</div><div><br>
<hr>
<span style="color: red;">Nachtrag</span><br>
<span style="color: red;"><br></span>
Für die jenigen die lieber mit Javascript arbeiten möchten<br>
<br>
<i>Das teilte mir <b>Oliver Doetsch</b> mit</i><br>
<i>(einfach hier hinein kopiert):</i><br>
<br>
Eine sehr schöne Lösung von <b>+Myriam Kreatief</b><br>
<script><br>
(function() {<br>
HTMLElement.prototype.wrap = function(elms) {<br>
if (!elms.length) elms = [elms];<br>
for (var i = elms.length - 1; i >= 0; i--) {<br>
var child = (i > 0) ? this.cloneNode(true) : this;<br>
var el = elms[i];<br>
<br>
var parent = el.parentNode;<br>
var sibling = el.nextSibling;<br>
<br>
child.appendChild(el);<br>
<br>
if (sibling) {<br>
parent.insertBefore(child, sibling);<br>
} else {<br>
parent.appendChild(child);<br>
}<br>
}<br>
};<br>
<br>
var iframe = document.querySelector('iframe[src*="youtube"]'),<br>
css = iframe.style;<br>
<br>
css.width = '100%';<br>
css.height = '100%';<br>
css.position = 'absolute';<br>
css.top = '0';<br>
css.left = '0';<br>
<br>
var div = document.createElement('div'),<br>
css = div.style;<br>
<br>
div.wrap(iframe);<br>
<br>
css.position = 'relative';<br>
css.width = '100%';<br>
css.height = '0';<br>
css.padding = '56.25% 0 0 0';<br>
css.display = 'block';<br>
})();<br>
</script></div></div></div></div></div>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-5784385788843215902015-08-28T22:25:00.001+02:002022-10-29T21:42:37.878+02:00Blogger Bild-Gadget ohne Überschrift Einigen von Euch ist sicherlich bekannt, dass man die o.e. Überschrift mit<br>
<!-- Zwangsüberschift --><br>
ausblenden kann.<br>
<br>
Wenn nicht, wisst Ihr es jetzt.<br>
<br>
Ich stand selber vor diesem Problem und habe es anders gelöst.<br>
<br>
Mein Weg ist der, dass man einen HTML-Leerzeichen einfügt:<br>
&nbsp;<br>
<br>
Somit hätten wir jetzt zwei Wege.<br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-31759760647777485032015-08-27T16:41:00.000+02:002015-08-30T16:49:21.886+02:00Printfrieddly - Eigene Buttons einbindenDer unten aufgeführte Code spuckt diese Grafik aus.<br />
<img src="http://cdn.printfriendly.com/button-print-gry20.png" /><br />
<span style="color: blue;"><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></span><br />
<span style="color: blue;"><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></span><br />
<span style="color: blue;"><br /></span>
Nehmen wir mal an du magst einen anderen Button haben,<br />
Zb diesen hier von der printfriendly Homepage.<br />
<img src="http://cdn.printfriendly.com/pf-button.gif" /><br />
<br />
Einfach von der Homepage per Rechts-Klick die URL kopieren<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRQAOLW7Hh3ppvzyBu003wrRznijcLUUkcoIXhZpI8ovp5zmW7lH5pNVmgumgqA0xLOY4R6oR5_HFjkj-pScFM2-5rO2n8jPAuxbPp9aV7M2TODiahwdX7qP8zWt45p6W75qKOIyReXQ/s1600/printfrieddly-eigene-buttons-einbinden-01.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRQAOLW7Hh3ppvzyBu003wrRznijcLUUkcoIXhZpI8ovp5zmW7lH5pNVmgumgqA0xLOY4R6oR5_HFjkj-pScFM2-5rO2n8jPAuxbPp9aV7M2TODiahwdX7qP8zWt45p6W75qKOIyReXQ/s640/printfrieddly-eigene-buttons-einbinden-01.jpg" width="640" /></a></div>
<br />
Das wäre<br />
http://cdn.printfriendly.com/pf-button.gif<br />
<br />
Nun lediglich die URL tauschen mit der unten rot gefärbten URL<br />
<br />
<span style="color: blue;"><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></span><br />
<span style="color: blue;"><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="</span><span style="color: red;"><b>http://cdn.printfriendly.com/button-print-gry20.png</b></span><span style="color: blue;">" style="border:none;-webkit-box-shadow:none;box-shadow:none;" /></a></span><br />
<span style="color: blue;"><br /></span>
Wie erhalten<br />
<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/pf-button.gif" style="-webkit-box-shadow: none; border: none; box-shadow: none;" /></a><br />
<br />
<span style="color: blue;"><br /></span>Was auch geht ist eine eigene Grafik einbauen.<br />
Habe auf die schnelle eins bei Picasa hochgeladen.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
URL dann ausgetauscht und schon habe ich einen eigenen Button.<br />
Ok. Zugegeben es geht schöner, aber egal :)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdG-52-vk9WamAWr0cn05wY6jEO-aLZ277L9yUJLCG6Zh6Ovz5OH8ZHshI4WEgRXgJ2ePU51nIq-d12lQHDCpns3O2bfawAKjYugVB3KVo8Mp-d-Nfk1iPqASgwLj21eRAfHrSMB1aas/s1600/printfrieddly-eigene-buttons-einbinden-02.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdG-52-vk9WamAWr0cn05wY6jEO-aLZ277L9yUJLCG6Zh6Ovz5OH8ZHshI4WEgRXgJ2ePU51nIq-d12lQHDCpns3O2bfawAKjYugVB3KVo8Mp-d-Nfk1iPqASgwLj21eRAfHrSMB1aas/s640/printfrieddly-eigene-buttons-einbinden-02.jpg" width="640" /></a></div>
<br />
Und fertig wäre die Laube :)<br />
<br />
Naja, nicht ganz, weil der mir da nicht gefällt.<br />
Ich hätte ihn gerne woanders<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii80omzLsl7rTj-6eUTzF1hTTcfNQNR3QSM_W5ZOXZ2B3lvc9JkFs0BVSGv_ug_xiYN-APd_N7Gj0DRAS_TMXevHTUQOkBQ_fnomvIwBe1L7QFGwBKIJYhcWE_34ugmJ4lYiGfvchT2MU/s1600/printfrieddly-eigene-buttons-einbinden-03.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii80omzLsl7rTj-6eUTzF1hTTcfNQNR3QSM_W5ZOXZ2B3lvc9JkFs0BVSGv_ug_xiYN-APd_N7Gj0DRAS_TMXevHTUQOkBQ_fnomvIwBe1L7QFGwBKIJYhcWE_34ugmJ4lYiGfvchT2MU/s640/printfrieddly-eigene-buttons-einbinden-03.jpg" width="640" /></a></div>
<br />
<br />
Die Zeile die ich jetzt suche:<br />
<div class='post-share-buttons goog-inline-block'><br />
Und genau wie oben den Code dahinter/darunter setzen.<br />
<br />
Somit bin ich nicht mehr so eingeschränkt und kann nach Belieben meine Buttons selbst bestimmen.<br />
Mal schauen wann Printfriendly das unterbindet.<br />
<br />
Hoffe es hat geholfen.<br />
Da keiner hier ein Kommentar schreibt, weiß ich es ja nie.<br />
<br />
Ja, hat mich denn gar keiner lieb :-( ?<br />
<img class="none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4JJwC1jUpWjTwABlcY1KkZKakS1nSrI5lW8rpVyXj8GGYmE1uKjGBsm7VqY7NE2caQdUVI-8t___nZhZ4OghFVUizDla9YgOxaEKg9E7cw6wSfPsf0rLM3vRRNt1gb5SORvFhHwYr9I/h120/smilie-wave.png" />Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-72379644890795007342015-08-27T03:18:00.000+02:002022-11-06T13:27:57.437+01:00Printfrieddly - Button einbindenIch muß gestehen ich kannte diesen Dienst gar nicht, aber eigentlich ganz einfach das ganze.<br>
Würde sich da nicht ein Parsing-Fehler einschleichen.<br>
<i>Wer was dazu lesen möchte siehe PS ganz unten.</i><br>
<i><br></i>
Im Code unten ist der Übeltäter behoben, so daß es jetzt klappen müßte.<br>
<br>
Ich habe diesen Button ausgesucht um einzubinden.<br>
<img src="http://cdn.printfriendly.com/button-print-gry20.png">
<br>
Der soll unter jeden Post erscheinen.<br>
<br>
Das ist der Code der dafür verwendet wird:<br>
<br>
<span style="color: blue;"><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></span><br>
<span style="color: blue;"><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></span><br><br>Der Script wird kopiert und HTML-Modus eingefügt. <br>
Dafür gehen wir zur Hauptbedienungsfläche.<br>
Also hier drüber:<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doq-Gy93BJsCg2Om5j6vImhUrCWDweDCH0SQlsrJXZB2fmez2-2qhZHY7cjrtAg7PU6FMIl8cvA3Zt0XEUTdrHE1jiZJWU9zFgOaHJJ7a36E6ivkRdSJkWW6VaR5yQ77Tbeuz5SlaoA/s1600/printfrieddly-button-einbinden-01.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7doq-Gy93BJsCg2Om5j6vImhUrCWDweDCH0SQlsrJXZB2fmez2-2qhZHY7cjrtAg7PU6FMIl8cvA3Zt0XEUTdrHE1jiZJWU9zFgOaHJJ7a36E6ivkRdSJkWW6VaR5yQ77Tbeuz5SlaoA/s640/printfrieddly-button-einbinden-01.jpg" width="640"></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Vorlage>>HTML bearbeiten<br>
<br>
Die Zeile die wir benötigen lautet:<br>
<div class='post-footer'><br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjNk_qpgDluAG9ggiqOIK5F6im1nr_LYAzL_91Z3x6tLsH8pyuj4iePx4WMqnhgBNKAqRwhsuCnftLPR2RpvW2QrevuSiLq3vY6EPEEzSyy6zM9EsDdBGm7PlXbmmwAa3p4ME0N0FSXU/s1600/printfrieddly-button-einbinden-02.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjNk_qpgDluAG9ggiqOIK5F6im1nr_LYAzL_91Z3x6tLsH8pyuj4iePx4WMqnhgBNKAqRwhsuCnftLPR2RpvW2QrevuSiLq3vY6EPEEzSyy6zM9EsDdBGm7PlXbmmwAa3p4ME0N0FSXU/s640/printfrieddly-button-einbinden-02.jpg" width="640"></a></div>
<br>
<br>
Und genau hier drunter wird unser Code eingefügt.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6APfCbOjZ7xiXrpSXqv92P2Was_uh7ZA58j_mfZLPz6ygwEh-nMB7AhtxbJbZSmQNiyE9D-fusK3Z_sh0MfGk5TIxACRxtC-skiKikIXiscsYj_SqqROT3fIXchRafFlI3W6JYxOzupU/s1600/printfrieddly-button-einbinden-03.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6APfCbOjZ7xiXrpSXqv92P2Was_uh7ZA58j_mfZLPz6ygwEh-nMB7AhtxbJbZSmQNiyE9D-fusK3Z_sh0MfGk5TIxACRxtC-skiKikIXiscsYj_SqqROT3fIXchRafFlI3W6JYxOzupU/s640/printfrieddly-button-einbinden-03.jpg" width="640"></a></div>
<br>
<br>Der Button steht da, wo wir ihn haben wollten.<br>
Das könnt Ihr auf meinem Blog sehen.<br>
Allerdings habe ich da einen anderen Button.<br>
<br>
Ein Schönheitsfehler hat das ganze jedoch.<br>
Solltet man von einer Seite, auf der sich mehrere Posts befinden, einen einzelnen Post drucken wollen, so wird trotzdem die ganze Seite gedruckt.<br>
Wenn der Post alleine aufgerufen wird, dann ist das machbar.<br>
<br>
Unter Umständen ist es ratsamer eine PDF zu basteln und diese direkt einzubinden um vom PDF-Reader öffnen zu lassen.<br>
Das muß aber jeder für sich entscheiden.<br><br>
<hr>
<br>
<span style="color: red;">PS</span><br>
Die Meldung Parser-Fehler-Meldung kommt daher, dass wir hier eine XML-Datei haben.<br>
Diese erwartet bestimmte Anweisungen.<br>
In dem Fall ist es das abschließende img-tag, das Ärger macht.<br>
Genauer gesagt fehlt da ein /<br>
<br>
bei<br>
<img src="irgendwas"><br>
fängt der an zu bocken<br>
<br>
schreiben wir<br>
<img src="irgendwas" /><br>
frisst der das. <br>
<br><br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-51855556942101157022015-08-25T16:42:00.000+02:002022-11-06T10:45:41.714+01:00Facebook-Videos einbettenEin Bekannter wollte ei Video in seinem Blog einbauen, klappte aber nicht.<br>
An sich ist das Einbetten leicht gemacht.<br>
<br>
Gehe auf die Seite und klicke auf ``Video einbetten´´, so wie unten sichtbar.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlouTPX62hyXNiI3o6oTCDoIOJbj4F4fxfdEx97syjiLEDbikkugVC_lRy4e66ir25zdVWh8QgJWX_B8dXzCMD-X8yXjmmzNumXzaWUxvCVICfeRwmiOWWq3ZmZJsdvTuliZXOfGVUcgU/s1600/facebook-video-einbetten-01.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlouTPX62hyXNiI3o6oTCDoIOJbj4F4fxfdEx97syjiLEDbikkugVC_lRy4e66ir25zdVWh8QgJWX_B8dXzCMD-X8yXjmmzNumXzaWUxvCVICfeRwmiOWWq3ZmZJsdvTuliZXOfGVUcgU/s640/facebook-video-einbetten-01.jpg" width="640"></a></div>
<br>
Daraufhin öffnet sich ein Fenster und Du kannst den Code kopieren<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1SJA0H08XZXT0AVlMP7tZ8Bktj5kap0bEsqP8UvYXQ8fABMMpdnZvNJdJ3jlP8lqMf_5qfpdGySuN3hOIQWFdPZAqkbnLd0xZKEhZ7WPWbtud6KMSY_HGXqQJh7ujaqlcXde-5vBxVY/s1600/facebook-video-einbetten-02.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1SJA0H08XZXT0AVlMP7tZ8Bktj5kap0bEsqP8UvYXQ8fABMMpdnZvNJdJ3jlP8lqMf_5qfpdGySuN3hOIQWFdPZAqkbnLd0xZKEhZ7WPWbtud6KMSY_HGXqQJh7ujaqlcXde-5vBxVY/s640/facebook-video-einbetten-02.jpg" width="640"></a></div>
<br>
Anschließend gehst Du über HTML und gibst den Code ein.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBlNm0OhSQr8cqGclVw3g2EilwAyW_edSLymrBfWKyYotHQkJhNmAKWK6eHcCbT_XMNtWZs6jeo2j-yqdeEnIOMXZ7uZib72f8ReAzQeItuzHsGFvwU3HrFif8PP8-AIfHnfyyyYDz14/s1600/facebook-video-einbetten-03.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBlNm0OhSQr8cqGclVw3g2EilwAyW_edSLymrBfWKyYotHQkJhNmAKWK6eHcCbT_XMNtWZs6jeo2j-yqdeEnIOMXZ7uZib72f8ReAzQeItuzHsGFvwU3HrFif8PP8-AIfHnfyyyYDz14/s640/facebook-video-einbetten-03.jpg" width="640"></a></div>
Und das Ergebnis sieht dann so aus
<br>
<div id="fb-root">
</div>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><br>
<div class="fb-video" data-allowfullscreen="1" data-href="/wjc.org/videos/vb.130945114804/10153420252724805/?type=1">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/wjc.org/videos/10153420252724805/">
<a href="https://www.facebook.com/wjc.org/videos/10153420252724805/"></a><br>
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<br>
Posted by <a href="https://www.facebook.com/wjc.org">World Jewish Congress</a> on Donnerstag, 25. Juni 2015</blockquote>
</div>
</div>
<br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.comtag:blogger.com,1999:blog-1702672032235346032.post-9079377311166941772015-08-23T19:19:00.000+02:002022-11-06T13:31:08.511+01:00100% Hintergrundbild in Blog einbauenOder: Fullscreen Background Picture. <br>
<br>
Ich habe (um Urheberrechte nicht zu verletzen) einfach ein Foto geschossen.<br>Kein schönes Bild, aber für ein Beispiel sollte es reichen.<br>
Ich werde also folgendes Bild als Hintergrund verwenden.<br>
Meine Maße sind 1920x1080 Pixel.<br>
(<i>Zu den Maßen siehe Vermerk ganz unten bei PS</i>)<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUp2v3tHNbNE6xYrXasO3T0PWS3km8AddLIfrJopA1R_GuTIsKcPvWJYGG1V8isruImfUPM9VNlMQMwOd5dswIzz7a35q-cyuNiLP9QSSigmsZOK_YFbP8qJQKLGuZOsARA-7OA_DU9E/s1600/01-rs-1920x1080.jpg" imageanchor="1"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUp2v3tHNbNE6xYrXasO3T0PWS3km8AddLIfrJopA1R_GuTIsKcPvWJYGG1V8isruImfUPM9VNlMQMwOd5dswIzz7a35q-cyuNiLP9QSSigmsZOK_YFbP8qJQKLGuZOsARA-7OA_DU9E/s640/01-rs-1920x1080.jpg" width="640"></a>
<br>
<br>
Da ich selber auf meinem Blog kein Hintergrundbild möchte, habe ich einen Blog angelegt um es vorzuführen.<br>
Ich habe ein ganz simples "Einfach-Layout" gewählt, der anfangs so aussieht:<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbT37L8xUUVkFx5Vkl_7ugCJno58ipbsxj5BEjoQQd0zs68jyZ1hFANaYQocELmz_ORGXkqcRWe-6gb1Jf_YZ3qEZwSw2PBro8zvOoXz5Tjcqa9RcxVc6IeAqTcvcIZ4yrbDOKCW0rNK0/s1600/02.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbT37L8xUUVkFx5Vkl_7ugCJno58ipbsxj5BEjoQQd0zs68jyZ1hFANaYQocELmz_ORGXkqcRWe-6gb1Jf_YZ3qEZwSw2PBro8zvOoXz5Tjcqa9RcxVc6IeAqTcvcIZ4yrbDOKCW0rNK0/s640/02.jpg" width="640"></a><br>
<br>
Wenn ich den normalen Weg über das Dashboard nehme<br>
Zur Verdeutlichung:<br>
<a href="http://1.bp.blogspot.com/-2VU_XbReYEQ/VdjsSpIO7kI/AAAAAAAAAeo/TORavdElstyle=" margin-left:="" margin-right:=""><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSrWuoz8r7MfajkyiZLNPdItTPBGWEEhyYLczqT9Uuz2FlLzbFFAqGuM5L0MFLeXmp5mHw11LAZr1dMSV1sS5_97GaHmW17w8Z3q16za72YZKKsTxF-O_KJgKQNEc5DvUcD8WiSgsXPE/s640/02-b.jpg" width="640"></a><br>
<br>
Über:<br>
Vorlage>>Anpassen>>Hintergrund>>Hintergrundbild<br>
lande ich hier<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmYnQETo6Snm7OTseemjknOgRQO4DNQ5ihYlYGfgroKFTPRJHYfCunWVq1aSC4yFgYcCU1dLQa58rpA_XI9lMoOXcKJfqkWZgonVrTdRglRCcZNPuTQOcFiO5JwAceaEm6YrOY2yUXCw/s1600/03.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmYnQETo6Snm7OTseemjknOgRQO4DNQ5ihYlYGfgroKFTPRJHYfCunWVq1aSC4yFgYcCU1dLQa58rpA_XI9lMoOXcKJfqkWZgonVrTdRglRCcZNPuTQOcFiO5JwAceaEm6YrOY2yUXCw/s640/03.jpg" width="640"></a><br>
<br>
Dort wähle ch mein Hintergrundbild aus und lade es hoch.<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVKZ78p4k19qDBDAVALGBnRInqQhyphenhyphenRFeJW7PCWcWh6KixgBppb8xjHBTTYZSBEtYTiHzBIFxY26vYnaGvJV7VUoD8dwj25EZRBDhkfvmUpWvoRiIXSQLSyNhGoUbEDmbI5ZZo1II03_4/s1600/04.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVKZ78p4k19qDBDAVALGBnRInqQhyphenhyphenRFeJW7PCWcWh6KixgBppb8xjHBTTYZSBEtYTiHzBIFxY26vYnaGvJV7VUoD8dwj25EZRBDhkfvmUpWvoRiIXSQLSyNhGoUbEDmbI5ZZo1II03_4/s640/04.jpg" width="640"></a><br>
<br>
Das Ergebnis sieht dann so aus:<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqtlqXCsmoBlELLpQPzFWAgAY_2Y6fczqo5cxPk6kiN87fnHYRzUHLainhjoC1z2VY_Y2888d_dX6wGhwwngH4hao-owdgzKNmmCPX2gEIIvpE7ucxXAR6VJ-CAfzDiZzb_rHMP0qT_c/s1600/05.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqtlqXCsmoBlELLpQPzFWAgAY_2Y6fczqo5cxPk6kiN87fnHYRzUHLainhjoC1z2VY_Y2888d_dX6wGhwwngH4hao-owdgzKNmmCPX2gEIIvpE7ucxXAR6VJ-CAfzDiZzb_rHMP0qT_c/s640/05.jpg" width="640"></a><br>
<br>
Und jetzt sieht man schon, dass das ganze nicht so richtig passt.<br>
Wenn wir kleiner zoomen sehen wir es besonders gut.<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWsCcVW2K-DL47rvfshfnT7NkKce5uxLHGhdbnZFdXRmpSMok0udGA0au4AWo-aGklOdp7FzT2ZX8TJFAx2qk7In6v_VJYIwmyQek-8gvsBFIrj8ObTkcRmQYCeBV64-Ow1XaLYyXhHzw/s1600/06.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWsCcVW2K-DL47rvfshfnT7NkKce5uxLHGhdbnZFdXRmpSMok0udGA0au4AWo-aGklOdp7FzT2ZX8TJFAx2qk7In6v_VJYIwmyQek-8gvsBFIrj8ObTkcRmQYCeBV64-Ow1XaLYyXhHzw/s640/06.jpg" width="640"></a>
<br>
<br>
Grauenhaft. Das bild wird gekachelt/wiederholt sich.<br>
Und genau das wollen wir ja nicht.<br>
Deshalb müssen wir mit etwas CSS nachhelfen.<br>
Wir müssen die bereits vorhandene CSS überschreiben und so anpassen, wie wir sie brauchen.<br>
<br>
Dafür haben wir zwei Möglichkeiten:<br>
1. Über unser Dashboard:<br>
Vorlage>>Anpassen>>Erweitert>>CSS hinzufügen<br>
Dann würden wir hier unsere Anweisung eingeben:<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpbu2xiKC8C-BY_2cJVpP-DN9svO_FnDL0JC0P82h0Ei8e5RLQUpQ1LRxJuM4BUzp_YWDL5OPqRd1GSrd7LdhQdteGgUcHyJprFTUlQKYEnVo7Lt1rGIz0_tZwp7yRA0p2_seZFGVtO-4/s1600/07.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpbu2xiKC8C-BY_2cJVpP-DN9svO_FnDL0JC0P82h0Ei8e5RLQUpQ1LRxJuM4BUzp_YWDL5OPqRd1GSrd7LdhQdteGgUcHyJprFTUlQKYEnVo7Lt1rGIz0_tZwp7yRA0p2_seZFGVtO-4/s640/07.jpg" width="640"></a>
<br>
<br>
oder<br>
2. In dem wir direkt in den Code hinein gehen<br>
Vorlage>>HTML bearbeiten <br>
Dann würden wir hier landen:<br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8D3HjIYQnWtrOHDihG9CHNhkX0u53b9pSxVsrCbvYtAN7ZthKvGCa0PAQsoAitI0Yp3gU403D8L5K4quBfIE2bSaMh3DeBlGagHf6_kUPlKWra3zqTkJ_3Twt_eW9oLwF1qPreQ3nVkU/s1600/08.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8D3HjIYQnWtrOHDihG9CHNhkX0u53b9pSxVsrCbvYtAN7ZthKvGCa0PAQsoAitI0Yp3gU403D8L5K4quBfIE2bSaMh3DeBlGagHf6_kUPlKWra3zqTkJ_3Twt_eW9oLwF1qPreQ3nVkU/s640/08.jpg" width="640"></a>
<br>
<br>
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.<br>
<br>
Diese Möglichkeit werde ich zeigen.<br>
Die, die sich nicht an den Quellcode trauen, wählen eben die andere Variante.<br>
<i>Jedoch ist es relativ einfach, so dass Ihr kein Bammel haben müsst.<br>
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 :)</i><br>
<br>
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.<br>
Und da ich Euch nicht tot quatschen möchte, zeige ich jetzt die Anweisung:<br>
<br>
html, body {<br>
background: url(<span style="color: red;">hier kommt der Pfad zum Bild</span>) no-repeat center center fixed;<br>
background-size: cover;<br>
margin: 0;<br>
padding: 0;<br>
width: 100%;<br>
height: 100%;<br>
}<br>
<br>
Bleibt nur die Frage: Wie ist der Pfad zum Bild, welches wir bereits eingefügt haben?<br>
<i>(Gibt nämlich auch andere Möglichkeiten. Lese bitte hierzu </i><i>Vermerk ganz unten bei PS</i><i>)</i><br>
<i><br></i>
Das schnellste und sicherste ist, in den Quellcode zu gehen und den Pfad zu suchen.<br>
Dazu gehen wir so vor wie im bisher letztem Bild:<br>
Vorlage>>HTML bearbeiten<br>
<br>
Dort sehen wir an der Zeile 9 (<i>im original.kann abweichen</i>) einen Pfeil.<br>
Wenn wir darauf klicken öffnet sich weiterer Code.<br>
<br>
Was wir jetzt brauchen ist eine bestimmte Zeile.<br>
Diese fängt so an:<br>
<Variable name="body.background" description="Body Background"<br>
<br>
Wir können sie suchen oder suchen lassen.<br>
Courser ins Fenster klicken und dann Strg+F drücken.<br>
Darauf hin öffnet sich ein Suchfenster.<br>
Dort kopieren wir den Suchegriff hiein und drücken Enter.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjzkwwhNSImTk_ApX2zza97VxoEMCIPsj7tO1uLn48TKxDvwf9YCUbmqSjrW6-6hddgj-6AncVaEYYM6wzruPgO1LgOGWFGOyiDy3lONKorLkCZm6P3frJE1D8Bs-rBJVd1vz-CWtDidc/s1600/08.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjzkwwhNSImTk_ApX2zza97VxoEMCIPsj7tO1uLn48TKxDvwf9YCUbmqSjrW6-6hddgj-6AncVaEYYM6wzruPgO1LgOGWFGOyiDy3lONKorLkCZm6P3frJE1D8Bs-rBJVd1vz-CWtDidc/s640/08.jpg" width="640"></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
</div>
Beim runterscrollen sehen wir dunkel hinterlegter text und unmittelbar darunter unser gesuchter Pfad.<br>
Die Angabe fängt mit url an.<br>
Mein Pfad lautet also:<br>
<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/s0/rs-1920x1080.jpg</span><br>
<br>
Dementsprechend lautet meine CSS:<br>
<br>
/* 100% HINTERGRUNDBILD<br>
----------------------------------------------- */<br>
html, body {<br>
background: <span style="color: lime;"><b>#000</b></span> url(<br>
<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/s0/rs-1920x1080.jpg</span>) no-repeat center center fixed;<br>
background-size: cover;<br>
margin: 0;<br>
padding: 0;<br>
width: 100%;<br>
height: 100%;<br>
}<br>
<br>
Hinzugefügt habe ich lediglich <span style="color: lime;"><b>#000</b></span>, denn ich möchte beim öffnen einen schwarzen Hintergrund laden und nicht das originale orange. Wollt Ihr es nicht,dann weglassen.<br>
Und um es wieder zu finden ein Kommentar eigefügt<br>
<br>
Jetzt brauche ich nur meine CSS-Anweisung in den in den Quellcode hinein zu kopieren.<br>
Wichtig ist,dass wir die bereits vorhandene Anweisung überschreiben.<br>
Das heisst hinter der bereits vorhandenen plazieren.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitLh9I1tb6WvqT0OtZZmlbkNRGrNDN4Dv8vwPDiZcEtkFyBYwAgde0IcXmyaJuqUOfb5lSRCsOax0ZqN1UyHKpZ79_dt1f-0WlcZMRRqb4Vo9mEJa7fGEEYww9Fh8QySbjT3YM2iiA_9w/s1600/10.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitLh9I1tb6WvqT0OtZZmlbkNRGrNDN4Dv8vwPDiZcEtkFyBYwAgde0IcXmyaJuqUOfb5lSRCsOax0ZqN1UyHKpZ79_dt1f-0WlcZMRRqb4Vo9mEJa7fGEEYww9Fh8QySbjT3YM2iiA_9w/s640/10.jpg" width="640"></a></div>
<br>
<br>
<br>
<br>
Hier das Ergebnis<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMZXhyphenhyphenlqx2TeO9YMWTp1MDfhckv-1qK8Zz3p9Z-gMjk9BXJd3q5NDaZnncso00WZCYv33SzCR_aL79ov0xaMsct1Dxtng5qD1xBARwJTV7RbAj2oTipsXkg51NhqlDXx7iq3k8OkdOTTQ/s1600/11.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMZXhyphenhyphenlqx2TeO9YMWTp1MDfhckv-1qK8Zz3p9Z-gMjk9BXJd3q5NDaZnncso00WZCYv33SzCR_aL79ov0xaMsct1Dxtng5qD1xBARwJTV7RbAj2oTipsXkg51NhqlDXx7iq3k8OkdOTTQ/s640/11.jpg" width="640"></a></div>
<br>
<br>
Und wenn wir kleiner zoomen sehen wir<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02_CuMPnkdC99BRJbCek8Hbau6RZYB5wCm4aGnG16h2dIhpzPV3BhtsyndyR_QJU_JO9ak3IbF0f0K3q4upaTqEd3Q77_QlLYv4WPNsflRupMTT9PermM7dTA77jlDH5y0BH7f6KP_zA/s1600/12.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02_CuMPnkdC99BRJbCek8Hbau6RZYB5wCm4aGnG16h2dIhpzPV3BhtsyndyR_QJU_JO9ak3IbF0f0K3q4upaTqEd3Q77_QlLYv4WPNsflRupMTT9PermM7dTA77jlDH5y0BH7f6KP_zA/s640/12.jpg" width="640"></a></div>
<br>
Damit hätten wir unser Ziel erreicht.<br>
<br>
Was man nocht machen könnte, wenn man es mag, ist eine transparenz einbauen, wie auf <a href="http://blogtrottel.blogspot.de/" target="_blank">diesem Blog</a> .<br><br>
<hr>
<span style="color: red;">PS</span><br>
Zur Bildgröße/Auflösung<br>
Leider sind die Zeiten vorbei, wo es nur zwei Bildschirmauflösungen gab.<br>
Das macht das Einbinden eines solchen Hintergrundes etwas kompliziert.<br>
Man kann also nie sagen, welche Bildgröße die optimale ist.<br>
Ein bißchen Schund ist also immer.<br>
Kaum schaust du mal weg, ist schon wieder eine neue Auflösung da.<br>
Besonders bei Mobilgeräten weißt man nie was am Ende dabei raus kommt.<br>
Das solltet Ihr dabei bedenken.<br>
Ich persönlich kann auf solche Sachen gerne verzichten, aber wenn man es mag, warum nicht?<br>
<br>
Zum Bildpfad:<br>
Ihr könnt natürlich ein Bild aus Eurer Sammlug nehmen.<br>
Den Pfad direkt in die CSS kopieren.<br>
Ihr müsst also nicht vorher das Bild hochladen.<br>
Ausserdem könnt Ihr auch einen externen Link nehmen.<br>
Beispielsweise ein Bild, welches Ihr auf einem Server habt.<br>Anonymoushttp://www.blogger.com/profile/04594544181563506982noreply@blogger.com