Tutorial: Blog-Hintergrund einpflegen

Zugegeben: Wenn ich Zeit und Muße habe, bastele ich gerne an meinem Blog herum. Immer wieder geholfen haben mir dabei Tutorials, kleine Anleitungen zu diesem oder jenem Problem, die man überall im Internet finden und lesen kann. Feine Sache, das. Aus diesem Grund möchte ich heute selber einmal ein Tutorial schreiben. Es soll dabei um Hintergründe gehen, also um Backgrounds für meinen Blog. Oder um die Frage – vulgär formuliert – wie bekomme ich Farbe auf meine Digitaltapete?

Schritt 1: Einen Hintergrund suchen oder selber malen. Die Datei sollte ein gängiges Grafikformat sein, zum Beispiel .jpg. Achtet darauf, dass das Bild groß genug ist. 1024 x 800 Pixel sollten es schon sein. Außerdem ist es wichtig, dass Ihr mit der Verwendung des Bildes keine Urheberrechte verletzt. Hintergründe für Blogs findet Ihr zum Beispiel hier.

Schritt 2: Euer Bild muss irgendwo im Internet gespeichert und zugänglich sein. Das geht zum Beispiel auf Photobucket.com. Ich verwende aber lieber tinypic.com. Das ist schnell und unkompliziert. Einfach Datei auswählen (Dateityp: Bild) und auf den grünen Button Jetzt hochladen! klicken. Der Upload dauert dann einen kleinen Augenblick. Danach bekommt Ihr vier Möglichkeiten, um auf das Bild zugreifen und es nutzen zu können. Um es als Hintergrund in einem Blog zu verwenden, ist nur der letzte Link von Bedeutung: Direkter Link für Layouts. Der könnte zum Beispiel so aussehen: http://i47.tinypic.com/2jaaryo.jpg. Markiert die Zeile und kopiert sie (Strg+C). Wir werden sie bald wieder brauchen.

Schritt 3: Jetzt aber zum Blog. Logt Euch auf blogger.com ein und wählt den Blog aus, den Ihr bearbeitet möchtet. Geht dort auf Layout und weiter auf Seitenelemente. Ihr solltet jetzt die Möglichkeit haben, per Drag&Drop die Seitenelemente Eures Blogs anordnen zu können. Wählt hier Gadget hinzufügen. Dort wählt Ihr das Gadget HTML/JavaScript und fügt es hinzu.

Schritt 4: Öffnet nun das Gadget HTML/JavaScript. Unter Content solltet Ihr dort nun eine freie, weiße Fläche sehen, wie bei einem Text-Editor. Fügt dort folgenden Code ein:

<style type="text/css">body {background-image: url("DIREKTLINK"); background-position: top; background-repeat: no-repeat; background-attachment: fixed; }</style>

An der Stelle, wo hier das Wort DIREKTLINK steht, fügt Ihr anschließend den Link zu Eurem Hintergrundbild ein, den wir zuvor generiert haben (Strg+V). Der Code könnte dann so aussehen:

<style type="text/css">body {background-image: url("http://i47.tinypic.com/2jaaryo.jpg"); background-position: top; background-repeat: no-repeat; background-attachment: fixed; }</style>

Klickt anschließend auf Speichern.

Schritt 5: Um zu überprüfen, ob alles funktioniert hat, klickt auf Blog anzeigen. Ihr solltet jetzt das ausgewählte Bild als feststehenden Hintergrund hinter Eurem Blog sehen. Wenn Euch der Hintergrund nicht gefällt, einfach noch mal probieren! Viel Spaß dabei!