basics, Tipps & Tutorials

HTML&CSS Editor für Blogger

Am 9. April hat Google für Blogger einen neuen Editor für HTML und CSS eingeführt. Und ich kann nur sagen, i like it! Bevor ich mich jetzt überschlage vor Freude, zähle ich einfach mal die Neuerungen auf.

Falls ihr der Englischen Sprache mächtig seid und den orginal Artikel sucht, hier ist er:
http://buzz.blogger.com/2013/04/improvements-to-blogger-template-html.html

Zeilennummern

Die Nummern links geben die Zeile an, in der man sich gerade befindet und sollen helfen, sich besser im Code zurecht zufinden.

Farbliche Hervorhebung (Syntax Highlighting)

Der Code wird jetzt farblich markiert, was es meiner Meinung nach sehr viel einfacher macht, zu erkennen wo man ist und was für Code man gerade vor sich hat.

Schnell zu Widgets wechslen

Über den neuen Button Zu Widget wechseln kommt ihr schnell zu einem bestimmten Widget. Diese Funktion finde ich nur bedingt nützlich, da nicht die Überschrift des Widgets sondern nur die Art anzeigt wird und z.B. bei Copy Paste Love die meisten Widgets nur HTML Widgets sind.

Code ein- und ausklappen

Über die kleinen Dreiecke am Rand des Codes könnt ihr gesammengehörigen Code “ausklappen”. Um den Code wieder “einzuklappen” klickt ihr einfach nochmal auf die selbe Stelle, so wie in der Animation unten. Mit dieser Technik kann man den Code erheblich lesbarer machen, in dem man einfach die Bereiche, die man gerade nicht bearbeitet, ausblendet.

Neue Vorschaufunktion

Mit einem Klick auf Vorschau der Vorlage anzeigen gelangt ihr direkt zu einer Vorschau eures Blogs, ohne erst einen neuen Tab aufmachen zu müssen.

Übrigens..

Das Codefenster hat nun eine eingebaute Suche, das heißt, wenn ihr einen bestimmten Teil im Code sucht, klickt erst in das Codefenster und drückt dann STRG-F.

Und das wars auch schon, schaut es euch einfach mal an und kommentiert, was das Zeug hält!

47 Comments

  1. natalie

    13. April 2013 at 20:30

    oh gott, danke danke danke für den post. war grad mega erschrocken als ich meinen html code ändern wollte und alles anders aussah Oo

  2. Nathalie

    13. April 2013 at 20:36

    Heilige Scheiße ist das geil 😀

  3. krissii

    13. April 2013 at 20:41

    was?!! 😀 wie super

  4. Marie

    13. April 2013 at 21:11

    Das klingt ja ziemlich toll. Ich stütze mich bei eigentlich allen HTML Sachen auf eure Beiträge hier, da ich sonst absolut keine Ahnung davon habe. Schön, dass es jetzt übersichtlicher ist und prima, dass du es hier vorgestellt hast 🙂

  5. Sooyoona

    13. April 2013 at 21:37

    Vielen Dank für diesen Post. Ich kämpfe mich bereits seit 3 Stunden durch dieses Ding und finde nichts.

  6. Jacy

    13. April 2013 at 22:11

    Endlich.
    Das macht das coden endlich um einiges einfacher.
    Ich freu mich! 🙂

    Liebe Grüße, Jacy
    Federweich

  7. Malin Rouge

    13. April 2013 at 23:23

    Ich war gar nicht begeistert, weil 1. die suche im codefenster nicht gut funktioniert (es wird nicht angezeigt wie viele treffer es gibt und beim auto-scrollen zum treffer landet das gesuchte wort immer ganz unten in der letzten zeile des fensters, dann muss man selber scrollen um zu kucken wie der teil unter dem suchwort aussieht) und 2. mochte ich die vorschau im seperaten fenster lieber, die neue zeigt manche widgets nicht richtig an und ist irgendwie so klein.
    hoffentlich ändern sie bald wieder was dran :/

    Spark&Bark

    xx

    1. Ines Caranaubahx

      14. April 2013 at 16:37

      Denke ich auch. Ich will das alte wieder!

  8. *KAT*

    14. April 2013 at 5:27

    Das hört sich nicht schlecht an. Aber seitdem ist mein Design total am spinnen. Im Entwurf sieht alles ganz normal aus und nach der Veröffentlichung stimmt die Formatierung nicht mehr. Auch funktioniert mein GFC auf einmal nicht mehr. Es ist als hätte es sich in Luft aufgelöst. Ich bin schon am verzweifeln, da ich nicht weiß was ich machen soll. Bis jetzt konnte mir keiner helfen. Vielleicht kannst du mir ja einen Tip geben, wie ich vorgehen soll.

    Katstime-blogspot.de
    Vielen Dank im voraus.
    KAT

    1. Jonathan Jenne

      14. April 2013 at 20:01

      Hallo KAT,

      du könntest mal versuchen, die Widget vorlagen zurückzusetzen, also im Vorlagen Editor auf den Button "Widget vorlagen zurücksetzen" klicken.

      Zum GFC Widget: Entferne es mal komplett und füge es dann wieder zu deinem Blog hinzu. Das könnte es wieder erscheinen lassen.

      lg,
      Jonathan

  9. Tatjana

    14. April 2013 at 6:04

    Daaaaaaaanke für den Hinweis, ich habe oft im Html rumgebastelt und jetzt wird es noch wesentlich einfacherer. Ist mir bisher noch gar nicht aufgefallen. *freu*

  10. Anja

    14. April 2013 at 7:18

    Ich war auch geschockt, als dieses Ding kam. Ich habe mich so gut mit Mühe in die alte Ansicht eingearbeitet und jetzt kam das. Ich habe allerdings zwei Fragen, bzw. Probleme:

    1. Früher gab es ein Häkchen "Widgetvorlagen komplett anzeigen" – sind das nun die Pfeile, die man ausklappen kann? Also wenn man alle Pfeile ausklappt, lässt man seine Vorlage komplett anzeigen?

    2. Als ich mithilfe eines eurer Tutorials etwas ändern und in die SuFu einfügen wollte, gibt es einige der Codes irgendwie nicht mehr. Davor habe ich sie aber immer gefunden..

    Wäre nett, wenn mir jemand hier antworten könnte.
    Liebe Grüße, Anja

    1. Jonathan Jenne

      14. April 2013 at 19:57

      Hallo Anja,

      zu 1.
      Meines wissens werden die Widgetvorlagenab jetzt immer anzgezeigt, du brauchst nun also garnicht auf das Häckchen "Widgetvorlagen komplett anzeigen" zu klicken. Und ja, wenn man alle Pfeile ausklappt, dann sieht man seine Vorlage komplett.

      zu 2.
      Kannst du mir verraten, welches Tutorial das war? Dann werde ich mal nachsehen, ob sich da vielleicht etwas an dem Code geändert hat.

      lg,
      Jonathan

    2. Anja

      15. April 2013 at 12:52

      Danke für die fixe Antwort!
      Ich habe dieses Tutorial anwenden wollen:
      http://www.lovemira.de/category/tipps-tutorials/2011/08/datum-unter-posttitel.html

      Da muss man nach diesem Code suchen: und den gibt es bei mir jetzt irgendwie nicht mehr :/
      Liebe Grüße

  11. Lenaa.

    14. April 2013 at 7:30

    Als ich das neue Fenster gesehen hab, war uch erstmal ziemlich geschockt. Jetzt wo ich mich mit den alten endlich angefreundet habe! Mittlerweile gehts, aber irgendwie ist die Suche nich ganz so zuverlässig wie die alte. Und man muss Enter drücken, wenn man zum zweiten Ergebnus der Suche will.

    Lg, Lena ♥

    1. Ines Caranaubahx

      14. April 2013 at 16:36

      Finde ich auch. Das alte was besser -_-

  12. noz!

    14. April 2013 at 8:43

    Also ich find es ziemlich nervig. Denn gerade die Suche im Gesamten war doch vorher wesentlich einfacher. jetzt fange ich an, alles auseinanderzuklappen, um den entsprechenden Kontext zu finden … wie blöd.
    Und die Sache mit der benennung der Widget find ich ebenso wie du ziemlich verwirrend, denn auch ich hab ne Menge HTML-Widgets drin … also jedes Mal Rästelraten.
    Aber mit der Zeit werde ich vielleicht auch ein paar Vorzüge entdecken.

    Liebe Grüße

    Katja

    1. Jonathan Jenne

      14. April 2013 at 20:05

      Ich denke, die Suche wird noch verbessert werden, da der Blogger Vorlagen Editor von CodeMirror abstammt, gibt es vielleicht so etwas:

      http://codemirror.net/demo/search.html

      lg,
      Jonathan

  13. die.waschkueche

    14. April 2013 at 9:38

    Danke für den Post, ich hab jetzt nur kurz drüber geschaut, finde es persönlich aber übersichtlicher. Mir war es vorher einfach zu kleinteilig und schlecht lesbar. Für mich als Blogger ist das jetzt die 3. Änderung in dem Editor, von der Übersicht finde ich dieses Lösung bislang für mich die Beste.

    LG Doris

  14. Liiisa

    14. April 2013 at 10:38

    Ich finde es auch deutlich besser als vorher! Jetzt gibts ja auch eine Vorschau und man muss die Sachen nicht live im Blog anpassen. Mit den Änderungen kann man auf jeden Fall besser arbeiten.

    1. Lea.

      14. April 2013 at 13:42

      Versteh' ich nicht, vorher gab' es ja auch schon eine Vorschau? 😀
      //
      Ansonsten mag ich es nicht besonders, wenn sich Dinge ändern. Finde nicht, dass da irgendwas nützlicher ist.

  15. nata

    14. April 2013 at 11:45

    I like it auch! 🙂 haha
    Jetzt kann man damit viel einfacher arbeiten, hat Blogger sehr gut gemacht 🙂

    my blog xx

  16. shanenoreen

    14. April 2013 at 15:57

    vielleicht toll, wenn man sich mit html auskennt, leider habe ich mich bisher nur immer mit tutorials durchgeschlagen und da muss man jetzt mal forschen um es auf die neue vorlage zu übertragen 😉 lg

  17. Ines Caranaubahx

    14. April 2013 at 16:34

    Ich finds doof… denn ich wollte mal selbst ein bisschen gucken und umbauen, so als HTML-frischling und jetzt komme ich ÜBERHAUPT nicht mehr klar :/ -.-

  18. Janine

    14. April 2013 at 17:42

    ich bin schon sehr gespannt drauf 🙂

  19. ' K L A R A ❤

    14. April 2013 at 18:53

    ich finde es total schei**.. Ich kam gerade so super damit zurecht und jetzt wurde alles geändert und ich komme überhaupt nicht mehr klar. Einige Tutorials funktionieren nämlich jetzt auch nicht mehr..

    1. Jonathan Jenne

      14. April 2013 at 20:07

      Hallo Klara,
      welche Tutorials funktionieren denn nicht mehr?

      lg, Jonathan

    2. ' K L A R A ❤

      29. April 2013 at 13:54

      Das z.B. die Kommentare und das Datum unter dem Posttitel stehen (Mal nebenbei mich würde es wahnsinnig interessieren wie man das ganze auch direkt über der Überschrift kriegt.).

  20. Raine

    14. April 2013 at 22:05

    Irgendwie weiß ich nicht, ob ich das wirklich so gut finden soll.
    Hab jedenfalls nun auch Probleme, ein Tutorial von euch umzusetzen: Ich bekomme dieses "Attribution"-Ding nicht mehr weg. Wollte es gegen eine individuelle Version austauschen und dafür natürlich diese Standart-Vorlage entfernen. Aber egal, wie häufig ich die Änderung im html-Bereich abspeichere, das Widget kommt immer wieder. :-/

  21. TiaMel

    16. April 2013 at 11:42

    Also mit dem Neuen komm ich gar nicht klar – kaum habe ich mich mit der alten Version angefreundet und dutzende Sachen geändert und schon verändern sie das -.- ich kann nichts mehr finden irgendwie – keine Ahnung.

  22. Natalie

    17. April 2013 at 16:11

    bei mir funktioniert das gar nicht 😮
    wenn ich auf vorlage gehe dann steht da nur ''wird geladen'' aber nach 10min. ist die seite immer noch nicht geladen :O

  23. Love Letters

    20. April 2013 at 16:16

    Ich finde dort überhaupt keine Codes mehr. Z.B. habe ich versucht, diesen Artikel 'naczumachen'. http://www.lovemira.de/category/tipps-tutorials/2012/12/schlichtes-design-erstellen-minima.html Als ich nach body { gesucht habe, wurde nichts angezeigt 🙁 Genau das gleiche Problem hatte ich, als ich es wieder so einstellen wollte, dass man sieht, wie viele Kommentare man hat.

  24. twiggy

    21. April 2013 at 17:54

    Der neue Editor ist scheiße…
    Ich bekomme absolut keine Codes mehr angezeigt die ich suche.

  25. Anonym

    28. April 2013 at 10:42

    Ich finde einige Teile nicht im kompletten Code, um zum Beispiel das Tutorial mit den runden Profilbildern anwenden wollte… das finde ich extrem schade 🙁

  26. rainbowcupcake

    2. May 2013 at 14:37

    Ich brauche dringend Hilfe! Seit ein paar Tagen oder so hab ich wieder diesen nervigen Rahmen um die Bilder und dank dem neuen html editor steige ich jetzt gar nicht mehr durch. Wäre unglaublich froh, wenn ihr mir helfen könntet und die Antwort an meine Email schicken könntet: rainbowcupcake96@googlemail.com

    LG

  27. Sandra PusteBlume.~

    21. May 2013 at 15:12

    Theoretisch hört sich das ganz gut an aber praktisch hab ich enorme Probleme, ich war den anderen gewöhnt und hatte den alten auch viel viel lieber 🙁 Mir macht es gar keinen Spaß mehr, da rumzubasteln …

  28. Alisa

    28. May 2013 at 16:49

    Vor allem finde ich dieses verdammte Codefenster nicht! Es heißt doch, dass es eins gibt, wo man nicht mehr mit strg+f suchen muss, oder hab ich das falsch verstanden?
    Wenn ich mit strg+f suche, finde ich gaaarnichts mehr 🙁

  29. Melia Pink

    31. May 2013 at 12:44

    ich hab nen ganz anderes Problem.
    Bei mir wird der Code gar nicht mehr erst angezeigt… in den ganzen Kästen steht "nichts"…. auch wenn ich weiter runterscrolle… ist nichts.. genauso wie bei widgets anzeigen… tut sich auch nichts..
    Habt ihr dazu eine Lösung???
    http://i39.tinypic.com/avsft2.jpg

  30. Carmen

    9. July 2013 at 20:33

    Also ich verzweifel ja an diesem neuen HTML Editor xD In welchem Widget muss man denn suchen, wenn man die Schatten um die Bilder in den Posts herum weghaben will? 😉
    xx
    http://www.clothesandcamera.com

  31. Anonym

    26. August 2013 at 18:24

    In meinem Template wird der Inhalt von den Gadgets/Widgets nicht angezeigt,obwohl Ich alles ausklappe. Was kann Ich da machen?

  32. Greeklicious

    22. December 2013 at 0:04

    Bringt mir ehrlich gesagt auch nicht viel, wenn ich in der suche etwas eingebe findet er das nicht.

  33. Emma

    5. February 2014 at 18:26

    ich verstehe das leider nicht so ganz, ich habe jetzt z.b wieder versucht (einfache Vorlage) das ich die Kommentarzahl wieder zeigen kann und den gewünschten Code kann ich nicht finden im HTML, ich habe es auch versucht in dem ich alles zurücksetze auf die Standardfunktion aber auch das hat nicht geklappt HELP

  34. Emii

    4. March 2014 at 21:07

    Mach doch bitte ein 'update' zum dem Post "Abstand bei den Bildern entfernen", wäre super lieb.
    http://ilestparfaite.blogspot.de/

Leave a Reply