Blogger 101 // Understand your HTML // HTML verstehen

Wer wie ich noch relativ neu im Bloggergeschäft ist, für den sind HTML-Codes wohl chinesische Schriftzeichen. Doch wer sein Layout ändern möchte oder ein paar extra Gadgets in sein Blog integrieren möchte, der sollte wenigsten die Grundbegriffe des HTML kennen.



Vorab, mein vorheriges Layout habe ich blöderweise geschrotet, da ich mein HTML unwiederruflich verändert hatte. Also meine Lieben, bevor ihr was an eurem Layout-HTML ändert, bitte unbedingt ein Backup machen. "Vorlagen" -> rechts oben "Backup/Wiederherstellung" -> "Vollständige Vorlage herunterladen". Wenn ihr dies getan habt, ist die akutelle Vorlage herunterladen und kann notfalls wieder aufgespielt werden.

1.  Leerzeichen zwischen zwei Elemente
Wenn ihr Bilder hochladet ist es oft so, dass Sie direkt hintereinander gereiht erscheinen, um dies zu verhindern setzt ihr im HTML-Code &NBSP. Dadurch wird ein Leerzeichen zwischen Wörter, Bilder oder sonstige Elemente erzeugt. Wenn ihr &NBSP&NBSP doppelt hintereinanderreiht, wird ein Doppelleerschritt erstellt.

&NBSP

2. Zeilenumbruch einfügen
Wenn die Enter-Taste kein Erfolg zeigt, fügt im HTML den Code <br /> ein. Dieser erzeugt ein Zeilenumbruch an jeder beliebigen Stelle. Für mehrere Umbrüche einfach mehrere <br /> hintereinanderreihen.

<br />

3. Wörter FETT oder kursiv setzen
 Um Wörter in Widges oder Posts fett zu schreiben, fügt vor dem Wort <b> ein und hinter dem Wort </b>.
Dieser Schrägstrich ist sehr wichtig, da sonst der komplette Text fett geschrieben wird. Er ist eine Art Begrenzung für Befehle im HTML. Weitere Befehlen wären noch:

Beispiel <i> Beispiel </i>
Beispiel <strike> Beispiel </strike>
Beispiel <u> Beispiel </u>

4. Links einfügen
Dieser Befehl gilt nicht nur für den eigenen Blog, sondern auch für Kommentare die man auf anderen Posts hinterlässt. Mit diesem Code ist es für andere viel einfacher auf dein Blog zu gelangen, da man einfach nur auf den Link klicken und nicht die URL markieren und dann in die Befehlszeile einfügen muss.

<a href="URL">DEIN TEXT</a>

5. NoFollow-Links setzen
Zuerst einmal, was heißt NoFollow und DoFollow? Grundlegend hat es dem Googleranking zu tun. Je mehr DoFollow Links von einem selbst auf anderen Websites verankert sind, desto höher kommt man in den Suchmaschinenergebnissen weiter nach oben. Viele Firmen bezahlen sogar Geld, damit eine Website bzw. Blog seinen Link DoFollow verlinkt.

<a href=”URL” rel=”nofollow”>DEIN TEXT</a>

6. Bilder manuell einfügen
Wie auch beim vorangegagenen Tipp, kann man auch diesen in Kommentare einfügen. Dadurch werden Bilder von einer bestimmten Bild-URL angezeigt

Einfaches Bild einfügen   <img src=”Bild-URL”>

Bild mit Link einfügen    <a href=”URL”><img src=”Bild-URL”></a>

7. Größe der Bilder manuell verändern
Natürlich ist die einfachste Methode seine Bilder zu vergrößern, bzw. zu verkleinern die durch Blogger vorgegeben Werte wie klein, große oder x-large zu verwenden. Doch um seine Bilder auf die gewünschte Größe zu bringen, kann man manuell im HTML die Größe (in Pixel) ändern. Sucht dafür einfach folge Positionen:

height="xxx" und width="xxx"

8. Grundbegriffe des Layoutaufbaus
Der Blog ist im Grunde, in verschiedene Bereiche aufgeteilt. Standardmäßig ist er wie folgt aufgebaut:

hier eine richtig gute Seite, mit Tutorial und sogar Beispielen, an denen man selbst testen kann: W3Schools



9. Linien unter Überschriften oder als Trennlinien
Um den Blog ein wenig zu gliedern und übersichtlicher zu gestalten, werden oft Trennlinien verwendet. Zudem lässt ein feiner Strich, über oder unter eine Überschrift, das Gesamtbild schicker und aufgeräumter wirken. Dabei ist zu beachten das eurer Blogname meist die Überschrift <h1> ist, Sidebarüberschriften <h2> und Posttitle <h3>.
Öffent das HTML eures Blogs, sucht da zum Beispiel .post h3 und fügt darunter folgendes ein

unter der Überschrift:  border-bottom: 1px solid #000000; 

über der Überschrift:   border-top: 1px solid #000000;

"1 px" gibt die Stärke der Linie an
"solid" erzeugt eine durchgezogene einfache Linie,
"dotted" eine gepunktete,
"double" eine doppelte durchgezogenen,
"dashed" eine gestrichelte,
dann noch "groove", "ridge", "inset" und outset.
#000000 ist der Farbcode für schwarz



10. Nutzt das Entwickler-Werkzeug von Mozilla
Ich kann euch gar nicht sagen, wie oft ich dadurch schon mein Layout geändert habe. Wenn ihr dieses Werkzeug benutzt, seht ihr in Echtzeit wie die vorgenommen Änderungen aussehen und das Beste daran ist, die Änderungen verschwinden einfach wieder, wenn man die Seite aktualisiert.
Wenn ihr Mozilla verwendet, Rechtsklick auf das zu ändernde Element, z.B. die Überschrift unter der Ihr die Linie setzen wollt. Rechts erscheint dann