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
Da habe ich beim Lesen auch noch was gelernt. Mit HTML habe ich ich vor ein paar Monaten auch etwas intensiver beschäftigt, um beispielsweise meine Datumsfähnchen hinzubekommen. War anfangs etwas knifflig, aber ich mag sie immer noch sehr gern und werde mal ein paar deiner Tipps ausprobieren!
AntwortenLöschenSehr hilfreicher Post ! Hatte vorher gar keine Ahnung von html, jetzt hab ich sogar noch was gelernt :)
AntwortenLöschenDanke für den guten Post !
Allerliebste grüße , Lisa
Schöne Beschreibung !
AntwortenLöschenGut gemacht Nicole!
Schöne Beschreibung. Ich hoffe vielen hilft es!
AntwortenLöschenSuper Anleitung für Anfänger! Aber ein kleiner Fehlerteufel hat sich eingeschlichen und zwar heißt es korrekterweise , also das ; fehlt noch. :)
AntwortenLöschenGreat blog♥
AntwortenLöschenHow about follow each other?
I follow your blog. Waiting for you♥
My Blog: http://juliemcqueen.blogspot.com
Html ist schon eine Klasse für sich.. Ich kann nur mit einem großen Berg Süßikeiten am HTML arbeiten. Aber jetzt wird auch mir einigees ersichtlicher. Habe schon länger auf solch einen Pos gewartet!
AntwortenLöschenbunte Grüße für dich!,
Jule von www.feuer-fangen.blogspot.de
such a useful post!
AntwortenLöschenNameless Fashion Blog
So lovely post! Love your style
AntwortenLöschenMaster-class in brand new Kiev restaurant:
http://starlingdays.blogspot.com/2014/11/blog-post_13.html
great post!!
AntwortenLöschenVisit my blog YOKO NGUYEN BLOG
that looks awesome! ♥ hopefully we can follow each other, and let me know if you did. So I can follow you back too. Much love! ♥♥♥
AntwortenLöschenhttp://sartorialwackoe.blogspot.com/
so nice blog dear!
AntwortenLöschenSerena’s Closet
Those are actually really useful tips. Thanks for stopping by my blog. Sure I'd like to follow each other. Now following you via GFC, Bloglovin and Google+. I'd be happy to see you follow back! x
AntwortenLöschenFASHIONISTA LOOKS
MY LATEST POST
Facebook
Instagram
bloglovin
Twitter
Youtube
thank you so much dear! followed you back both on GFC and Bloglovin.. :D
AntwortenLöschenhttp://sartorialwackoe.blogspot.com/
Richtig toller Artikel, super hilfreich
AntwortenLöschenwww.thefashionfraction.com
Thanks for sharing great tips
AntwortenLöschenCandice | Beauty Candy Loves
xoxo
Super blog! :) Thanks for follow my blog :) I follow you too! <3
AntwortenLöschenToll erklärt aber was dofollow und nofollow is check ich nich aber sonst top, danke:)
AntwortenLöschenDer letzte Tipp mit Mozilla ist ja mal richtig toll, danke :)
AntwortenLöschenHi there, nice tips =)
AntwortenLöschenThank you for your comment on my blog. I follow you now on GFC and Bloglovin..would you mine to follow me to? And to like my facebook page, please? ^_^ Thank you
Have a sweet day,
Michael
www.ontheleaf.net / facebook / Bloglovin
Hello lovely, great post and thanks for sharing! <3
AntwortenLöschenI'm your newest follower, please follow me back if you can? :)
http://electricsunrise.blogspot.co.uk
x
Toller Post, das hilft sicher einigen weiter :)
AntwortenLöschenvery good and useful post :)
AntwortenLöschenI am your new follower on bloglovin :)
Hello beautiful! Thank you very much for visiting my blog. I liked your post, it is very useful and interesting! I follow via GFC :) Kisses!
AntwortenLöschenwww.onlydacostaa.com
Just as an FYI, I follow you on GFC. Thanks for the visit and comment!
AntwortenLöschenKreyola Jounerys | Instagram
Great post! This was really really helpful, I feel I understand html a bit more. You have a lovely blog, I would love to follow each other. I already followed you on g+, gfc and bloglovin. Checkout my blog and if you like it follow me back. Let's keep in touch! :D
AntwortenLöschenhttp://perlasancheza.blogspot.com/
really useful <3
AntwortenLöschenEea
www.eeapetrescu.com
You're right, It's so helpful to make a backup!
AntwortenLöschenxoxo,
http://petitemaisonoffashion.blogspot.com/ ♥
Thanks for stopping by. Followed you on GFC, Bloglovin & Google+!
AntwortenLöschenPlease follow me back on GFC & keep in touch!
X
http://subhamrai.blogspot.in/
Thank you for visiting my blog lovely ��. Love your posts x x x
AntwortenLöschenwww.nadjetluisa.blogspot.co.uk
Hi Colli! Thanks for visiting my blog! Your blog's layout is absolutely lovely! HTML is definitely an important thing to know as a blogger. I must admit I haven't really worked with HTML for a while, and you've convinced me to start learning it again!
AntwortenLöschenI followed you on GFC and Bloglovin'. If you'd like to return the favor, that would be appreciated!
manicpixiegirl
Great tips.
AntwortenLöschen<a href="http://www.kindoflovely.com”>www.kindoflovely.com || AUS Fashion/Lifestyle</a>
Hey girl!
AntwortenLöschenThanks for your comment on my blog!
I would love to follow each other on GFC!
I'm following & waiting for you!
Kisses,
http://fashionscrown.blogspot.gr/
Wow this is really nice an helpful post! Great tips! Thanks for sharing!
AntwortenLöschenxx
cvetybaby.com
Bloglovin
Instagram
Thank you for your comment! ;)
AntwortenLöschenI follow you! :)
Isa M., Tic Tac Living
Great tips!
AntwortenLöschenwww.thefashionpanda.be
www.thefashionpanda.be
Great tips !! Enjoyed this blog post !! Thank you so much for your very wonderful comment on my blog !! Followed you on GFC !! Hoping for your Followback ! :)
AntwortenLöschenxo
Molly
corinnemolly.blogspot.com
Hi I loved your blog I will follow him if you want to follow my also be very happy Blogdabarbiegirll.blogspot.com
AntwortenLöschenFantastischer Post!
AntwortenLöschenOhne sowas wäre ich echt aufgeschmissen haha :D :)
Liebe Grüße
Luise ♥
http://my-little-beauty-secrets.blogspot.de/
Great tips, Nicole! T. http://tickledpinkwoman.blogspot.com
AntwortenLöschenGreat !!
AntwortenLöschenmodomixx.blogspot.com
I learned HTML a while back it's kind of fun :D
AntwortenLöschenThanks for stopping by my blog :)
Following you
Neal Kind
Daily Diaries
Hiya,
AntwortenLöschenThanks for following me and Ive now followed you back. I'm your #362 follower.
vivianista.com
thank you so much for visiting my blog i really appreciate your comment
AntwortenLöscheni followed you already follow back http://vaxanatheonly1.blogspot.com
Great post!
AntwortenLöschenThank you for your lovely comment on my blog and thank you for following me! I'm following you too!
xx
www.theblackblush.blogspot.pt
очень интересно и полезно)))
AntwortenLöschenthank you
gladly signed up, waiting to visit
http://mosaictrends.blogspot.com/
Korrekterweise bräuchte das & nbsp noch ein ; am Ende.
AntwortenLöschenAber ansonsten wirklich hilfreiche Tipps für HTML-Einsteiger denke ich.
LG
Pingu