Neuer 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 Kommentare

  1. 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

    AntwortenLöschen
  2. Heilige Scheiße ist das geil :D

    AntwortenLöschen
  3. 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 :)

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

    AntwortenLöschen
  5. Endlich.
    Das macht das coden endlich um einiges einfacher.
    Ich freu mich! :)

    Liebe Grüße, Jacy
    Federweich

    AntwortenLöschen
  6. 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

    AntwortenLöschen
  7. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  8. 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*

    AntwortenLöschen
  9. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
    2. Danke für die fixe Antwort!
      Ich habe dieses Tutorial anwenden wollen:
      http://www.copypastelove.org/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

      Löschen
  10. 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 ♥

    AntwortenLöschen
  11. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  12. 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

    AntwortenLöschen
  13. 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.

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

      Löschen
  14. I like it auch! :) haha
    Jetzt kann man damit viel einfacher arbeiten, hat Blogger sehr gut gemacht :)

    my blog xx

    AntwortenLöschen
  15. 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

    AntwortenLöschen
  16. 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 :/ -.-

    AntwortenLöschen
  17. ich bin schon sehr gespannt drauf :)

    AntwortenLöschen
  18. 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..

    AntwortenLöschen
    Antworten
    1. Hallo Klara,
      welche Tutorials funktionieren denn nicht mehr?

      lg, Jonathan

      Löschen
    2. 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.).

      Löschen
  19. 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. :-/

    AntwortenLöschen
  20. 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.

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

    AntwortenLöschen
  22. Ich finde dort überhaupt keine Codes mehr. Z.B. habe ich versucht, diesen Artikel 'naczumachen'. http://www.copypastelove.org/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.

    AntwortenLöschen
  23. Der neue Editor ist scheiße...
    Ich bekomme absolut keine Codes mehr angezeigt die ich suche.

    AntwortenLöschen
  24. Ich finde einige Teile nicht im kompletten Code, um zum Beispiel das Tutorial mit den runden Profilbildern anwenden wollte... das finde ich extrem schade :(

    AntwortenLöschen
  25. 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

    AntwortenLöschen
  26. 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 ...

    AntwortenLöschen
  27. 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 :-(

    AntwortenLöschen
  28. 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

    AntwortenLöschen
  29. 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
    www.clothesandcamera.com

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

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

    AntwortenLöschen
  32. 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

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

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!