Samstag, 20. Februar 2016

HTML-Tutorial | Posttitel unterstreichen ❤

Hallo meine Liebsten, heute kommt mal eine ganz andere Art von Post, und zwar ein HTML-Tutorial! Vielleicht habt ihr gemerkt, dass ich auf meinem Blog immer wieder ein paar Kleinigkeiten verändere, und da arbeite ich oft mit HTML. Zum Beispiel habe ich so mein Menü über dem Header gemacht, habe Posttitel und Sidebartitel zentriert, und und und... Vor zwei Tagen habe ich dann nach tagelangem Suchen eine Möglichkeit gefunden, meinen Posttitel zu unterstreichen, und genau das möchte ich euch heute mal erklären!
Das ganze geht ziemlich schnell und einfach, und man braucht dazu so gut wie keine HTML-Kenntnisse!
Kleine Info: Im HTML kann man mit Strg + F auf die Suchenfunktion gelangen.

Bevor ihr Anfangt macht bitte immer ein Backup von eurem aktuellen Blogdesign, wenn etwas schief geht ist sonst am Ende vielleicht alles weg.


Zuerst müsst ihr im HTML nach h3 suchen. (Das erste Suchergebnis ist nicht das richtige, deswegen müsst ihr ein paar mal auf die Eingabe Pfeiltaste drücken, bis ihr es findet.)




Jetzt sollte euch so in etwa das Grau markierte angezeigt werden ( Achtung! Variiert je nach Vorlage)


Unter der Grau markierten Zeile vom oberen Bild, fügt ihr jetzt folgenden Code ein:  border-bottom: 1px solid #000000



1px         :  Das ist die Dicke der Linie, diese könnt ihr beliebig ändern.
solid       Solid zeigt an wie euer Unterstrich aussieht, solid steht für einen normalen Strich, aber ihr könnt auch dotted (gepunktet) oder dashed (gestrichelt) verwenden.
#000000 :  Das hier ist die Linien Farbe als Hexacode, #000000 steht für schwarz aber auch das könnt ihr ändern wie ihr wollt.

Wenn ihr das ganze passend eingefügt habt, sollte es so aussehen:

Jetzt müsst ihr alles speichern und Tadaaaaa!
Ich hoffe euch hilft das Tutorial und wenn es euch gefällt, kann ich so etwas ja öfters machen.

Habt noch ein schönes Wochenende

9 Kommentare
  1. Danke für dieses Tutorial! Ich musste h3 bei mir manuell suchen, da die Suchmaschine es nicht gefunden hat. Hab es allerdinggs schnell gefunden und das Tutortial gleich umgesetzt. Klappt super, dankeschön ♥
    Würde mich über mehr solcher Posts freuen!

    Alles Liebe, Anne♥
    www.shopaholiccsdreamworld.blogspot.de

    AntwortenLöschen
    Antworten
    1. Solange es trotzdem geklappt hat, ist ja alles gut ;)
      Ich finde der unterstrichene Titel sieht auf deinem Blog so schön aus!

      Löschen
  2. Tolle Postidee, liebe Lea!
    Solche HTML-Tipps finde ich immer besonders spannend, weil ich auch gerne mal an meinem Design rumdoktore und Tipps dann gut gebrauchen kann :)
    Mit meiner veganen Zeit bin ich tatsächlich noch gar nicht durch, momentan bin ich in Woche 3 von 60 Tagen, habe also ein knappes Drittel erst rum. Spannend bleibts :)

    Liebe Grüße
    Caro

    AntwortenLöschen
  3. Sehr gutes Tutorial:) Habs auch gleich mal ausprobiert, da ich das sehr schön finde:) Jedoch ging das bei mir nicht, denke mal das liegt daran weil ich schon so ein vorgefertigtest Layout habe, da kann man ja meist nicht so viel ändern.
    liebe Grüße, Lea♥

    http://xxleasworldxx.blogspot.de/

    AntwortenLöschen
  4. danke für dieses tolle und leicht verständliche tutorial! nach einigem probieren habe ich es auch hinbekommen. Ich habe mich schon immer gefragt, wie so was geht! :)
    liebe grüße, gabi <3

    AntwortenLöschen
  5. Sehr schöne Postidee!
    Mich würden weitere ähnliche Posts auf jeden Fall interessieren!
    Alles Liebe, Jacqueline.
    http://dietagtraeumerin.blogspot.de/

    AntwortenLöschen
  6. ich mag dein blogdesign total und die postidee finde ich auch sehr gut, da ich selber gerne verschiedene html-codes ausprobiere :)
    alles liebe, magdalena

    http://openthecageandflyaway.blogspot.de/

    AntwortenLöschen
  7. Danke für das Tutorial! Ich bastele im Moment etwas an meinem Design herum und dass werde ich auch mal ausprobieren (;
    Ich würde mich über mehr Posts dieser Art freuen.

    XOXO Ally von allyshiny.blogspot.de ❤️

    AntwortenLöschen
  8. Solche Tutorials erinnern mich immer daran, wie ungern ich doch Coding mag... Solche Sachen kriege ich zwar auch mit meinen schlechten (und ungeduldigen!) Kenntnissen selbst hin, aber ich bin schon sehr froh mittlerweile danke professioneller Unterstützung bei Wordpress zu sein und mir über so was nicht mehr wirklich Gedanken machen zu müssen. ;)

    AntwortenLöschen

Ich freue mich über jeden eurer süßen Kommentare, und auch über Kritik und Verbesserungsvorlschläge, jedoch muss ich Beleidigungen oder anders entfernen❃