Donnerstag, 25. September 2014

Mithilfe der Entwickler-Tools das Blog-CSS/HTML bearbeiten!



Wie in meinem Waldgarten-Blog bereits angekündigt, will ich hier nun die Schritt-für-Schritt-Anleitung geben, um Veränderungen am html-Quelltext eines Blogger/Blogspot-Blogs vornehmen zu können, selbst wenn man keine präzisen html/Css-Kenntnisse besitzt.

Mein genialer Sohn machte sich kürzlich die Mühe, mir zu zeigen, wie einfach das geht!
Natürlich mußte ich ganz Ohr sein, denn geniale Kinder verlangen ungeteilte Aufmerksamkeit! Doch die wollte ich ihm gern gewähren, lag es doch vor allem auch in meinem eigenen Interesse, diese Dinge endlich allein bewerkstelligen zu können, ohne jedes Mal lange auf Hilfe warten zu müssen.

Zunächst einmal muß man wissen, daß  mittels der Taste F12 (ganz oben auf der Computer-Tastatur) in JEDEM Browser die sog. Entwickler-Tools aufgerufen werden können.

Im Firefox nennt man das Ganze wohl Inspektor. Wenn ich jetzt etwa Falsches schreibe, mich bitte korrigieren! Ich schreibe das Ganze lt. meinen Aufzeichnungen und aus dem Gedächtnis heraus. Denn mein Sohn ist derzeit nicht greifbar.
In Chrome sind es die sog. DevTools. Bei Opera scheint das Ganze Dragonfly zu heißen.  Ansonsten müßt Ihr für speziell Euren Browser googeln.

Was uns betrifft, arbeiteten wir mit Chrome und auch mit dem Firefox, da ich alle Browser auf meinem Rechner habe.

Nachdem man F12 gedrückt hat, erscheint unten auf der Seite der sog. Dom-Baum.


Zugriff auf Elemente der Webseite
 jQuery + DOM
Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)


Im Firefox klickt man  mit der linken Maustaste auf den kleinen Pfeil ganz links oben neben "Inspektor".  Im Kontextmenü, das daraufhin zusehen ist, erscheint "Ein Element der Seite auswählen".
Danach fährt man über den Blog - es verändert sich etwas, wie man am nächsten Screenshot sehen  (unter diesem) sehen kann.

In Chrome klickt man dagegen auf die kleine Lupe ganz links oben, wobei in einem Kontextmenü folgender Satz erscheint: "Select an element in the page to inspect it."



Je nachdem, über welchen Bereich des Blogs man mmit der Mouse fährt, wird dieser markiert und man erkennt unten im Quelltext, wo man diesen Bereich im HTML des Blogs ändern kann! Denn hier - in der nicht-internetten-Ansicht, die zwar den Blog zeigt, jedoch nur auf dem Computer und nicht unmittelbar im Internet, kann man den Blog nicht nachhaltig verändern. Es ist nur ein Werkzeug, das eine identische Ansicht des Blogs vermittelt. Nachhaltige Änderungen können im Entwicklertool jedoch nicht vorgenommen werden! Es ist nur zum Testen und Üben gedacht!

Im nächsten Screenshot eine der Markierungen. - Den markierten Bereich könnte man im weiter unten blau markierten Code verändern! Bzw. endgültig erst im Blog im identischen Bereich!

Denn das Tollste ist - HIER im Browser kann man es gefahrlos ausprobieren, ohne daß sich im Blog selbst etwas ändern würde. Denn die eigentliche Veränderung nimmt man dann später im html-Code des Blogs vor.

Dieses hier ist also erst einmal die "Spielwiese" zum Testen ... einfach genial!


Und einmal in der Chrome-Konsole . . .

Wie zu sehen ist, wurde ganz oben der Seiten-Reiter "Pflanzen-Lexikon" markiert. Diesen konnte ich jetzt beliebig einfärben, die Größe verändern oder auch die Abstände zwischen den Reitern. :-)


Und beim nächsten Screenshot habe ich die Sidebar markiert, die sich ebenso beliebig verändern ließe.



Der Bereich, bei dem es bei mir ankam, ist der, der im Screenshot hier drunter blau markiert ist.
Das erfahre ich, indem ich einfach über den entsprechenden Bereich, den ich ändern will, mit der Mouse fahre.






Entscheidend ist diese Ansicht mit den mit meinen roten Pfeilen nachträglich markierten Stellen! Erst wenn dieser Bereich komplett markiert ist, erscheint der "main-outer".




Und genau diesen Bereich habe ich mir dann zunächst im html des Test-Blogs herausgesucht, was nicht schwer ist, da man ja im Blog-HTML mit der blogeigenen Suchfunktion prima suchen kann nach dem Begriff, der im Entwickler-Tool angezeigt wurde.


Ob man nun den Hex-Wert (#CCFFCC) einträgt oder den Farbnamen ausgeschrieben einfügt, bleibt sich gleich. Hauptsache, die Farbe gefällt.
Seiten mit Farbcodes finden sich zuhauf im Internet. Auch dann noch, wenn man ein wenig unprofessionell sucht, wie ich das jetzt einmal gemacht habe! ;o)



Wichtig ist, daß das Dollarzeichen der Variable wie auch die beiden Begriffe mitsamt der Klammern gelöscht werden. Sie dienen lediglich als Platzhalter. Und stattdessen der Farbwert genau an der Stelle eingetragen wird. Präzises Vorgehen ist hier wichtig, es darf kein Leerzeichen zuviel geschrieben werden! Ob als Farbname oder Hex-Wert, bleibt jedem selbst überlassen. Doch das Semikolon MUSS bleiben!

Daß man immer, wenn man Veränderungen im Blog vornehmen will, vorher das gesamte HTML wie auch die XML-Datei des Blogs sichert, versteht sich von selbst!




Der Testblog zeigt nun anstatt des Grau in der Sidebar und Umrandung (rote Pfeile!) ein Grün - in der Testumgebung hatten wir ein Gelb gewählt (siehe oben) und für meinen Waldgartenblog wird es eine Überraschungsfarbe werden! Doch das demnächst!


Samstag, 20. September 2014

Suche im Blogger-HTML-Editor!

Die Anleitung hierfür habe ich bei Mira/Copy Paste Love gefunden.
Ich konnte auch schon vorher den html-Quelltext des Blogs durchsuchen. Jedoch kopierte ich mir diesen händisch in einen Text-Editor und suchte dann innerhalb dieses Editors nach einem bestimmten Begriff.

Doch innerhalb des Blogger-Editors kann man auch suchen. Lt. Mira sucht er auch in den zugeklappten Bereichen (diese sind durch kleine schwarze Dreiecke am linken Rand markiert). Man müßte diese Dreiecke erst mühsam einzeln aufklappen. Das war vorher meines Erachtens komfortabler gelöst, denn seinerzeit gab es einen Button "alle aufklappen" oder so ähnlich, der ist heute nicht mehr vorhanden. Wirklich schade!

Um also im Blogger-Editor zu suchen, stellt man den Cursor genau an den Anfang des html-Codes und klickt dann auf Strg+F. - Apple-User schauen bitte bei Mira nach, wie es beim Mac gehandhabt wird. Mit "Enter" läßt sich dann der gesamte Quelltext durchsuchen.

Zum Kopieren klickt man in die Mitte des html-Codes und dann auf Strg+A. So läßt sich der Code in einen html-Editor kopieren, wie ich es eingangs erwähnte.
Hier finden sich noch weitere Ausführungen zum inzwischen ja nicht mehr ganz so neuen Blogger-Editor.



Interessant ist aber auch, was ich in diesem Blog dazu noch fand. Denn nach wie vor suche ich nach dem Teil des CSS-Codes, der meinen Hintergrund wunschgemäß verändern kann. Dort lese ich also, daß sich neben der neunten Zeile ein Pfeil befinden soll (das, was ich oben schwarzes Dreieck genannt habe!) Doch neben der 9. Zeile befindet sich in meinem html-Code kein solches!!! Sondern erst ab Zeile 14!



Ausgeklappt schaut das Ganze dann so aus:



Doch auch diesem Blogger war der Unterschied zum vorherigen html-Management aufgefallen -  die Widget-Vorlagen lassen sich leider nicht mehr quasi auf Knopfdruck komplett auf einmal anzeigen. Es macht viel mehr Mühe und kostet wesentlich mehr Zeit, jeden Pfeil (Schwarzes Dreieck) erst einzeln aufzuklappen!

Color Hexa



ColorHexa.com is a free color tool providing information about any color - so steht es auf der Seite zu lesen und ich habe meine Waldgartenfarbe, ein dunkles Blaugrün, hier verlinkt.




Donnerstag, 18. September 2014

Text in Kommentaren fett hervorheben!


Wer schon immer wissen wollte, wie man Text oder Teile von Text fett formatiert, kann das jetzt ganz einfach auch in den Kommentaren verwirklichen. Es bedarf dazu lediglich unserer 10 Finger, eines funktionierenden Kopfes bzw. Augen, also Lesevermögens, und eines kleinen Befehles, den ich in meinem Testblog dargestellt habe.

Bei dem Befehl handelt es sich um das "b" in spitzen Klammern und beim abschließenden sog TAG dieses Befehles darf der Schrägstrich nicht vergessen werden! Das ist schon alles!

Das Ganze kann auch im html-Seminar nachgelesen werden!

Dienstag, 16. September 2014

Mobile Ansicht

bei Klick auf das Bild vergrößert es sich!

Diese Mini-Anleitung, die eigentlich nicht wirklich eine ist, habe ich für Gucky geschrieben und fotografiert. Denn um seinen Blog auf mobilen Geräten anzeigen zu lassen, braucht man kein Uralt-Bloglayout zu verwenden. Im Dashboard unter "Vorlage" ist auch die mobile Ansicht des jeweiligen Blogs zu sehen (siehe Bild oben!). Und am Smartphone wird man normalerweise auch gefragt, ob man die mobile oder die Voll-Ansicht anzeigen lassen möchte.