Buchblogger 1 x 1: HTML Hacks

HTML – oh mein Gott, hat das was mit Technik zu tun? Ja, eine ganze Menge und kann in vielen Fällen ziemlich hilfreich sein. Ich habe öfters schon das Erlebnis gehabt, dass Freundinnen ein Problem hatten, wo eine ganz kleine Prise HTML die einfachste Lösung war. Daher habt keine Angst vor HTML, sondern traut euch an die Thematik ran! Viel kaputt machen könnt ihr i.d.R nicht und wenn man erst einmal die Grundlagen verstanden hat, funktioniert es eigentlich sehr einfach. Und wenn gar nichts mehr hilft, gibt es natürlich immer noch Google. Hier findet ihr ein paar Beispiele für einfache HTML-Anwendungen auf eurem Blog, die euch das Bloggerdasein aber sehr erleichtern können.

Was ist HTML?

HTML steht für Hypertext Markup Language und ist eine sogenannte „textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten“ (s. Wikipedia) Im Grunde heißt das nichts anderes, als dass es eine Programmiersprache ist, die digitalen Medien und Elemente ordnet. Das gesamte Internet basiert also quasi auf der Grundlage von HTML. Diese Sprache kann nämlich zum Beispiel auch die verwendete Sprache aufführen. Für euch ist aber wichtig zu wissen: mit HTML könnt ihr Elemente und Funktionen in eurem Blog einbauen. Ganz wichtig: Mit HTML könnt ihr keine Eigenschaften, wie z.B. dargestellte Farben beeinflussen!

Wo finde ich HTML in WordPress?

Bildschirmfoto 2017-11-21 um 11.33.55

Wer gerade richtig aufgepasst hat, weiß: es basiert alles auf HTML und es gibt einige Bereiche, wo auch ihr Elemente bearbeiten könnt. Da wäre der HTML Bereich in euren Beiträgen und auch Text Widgets lassen sich mit HTML bearbeiten. Im Grunde kann man sich merken: ihr könnt im inhaltlichen HTML-Bereich agieren. Das Template, also das Design euers Blogs und die Struktur könnt ihr nicht anfassen, das liegt beim Entwickler. Ihr könnt also nichts kaputt machen! 🙂

Die Grundlagen – was ist was

Es gibt ein paar Zeichen, die quasi wie Vokabeln funktionieren. Wenn ihr diese Begriffe kennt, könnt ihr die Funktionen im Text und im HTML-Bereich zuordnen, um euch zurecht zu finden. So könnt ihr sicher sein, dass ihr an der richtigen Stelle seid. Der HTML-Bereich sieht nämlich manchmal leider sehr verwirrend auf den ersten Blick aus.

Im Grunde könnt ihr euch merken, dass jeder HTML-Baustein so gekennzeichnet ist:
<Klammer auf Funktion>Text</Klammer schließen>

Am Wichtigsten ist, dass die Klammer immer wieder korrekt aufgemacht und geschlossen wird, damit das HTML auch funktioniert. Und hier ein paar „Vokabeln“:

<a> = Link
<p> = Paragraph. Ein Abschnitt mit u.a. verschiedenen Funktonen und HTML Elemente, der von einem Rahmen umgeben wird. Was für Abstände dieser Rahmen zum Text, bzw. zu den Elementen hält, hängt von eurem Theme ab.
<br> = Break/Absatz
<b> = fett
<u> = unterstrichen
<i> = kursiv
<s> = durchgestrichen
<list> = Listen Element
<h1> = Überschrift. Wird je nach Überschrift von der Zahl her angepasst.
<„target=_blank“> = neuer Tab
<blockquote> = Zitat

Das sind so die wichtigsten „Vokabeln“, die ihr kennen solltet, um euch im HTML-Text zurechtzufinden. Generell könnt ihr hier ja auch nur die Sachen finden, die ihr im Editor selber schreiben könnt. Um herauszufinden, was für ein Element welcher Funktion in eurem Editior zugeordnet ist, probiert ihr es am besten mal in einem leeren Blogpost aus, falls ihr euch unsicher seid. 🙂 WordPress bietet euch aber auch die Möglichkeit im HTML-Bereich schon verschiedene Funktionen vereinfacht einzutragen durch einen Klick in der Menüleiste, ähnlich wie beim normalen Texteditor.

Links in Kommentaren

Habt ihr schon einmal gesehen, dass jemand in einem Kommentar auf einen Beitrag oder seinen Blog verwiesen hat und dann ein ellenlanger Link folgte? Mit HTML könnt ihr den entsprechenden Beitrag oder euren Blog ganz einfach auf einem Wort verlinken. Und das geht so:

Bildschirmfoto 2017-11-21 um 11.38.59

Bei Blogspot funktioniert der Befehl für einen neuen Tab (target) nicht, hier müsst ihr diesen Part also weglassen.

Bilder verlinken

Mittlerweile funktioniert es bei WordPress auch, dass man Bilder im Beitrag anklickt und über die Klammer einen entsprechenden Link einfügt. Sollte das nicht funktionieren, könnt ihr das hier eingeben:

Bildschirmfoto 2017-11-21 um 11.40.33

Den Medienlink könnt ihr ganz einfach ermitteln. Geht in eure Mediendatenbank und wählt das Bild aus, das ihr verlinken möchtet. Geht auf „Bearbeiten“. Unten findet ihr den Link von diesem Bild oder Medium. Über den Button „kopieren“ könnt ihr euch die URL ganz einfach in eure Zwischenablage kopieren.

Schriftgröße

Manchmal ist es hilfreich die Schriftgröße anzupassen, insbesondere bei Teilnahmebedingungen von Gewinnspielen, damit am Ende kein ellenlanger Text den Rahmen sprengt. WordPress hat diese Funktion leider noch nicht. Dank HTML, könnt ihr die Textgröße aber so anpassen:

Bildschirmfoto 2017-11-21 um 11.38.22

Im Beispiel seht ihr eine ganz kleine Schriftgröße, gekennzeichnet durch das „xx-small“. Die Größen funktionieren dabei wie Kleidergrößen, sprich xx-small, x-small, small, medium, large, x-large, xx-large.

Mehrere Seiten

Vielleicht habt ihr es das ein oder andere Mal schon in anderen Buchblogger 1×1 Beiträgen gesehen. Wenn ich finde, der Text wird zu lang, teile ich ihn gerne der Übersicht halber auf mehrere Unterseiten auf. Das könnt ihr ganz einfach im Beitrag regeln und habt in eurem Texteditor trotzdem den Text als Fließtext untereinander. Um einen Seitenumbruch einzufügen müsst ihr nur an der richtigen Stelle Folgendes in den HTML-Bereich einsetzen:

Bildschirmfoto 2017-11-21 um 11.37.22

Dieser Befehl funktioniert wie ein Break, benötigt also keine Klammer, die den Befehl schließt. Leider können aber nicht alle Themes diese Unterseiten funktionabel darstelen.

Buttons

Nicht jedes Theme stellt Buttons dar, aber wenn Themes diese Darstellung unterstützen, könnt ihr damit einfach auf bestimmte Aktionen aufmerksam machen, wie auf das Buch in einer Rezension zu verweisen. Ich nutze dazu Buttons regelmäßig in meinen Rezensionen. Wichtig: Die Farbe passt sich den Theme Vorgaben an und ist nicht bearbeitbar. Die Farbe entspricht i.d.R. der Hauptfarbe, in der auch Links bei euch hervorgehoben sind. Und das müsst ihr im HTML-Bereich eingeben

Bildschirmfoto 2017-11-21 um 11.35.24

Danach wird der Button wie normaler verlinkter Text im Bearbeitungsmodus angezeigt. Wenn ihr auf Vorschau geht, sollte aber der Button zu sehen sein.

Bildschirmfoto 2017-11-21 um 11.36.46

Bildschirmfoto 2017-11-21 um 11.36.54

YouTube Videos & Amazon Vorschau einbetten

Normalerweise bietet WordPress euch die Möglichkeit, dass das Video dargestellt wird, wenn ihr im Text-Bereich einfach den Link einfügt. Sollte das nicht funktionieren geht auf YouTube auf den Teilen-Tab unter dem entsprechenden Video. Unten habt ihr einen weiteren Reiter, der „Einbetten“ heißt. Dort findet ihr einen Text, der mit iframe beginnt. Kopiert diesen Text einfach in euren HTML-Bereich an der richtigen Stelle ein – fertig! Aber nicht wundern, denn in eurem Text Bereich erscheint nur der Link. Das Video wird dann im fertigen Beitrag angezeigt.

Über Amazon habt ihr die Möglichkeit eine Vorschau von E-Books direkt mit Leseprobe einzubetten. Wenn ihr auf der Kindle-Seite des Buches seid, erscheint rechts unter dem Kaufenfeld „Einbetten“. Auch hier könnt ihr euch einen Code kopieren (belasst es einfach bei Link (URL) abrufen. Die Funktion HTML einbetten funktioniert bei WordPress nicht immer), den ihr anschließend einfach im HTML-Bereich einfügt. Ich kann euch nur empfehlen, dass ihr das Einbetten dieser Sachen erst zum Schluss eures Beitrags erledigt, da sich manchmal Texte dadurch verschieben oder auf mysteriöse Weise verschwinden…

Absätze und Formatierungen entfernen, die ihr nicht haben wollte

Es gibt von vorne herein die Möglichkeit, euren Text unformatiert einzufügen. Aktiviert dazu das Klemmbrett mit dem kleinen T in eurer Werkzeugleiste in Beiträgen. Habt ihr dieses T noch nicht, dann klickt einmal auf die drei Punkte rechts am Ende der Leiste. Ein weitere Trick, um Formatierungen zu entfernen ist das Radiergummie. Auch mit HTML habt ihr die Möglichkeit, ungewollte Formatierungen und Absätze zu entfernen. Jede Aktion hinterlässt so eine Art Fußspur im HTML Bereich. Auch wenn ihr es manchmal im Text nicht seht, erfolgt eigentlich immer eine Verzeichnung eurer Aktion im HTML Bereich. Ein Klassiker ist hier ein Absatz oder wenn ihr eine Überschrift von einer anderen Seite kopiert und sie sich einfach nicht verkleinern will. Schaut daher im HTML-Bereich, ob Zeichen davor stehen, die dort nicht hingehören oder es überflüssige andere Zeichen gibt. Wenn ihr diese gelöscht habt, sollte es i.d.R. funktionieren. Achtet beim Löschen aber bitte darauf, dass keine Klammer kaputt geht, ansonsten habt ihr direkt das nächste Problem.

Was tun, wenn etwas nicht funktioniert?

WordPress ist eigentlich ziemlich kollant und erkennt kleiner HTML-Fehler und verbessert sie selbstständig. Sollte trotzdem mal etwas nicht funktionieren, schaut als erstes, ob wirklich ALLES im Code richtig ist. Ein Leerzeichen zu viel, ein Komma an der falschen Stelle, die Klammer ist nicht zu…meistens hapert es an solch kleinen Dingen. Sollte der Code komplett richtig sein, unterstützt euer Theme diese Darstellung vermutlich leider nicht. Das gilt vor allem für mehrere Seiten und Buttons.

Tipps für Grundlagen und weitere Lektüre

Wenn euch das Thema interessiert, schaut auf jeden Fall mal bei der W3school vorbei. Hier findet ihr einige erläuternde Grundlagen aber auch viele Anwendungsbeispiele, die euch weiterhelfen.

Wenn ihr jetzt so einen erhellenden Moment hatte wie: „Das ist ja wie Magie“ – dann hat es wohl bei euch funktioniert. 😀 Wenn nicht: lasst euch nicht entmutigen und probiert euch weiter aus. Wie gesagt: wirklich kaputt machen könnt ihr nichts und wenn ihr euch unsicher seid, googlet doch einmal nach der Lösung des Problems. Dieser Text hat mich doch mehr Nerven, Schweiß und Tränen gekostet als erwartet, da es schwierig war, die Informationen so zu verdichten und einfach wiederzugeben, dass ich euch alles Wichtige mitgeben kann. Ich bete jetzt einfach mal dafür, dass nicht nur Fragezeichen bei euch geblieben sind. Wenn ihr noch Fragen oder Anmerkungen habt, gerne in die Kommentare damit. Beim nächsten Mal geht es um nützliche Apps, die euch vor allem unterwegs helfen können zu bloggen.

Das könnte dich auch interessieren:
Die Qual der Wahl – Blogger, WordPress oder doch YouTube? 
Tipps & Tricks für dein Blogdesign
Rechtliches Know-how
Wie bekomme ich Leser?
Blogger Vocabulary – Diese Begriffe solltest du kennen
SEO?! Was es ist und wozu man es braucht
Wichtige Plattformen für Blogger
Gängige Buchblogger Formate
Instagram Hacks
Tipps für erfolgreiche YouTube Videos
Überblick buchiger Veranstaltungen
Must haves. Visitenkarten und Redaktionsplan
How to Messetermine anfragen
Das Media Kit – was es ist und wie man sich eins erstellt

Eure

unterschrift

 

13 Gedanken zu “Buchblogger 1 x 1: HTML Hacks

  1. Ob du mit dieser Freundin im ersten Absatz wohl (auch) mich meinst? Hihi.

    Das mit der Textgröße teste ich mal eben. Vor allem bei so Gewinnspielbedingungen muss das kein normal großer Text sein und kleiner als „Absatz“ geht ja bei den Einstellungen irgendwie nicht.

    Danke auch für den Tipp mit der nächsten Seite. Mega praktisch.

    Kannst du das mit dem Button noch mal näer erklären? Eventuell mit Screenshot? Ich weiß so nicht was du meinst. Was steht auf dem Button? Was hat er für eine Funktion? Ist da ein Link hinterlegt?

    Hast du auch eine Erklärung dafür, wie man Absätze einklappen könnte, zB einen Spoiler oder Klappentext? Sodass man einen Pfeil klicken muss, damit es auf geht? Das wäre cool.

    Liebe Grüße und danke für den Beitrag!!

    Gefällt 1 Person

    1. Vielleicht. 😀
      Danke. 🙂 Das mit dem Button ergänze ich später gerne nochmal. Für das einklappen habe ich leider noch keine gute Lösung gefunden, was mit HTML umsetzbar wäre. Dafür finde ich nur JavaScript Lösungen und das nimmt der HTML-Bereich nicht so einfach. Sobald ich da was gutes gefunden habe, ergänze ich es noch in der Liste und sage dir Bescheid. 🙂
      Liebste Grüße Michi ❤

      Gefällt 1 Person

  2. Super Einführung ins Thema. Ich kann auch nur sagen: Traut euch ran an die Codes! Einfach ausprobieren. Und die W3School ist ganz großartig, um alles zu lernen. Man muss nur dem englischen mächtig sein, aber das ist grundsätzlich hilfreich beim Programmieren.

    Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s