25. März 2019

Suche nach einer perfekten Vorlage: Bearbeiten von HTML und CSS

Angenommen, Sie haben ein Blogger-Blog mit allen grundlegenden Einstellungen und haben auch eine wunderbar aussehende Vorlage hinzugefügt, entweder aus den Standardvorlagen von Blogger oder eine benutzerdefinierte Vorlage heruntergeladen und für Ihr Blog verwendet, in diesem Kapitel werde ich Ihnen beibringen, wie es geht um die Vorlage zu bearbeiten, die Sie auf der Site verwenden.

HTML bearbeiten

Die Auswahl der enden Vorlage für Ihr Blog ist eine der wichtigsten und auch kniffligsten Aufgaben. Möglicherweise gefallen Ihnen die in Blogger angegebenen Standardvorlagen nicht, sodass Sie auf jeden Fall nach benutzerdefinierten Vorlagen suchen werden. Möglicherweise gefällt Ihnen das Layout einiger Vorlagen, aber nicht die darauf verwendeten Farben und umgekehrt. Warum so viel am Kopf kratzen? Ich sage nur, wählen Sie die Vorlage mit gutem Layout und auch SEO-optimiert. Das Bearbeiten der Farben und einige kleinere Änderungen an der Vorlage ist viel einfacher! Dies wird erneut beweisen, wie einfach die Arbeit mit Blogger sein kann.

ich habe mich entschieden ATB Blogger-Vorlagee, um Ihnen ausführlich zu erklären, wie Sie eine Blogger-Vorlage bearbeiten. Diese Vorlage erhalten Sie hier!

ATB BLOGGER-VORLAGE

Bevor Sie den HTML- oder CSS-Code bearbeiten, empfehle ich Ihnen, eine Sicherungsdatei herunterzuladen. Damit Sie bei einem Fehler die XML-Datei hochladen und die vorherige Vorlage wiederherstellen können.

Den Editor verstehen

Zum Widget springen

Damit können Sie zu jedem Widget springen, das Sie in Ihrem Bstalliert haben. Öffnen Sie einfach das Dropdown-Menü Jump to Widget und wählen Sie das Widget aus, das Sie bearbeiten möchten. Dies erleichtert die Arbeit, da Sie nicht den gesamten Code durchsuchen müssen, um ein kleines Widget zu finden.

zum Widget springen

 

Erweiterbare Codesegmente

Blogger Editor bietet diese erweiterbaren Codesegmente, die den Editor übersichtlicher und weniger ungeschickt aussehen lassen.

Erweiterbare-Code-Segmente

Vorschau-Vorlage

Mit dieser Option können Sie die Vorlage im selben Fenster in der Vorschau anzeigen. Auf diese Weise können Sie überprüfen, ob Sie die richtige Art der Bearbeitung vornehmen oder nicht.

Vorschau-Vorlage

Formatvorlage

Wie Sie den Code beim ersten Mal sehen können, kann es ein Albtraum sein, ein solches Template zu bearbeiten. Ein Klick auf Vorlage formatieren wird Ihren Code in die am besten lesbare Form einrücken, wie in der Abbildung unten zu sehen ist.

Formatvorlage

Hinweis: Bei stark modifizierten Vorlagen kann dies zu Problemen führen, daher sollten Sie eine Vorschau anzeigen, bevor Sie Änderungen speichern.

Schritte zum Bearbeiten einer Standard- oder benutzerdefinierten Vorlage auf Blogger:

Schritt 1: Öffnen Sie Blogger

Öffnen Sie Blogger.com und melden Sie sich bei Ihrem Konto an. Wählen Sie das Blog aus, an dem Sie arbeiten, und öffnen Sie das Dashboard.

Blogger-Dashboard

Schritt 2: HTML bearbeiten

Sobald Sie sich auf dem Dashboard befinden, müssen Sie zu „Vorlage“ navigieren und darauf klicken. Sie finden zwei Optionen, „Anen“ und „HTML bearbeiten“. Klicken Sie auf „HTML bearbeiten“

Vorlage

Schritt 3: Überprüfen Sie, wo Sie bearbeiten möchten

Alle Browser verfügen über eine Funktion namens „Element prüfen“, die Ihnen verschiedene Funktionen des von Ihnen ausgewählten Elements anzeigt, wie HTML-Code, CSS-Code usw.

inspizieren-element

Wenn Sie die Adresse, Farbe, Auffüllung, Schriftart usw. eines Elements wissen möchten, müssen Sie nur mit der rechten Maustaste darauf klicken und Element prüfen auswählen. In dem kleinen Fenster am unteren Rand des Browsers finden Sie die Ahrefs, Stile, Netzwerk, Quellen und andere Informationen. Sie verwenden diese und bearbeiten die Vorlage nach Belieben.

Schritt 4: Ändern der Farbe; CSS bearbeiten

CSS zu bearbeiten ist sehr einfach, wenn Sie es verstehen können. Die grundlegende Codierung, die die Art der Funktion, die Auffüllung, die Schriftart, die Farbe, den Hintergrund usw. umfasst, kann geändert werden, sobald Sie in der Lage sind, die Position der zu ändernden Elemente und die Auswirkungen auf die Vorlage zu identifizieren.

Wie im obigen Schritt erwähnt, spielt Inspect element dabei eine wichtige Rolle. Alles, was Sie tun müssen, ist, den Cursor auf das Element zu setzen, das Sie bearbeiten möchten, und auf Element überprüfen zu klicken.

CSS-Bearbeitung

Im unteren rechten Fenster sehen Sie die Farben, Hintergründe, Auffüllung, Ränder, Schriftstile, Hover-Farben usw. Ändern Sie die jeweiligen Eigenschaften des von Ihnen ausgewählten Elements und prüfen Sie, ob es in Ihre Vorlage t.

Wenn Ihnen die Art und Weise, wie Sie die Vorlage geändert haben, gefällt, gehen Sie zum Fenster HTML bearbeiten und drücken Sie „Strg+F“. Fügen Sie den Elementstil oder alles, was mit dem ausgewählten Element zu tun hat, ein und drücken Sie die EINGABETASTE, bis Sie die genaue Position gefunden haben.

Edit-in-html

Sobald Sie es gefunden haben, nehmen Sie die gewünschten Änderungen vor und speichern Sie die Vorlage. Aktualisieren Sie Ihren Blog und prüfen Sie, ob die Änderungen implementiert sind oder nicht.

CSS-Bearbeitung1

Hinweis: Wenn Sie beim Bearbeiten von HTML-Codes einen Fehler machen, laden Sie die zuvor heruntergeladene Sicherungsdatei hoch oder verwenden Sie einfach Strg+Z, um die Änderungen rückgängig zu machen.

Schritt 4: Ändern des Navigationsmenüs

Im vorherigen Schritt haben Sie gelernt, wie Sie den CSS-Code in Blogger bearbeiten. Nehmen Sie nun an, dass die gesamte Bearbeitung abgeschlossen ist und Ihre Vorlage fantastisch aussieht. Sie müssen jedoch die Links in der Navigationsleiste sowohl in der Kopf- als auch in der Fußzeile ändern.

Lassen Sie uns zum Beispiel den Reiter „SEO“ im Navigationsmenü auf „Bloggen“ ändern. Gehen Sie zum Fenster HTML bearbeiten und drücken Sie Strg+F. Suchen Sie im Feld nach SEO und drücken Sie die EINGABETASTE, bis Sie die genaue Position des Wortes im Navigationsmenü finden.

Sie finden einen Code wie


SEO

Wechseln-Nav-Menü

Ersetzen Sie einfach „https://alltechbuzz.descargarjuegos.org/search/label/GOOGLE%2FSEO“ durch den Link, zu dem Sie navigieren möchten. Und auch „SEO“ durch „Blogging“ ersetzen. Das ist es!edit-html

Speichern Sie die Vorlage und aktualisieren Sie Ihren Blog. Überprüfen Sie, ob sich das Navigationsmenü geändert hat und ob es auf die richtige Webadresse verweist.

 

SEO-LEITFADEN

Über den Autor 

Imran Uddin


{"email": "E-Mail-Adresse ungültig", "url": "Website-Adresse ungültig", "erforderlich": "Erforderliches Feld fehlt"}