♥ HTML-Tutorials ♥

Meine Lieben, da ich gerne helfe und selbst mein Wissen teilen möchte, verlinke ich euch hier meine liebsten Tutorials. Falls Fragen bestehen, schreibt sie mir in die Kommentare, vielleicht kann ich euch dabei helfen. ♥
Viel Spaß damit und verlinkt doch mal euren Blog, wenn ihr etwas benutzt habt. Ich bin doch immer so neugierig. (;

Vorerst gebe ich euch noch einen Tipp: Erstellt einen Testblog, da könnt ihr die Sachen ausprobieren und macht nichts an eurem Blog kaputt. (:
Da es hier viele verschiedene Änderungen gibt, habe ich hier eine kleine Liste für euch. Klickt auf den Link und los gehts:

1. Rand und Schatten bei Bildern entfernen
2. Cookies Box gestalten
3. Drop Down Menü / Ausklappmenü
4. Suchenfeld für Drop Down Menü
5. Mittiges Menü
6. Einzelne Zeilen in einer anderen Schrift
7. Weiterlesen / Read More Button
8. Nach Oben Button
9. Datum verändern
10. Kommentare anzeigen und evtl. umbenennen
11. Infos bei Rezi im Kasten
12. Ältere und Neue Posts verändern
13. Titel individuell gestalten
14. Anker bzw. Sprungfelder
15. Kommentare neu gestalten
16. Anfangsbuchstabe im Post-Titel ändern
17. Post-Trenner einfügen



Rand und Schatten bei Bildern entfernen.
Wenn ihr runde Bilder posten wollt, die keinen weißen Rand haben sollen und einfach transparent sein sollen, zeigt euch CopyPasteLove, wie ihr die wegbekommt!
(Kleiner Tipp: Bilder im PNG-Format speichern, wenn ihr sie transparent wollt!)


Cookies Hinweis ändern
Wenn ihr das Fenster nicht mehr grau und oben haben wollt, schaut bei der wundervollen Jana von Lichtkonfetti vorbei!
     Den Text verändern könnt ihr mit Hilfe von Super-Oliver (5202), der ein klasse Tutorial dafür hat.
Zeigt mir doch mal eure tollen, neuen Fenster und verlinkt eure Blogs in den Kommentaren. (:

Hierbei übrigens mein ♥liches Dankeschön an Sarah von Pergamentfalter! Nur dank ihr habe ich dieses Tutorial gefunden!

Drop Down Menü

Das Drop-Down Menü ist von Misses Cherry.


Was ist das denn? Übersetzt wäre es ein Aufklapp-Menü und ihr seht alle Unterseiten auf dem Bild. Ich habe allerdings noch die Richtung geändert. Bei mir öffnet es sich nach links und nicht nach rechts. (:
Es ist super erklärt und alles perfekt beschrieben, sodass ihr die Farben ziemlich leicht anpassen könnt.


Suchenfeld in Menü
Seht ihr dieses Suchen-Feld in meinem Drop Down Menü? Ich habe einfach die Social Media Buttons rausgenommen und stattdessen das eingefügt, was CopyPasteLove hier beschrieben hat. (:



Zentriertes Menü - Seiten.

Mein zweites Menü habe ich ganz Normal mit dem Seiten-Gadget erstellt. Zentriert habe ich es mit 5202s (Oliver) Hilfe.
Das gebt ihr einfach in euer HTML ein. Ich habe vorher noch das hier eingefügt:


/* MITTIGES MENÜ
=================*/

Sinn der Sache ist, dass ihr es später ziemlich einfach wieder finden könnt oder eure Codes kommentieren könnt. Wenn ihr STRG + F drückt, öffnet sich eine Leiste, in der ihr dann Menü oder so eingeben könnt und dann kommt ihr direkt zum Code. Die /* und ==*/ sind dazu da, dass es unsichtbar ist und nicht auf eurem Blog ungewollt erscheint und das Wicchtigste: Es wird nicht als HTML-Code erkannt! So verändert ihr nichts!


Einzelne Zeilen in einer anderen Schrift.

Wie ihr in den Einzelüberschriften seht, habe ich für einzelne Zeilen eine bestimmte Schriftart. Ich kann allerdings auch diese hier benutzen.
Wie ihr das bei euch auch machen könnt, seht ihr auf dieser Workshop Seite.

Leider wird da nicht erklärt, wie ihr die Schrift jetzt in euren Posts verwenden könnt. Das geht ganz einfach. Ihr wechselt auf die HTML Ansicht und kopiert diesen Code einfach da rein, wo ihr die Schrift haben wollt:


<span style="font-family: 'Coming Soon'; font-size: 30px; line-height: 90%;">EUER TEXT</span>


    Coming Soon ist die Schriftart, die ihr in Part 1 ausgewählt habt. Ihr gebt einfach den Namen ein und fertig. Ich habe alternativ noch Handlee zur Auswahl, das würde ich auch genauso eingeben.
    30px zeigen die Schriftgröße an. Da könnt ihr einfach rumprobieren und mit den Zahlen spielen. (:
    90% braucht ihr, um die Zeilenabstände zu regeln. Die Schriftarten sind meistens sehr groß und halten dann auch riesigen Abstand. Den verringert ihr damit. (:
Und schließlich EUER TEXT. Da gebt ihr einfach den Text ein, den ihr in der tollen Schrift haben wollt.



Read More Button.

Habt ihr schonmal die Jump Breaks ausprobiert? Das ist das Zeichen oben mit dem gebrochenen Blatt. Das bricht den Text ab, wenn er zu lange ist und dann kommt "weiterlesen".
Das ist an sich aber ein wenig langweilig, deshalb hat ICanBuildABlog ein Tutorial für euch, wie ihr euer eigenes Bild einrichten könnt.

Als Tipp kann ich euch das mit auf den Weg geben:
Ich benutze für meine Bilder immer pixlr. Das ist sozusagen Online-Photoshop.
Damit könnt ihr eure eigenen Bilder machen! Doch jetzt aufgepasst:
Es ist unglaublich wichtig, dass ihr eure Bilder als PNG speichert, wenn sie nicht viereckig sind! Nur so bleibt der Tranparenzeffekt erhalten!
(Wenn ihr einen Doppelklick auf das Schloss macht - rechts bei der weißen Seite - dann auf "Neue Ebene" geht, könnt ihr die weiße Ebene 0 löschen und habt einen transparenten Hintergrund. (:

Nach oben Link einfügen

Hier findet ihr ein kleines, aber feines Tutorial für den kleinen Button im Eck. Es ist richtig einfach und ihr könnt auch die Farben verändern etc. Natürlich könnt ihr aber auch ein Bild einfügen. (:


 Datum verändern






Irgendwie hatte ich heute wieder Lust, etwas an meinem Blog zu verändern. Und zwar das Datum. Nach stundenlangem Probieren und Unzufriedensein, habe ich mich dazu entschieden, den Rahmen einfach wegzulassen. Hier kommt ihr zum Tutorial von CPL.











 Kommentare umbenennen und Anzahl anzeigen

Bestimmt ist euch schon aufgefallen, dass Blogger die Anzahl der Kommentare nicht anzeigt. Das könnt ihr ziemlich leicht ändern und die Kommentare sogar umbenennen! Wie das geht, erfahrt ihr hier.



 Kasten um Informationen bei Rezensionen
Wie ich bei meinen Rezis die Infobox gestaltet habe? Ganz einfach, schaut doch mal hier vorbei. Das ist eine wundervolle Seite, die ich neu entdeckt habe für Tutorials! Da werdet ihr noch einige schöne Sachen finden, das verspreche ich euch.

 Weiter- & Zurück-Button
Vielleicht ist euch schon aufgefallen, dass ich eigene Bilder eingefügt habe bei den Links zu älteren und neueren Posts. Wie ihr das macht, wird hier beschrieben.


 Posttitel individuell gestalten
Wer seinen Post-Titel nicht unbedingt links haben möchte oder einen Rahmen drum möchte, oder vielleicht nur unten einen Trennstrich, der kann mal wieder bei Copy-Paste-Love vorbeischauen. Da gibt es ein passendes Tutorial.


 Anker einfügen
Anker sind diese Sprungfelder, die ich auf dieser Seite eingebaut habe. Ihr klickt oben auf etwas und zack, seid ihr bei dem Punkt, ohne endlos hinscrollen zu müssen. Da ich selbst richtige Schwierigkeiten mit allen Tutorials hatte, verlinke ich euch das, mit dem ich es irgendwie dann doch geschafft habe und schreibe euch hier eine kurze Erklärung, wie ihr Anker gestalten könnt.

1. <a href="http://herbstmosaik.blogspot.de/2016/01/html-tutorials.html#Randänderungen">Rand und Schatten bei Bildern entfernen</a>

So sieht mein HTML in der Tabelle aus. Es funktioniert praktisch wie ein normaler Link, nur habe ich nach dem Link der Seite noch ein #Randänderungen eingefügt. Was ihr da hinschreibt, ist vollkommen egal. Es muss nur etwas sein, das sonst nicht in eurem Text vorkommt, deswegen habe ich total komische Wörter benutzt und einfach 3 zusammengefügt. Wichtig: Keine Leerzeichen benutzen! Und für jeden Anker einen neuen Begriff!
So, das war Teil 1. Jetzt müssen wir noch den zweiten Teil einsetzen und zwar dort, wo wir hinspringen wollen. Dazu fügt ihr an diesem Punkt das hier ein:

<a id ="Randänderungen"></a>

Und fertig. So geht es immer weiter und denkt daran: Immer neue Begriffe, ihr könnt auch nur "BliBlaBlubb" benutzen; hauptsache Teil 1 & 2 stimmen überein und ihr schneidet euch mit nichts im Text Das Tutorial findet ihr übrigens hier: Klick auf mich



 Kommentare stylen

Wenn ihr in den Kommentaren lieber runde Bilder haben wollt als die eckigen, schaut doch mal hier rein.
WICHTIG
Wenn ihr die Kommentare komplett ändern wollt und diesem Tutorial hier folgt, solltet ihr NICHT das obige machen! Es behindert den Code und doppelt gemoppelt ist nie so gut. (:


 Anfangsbuchstabe im Titel hervorheben
Wenn ihr den Anfangsbuchstaben in euren Post-Titeln genauso gestalten wollt, wie ich es habe, findet ihr hier ein Tutorial dazu.


 Post-Trenner einfügen
Wollt ihr keine normalen Striche, sondern irgendein ausgefallenes Bild als Trenner haben, damit man erkennt, wann euer Post endet? Dann schaut mal hier rein.



Kommentare:

  1. Liebe Sarah,
    wie ich dir schon auf Instagram gesagt habe, finde ich deinen Blog einfach wunderschön :)
    Und find es eine echt klasse mit deinem Tutorial ;)
    Ganz liebe Grüße
    Katha♥

    AntwortenLöschen
    Antworten
    1. Vielen lieben Dank für dieses netten Worte. *___*
      Das bedeutet mir richtig viel. (:

      Falls du Fragen hast, schreib einfach nochmal einen Kommentar. (:

      Liebe Grüße
      Sarah ♥

      Löschen
  2. Moin Sarah,
    Letzte Woche erst habe ich wie verrückt nach einem Tutorial für ein Dropdown Menü gesucht! Es war zum Haare raufen! Deshalb ganz lieben Dank für diese Zusammenstellung
    loralee

    AntwortenLöschen
    Antworten
    1. Perfekt! Das freut mich riesig!

      Du kannst gerne auch deine Tutorials hier verlinken, dann nehme ich sie auch auf - natürlich mit Credits an dich. (;

      Falls du noch Fragen hast, einfach fragen.

      Liebe Grüße
      Sarah ♥

      Löschen
  3. Mag ich nicht, LIEBE ICH! Danke ❤❤

    AntwortenLöschen
  4. Viiielen Dank! Das hilft mir unglaublich weiter! Ich bin grade dabei etwas an meinem Blog herumzubasteln und dein Tutorial kommt genau richtig! Liebe Grüße, Alma von www.meinebuchfamilie.blogspot.de

    AntwortenLöschen
  5. Liebe Sarah,

    vielen Dank für dieses unglaublich tolle Tutorial!! Ich habe schon überall nach diesem "Weiterlesen"-Button gesucht aber nichts gefunden - bis ich auf deine wunderschöne Seite kam! Danke nochmal!

    Liebe Grüße
    Kathi von Lesendes Federvieh

    AntwortenLöschen
    Antworten
    1. Immer wieder gerne, liebe Kathi! Danke für das süße Kompliment. (:
      Wenn du noch Fragen hast, stell sie nur! Ich bin hier. (;

      Liebe Grüße
      Sarah ♥

      Löschen
  6. Hey ich würde gerne wissen wie du deine Rezensionen im überblick gemacht hast? Ich bekomme das irgendwie nicht hin

    AntwortenLöschen
    Antworten
    1. Hey du (:
      Das sieht ja super aus auf deinem Blog! Gefällt mir sehr gut! Falls du noch Fragen hast, ich bin hier. ♥

      Löschen
  7. Huhu!

    Das mit den Ankern ist ja genial! Sowas hab ich schon lange gesucht für den Rezensionsindex. Da kann man direkt zu den Buchstaben springen und muss nicht ewig scrollen :D Vielen Dank dafür!!!

    Liebste Grüße, Aleshanee

    AntwortenLöschen
  8. Hey,

    ich finde deinen Blog wirklich sehr schön :) Ebenso gefällt mir sehr, das du ein paar Hilfreiche HTML Tipps hier veröffentlicht hast. Sie haben mir wirklich gut weitergeholfen :)

    Schau doch mal bei meinem Blog vorbei, vielleicht ist ja auch etwas für dich mit dabei :)

    Liebe Grüße
    Der Captain

    AntwortenLöschen