So fügen Sie CSS in Blogger hinzu – CSS in Blogger verstehen

Möchten Sie Ihrem Blog einige coole Effekte wie Schneefall, 3D-Schriftarten, Neon-Texte, Kastenschatten hinzufügen oder das Design Ihres Blogs auf die nächste Stufe heben, dann müssen Sie nur noch ein paar Zeilen benutzerdefiniertes CSS in Ihr Blog einfügen. CSS, was ist das? CSS ist als Cascading Style Sheet bekannt, das in einfachen Worten verwendet wird, um das Erscheinungsbild Ihres Blogs zu beschreiben, oder mit anderen Worten, es wird verwendet, um zu definieren, wie HTML-Elemente angezeigt werden sollen. Bevor Sie etwas über CSS lernen, ist es besser, etwas über HTML zu wissen. Es gibt Unmengen von Ressourcen zu CSS und selbst ein Anfänger kann die grundlegenden Elemente von CSS leicht verstehen, aber das Beherrschen erfordert viel Zeit und praktisches Wissen.

CSS spielt eine wichtige Rolle bei der Verschönerung von Elementen und alle Blogger-Vorlagen haben standardmäßig einen eigenen CSS-Code. Wenn Sie das Design Ihres Blogs weiter verschönern möchten, können Sie jederzeit benutzerdefiniertes CSS hinzufügen. In einigen unserer Blogger-Tutorials haben wir erwähnt, dass unsere Besucher CSS-Codes hinzufügen können, um beispielsweise einen Blick auf diesen Beitrag zu werfen, aber die meisten Anfänger wissen nicht, wo sie das CSS hinzufügen sollen. Die meisten von ihnen öffnen einfach ihre Vorlagendateien, finden die b: Skin-Tags heraus und vermasseln schließlich ihre Vorlagencodes. Mit Blogger können Sie im Template Designer Ihr eigenes benutzerdefiniertes CSS hinzufügen, das den Standard-CSS-Code überschreibt, um das ansprechende Erscheinungsbild Ihres Blogs zu erzielen. Hier zeigen wir Ihnen, wie Sie CSS in Blogger einfügen / hinzufügen.

CSS in Blogger einfügen / hinzufügen – CSS in Blogger verstehen

Bevor Sie CSS hinzufügen, müssen Sie CSS schreiben und bevor Sie den CSS-Stilcode schreiben können, müssen Sie die Selektoren finden, für die Sie den Stil ändern möchten. Sie können die Entwicklertools Ihres Browsers verwenden, um das Element zu überprüfen. Zum Beispiel kennen Sie h1-, h2-, h3-, h4-, h5- und h6-Tags im Allgemeinen und um diese Schriftarten zu ändern, können Sie CSS wie folgt hinzufügen.

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

Aber was tun Sie, um das Seitenlayout, den Stil der Menüregisterkarten, die Links, die Schriftfamilie, die Ausrichtung, den Hintergrund oder die Textfarbe zu ändern, wenn Sie die Elementklasse nicht kennen. Hier müssen Sie das Entwicklertool Ihres Browsers verwenden. Klicken Sie einfach mit der rechten Maustaste auf ein Element und dann auf Element prüfen, wo Sie die Elemente links und CSS rechts sehen. Ändern Sie den CSS-Code und sehen Sie, wie sich die Änderungen ergeben, zum Beispiel hier ist der CSS-Code für die Registerkarte Menü, den Sie in Ihrer Vorlage anders finden.

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

Mit dem inspect Element-Tool können Sie eine Vorschau der CSS-Änderungen für jedes Element anzeigen.

Anwenden von CSS in Blogger

Es gibt zwei Möglichkeiten, CSS in Blogger zu implementieren.

CSS mit Blogger Template Designer hinzufügen

Das Hinzufügen von CSS hier ist der einfachste und sicherste Weg, da es Ihre Kernvorlagendateien nicht beeinflusst. Abgesehen vom Hinzufügen von benutzerdefiniertem CSS können Sie mit Blogger Template Designer Ihren Blog-Hintergrund einfach ändern und die Breite, das Layout, die Schriftstile, die Farben, den Gadget-Bereich, den Fußzeileninhalt usw. anpassen.

• Melden Sie sich bei Ihrem Blogger-Blog an, gehen Sie zu Vorlagen und klicken Sie dann auf Anpassen
• Jetzt sehen Sie die Blogger Template Designer-Seite mit 5 einige Optionen
• Klicken Sie auf Erweiterte Option, scrollen Sie die Unterelemente nach unten und wählen Sie dann CSS hinzufügen.
• Als nächstes sehen Sie ein Feld auf der rechten Seite und hier müssen Sie Ihr benutzerdefiniertes CSS hinzufügen.

Fügen Sie den obigen benutzerdefinierten CSS-Code hinzu, sehen Sie sich die Änderungen unten an und klicken Sie oben auf “Auf Blog anwenden”, wenn alles erledigt ist.

Hinzufügen von CSS durch Bearbeiten Ihrer Blogger-Vorlage

Die andere Möglichkeit, CSS anzuwenden, besteht darin, das Kern-CSS direkt zu bearbeiten oder ein benutzerdefiniertes CSS zu Ihrer Vorlagendatei hinzuzufügen. Wir empfehlen diese Methode nicht für Anfänger, da eine unsachgemäße Verwendung dazu führen kann, dass Ihre Vorlage beschädigt wird. Bevor Sie CSS mit dieser Methode hinzufügen, stellen Sie sicher, dass Sie ein Backup erstellen; hier erfahren Sie, wie Sie die Blogger-Vorlage sichern und wiederherstellen.

• Gehen Sie in Ihrem Blogger-Dashboard zur Vorlage und klicken Sie dann auf HTML bearbeiten
• Jetzt sehen Sie Ihre Vorlagencodes. Drücken Sie einfach STRG + F, um zu suchen, und suchen Sie dann nach <b:skin>
• Erweitern Sie die <b:skin> und Sie sehen, dass das CSS für Ihre Blog-Vorlage angezeigt wird.

Lesen Sie auch: So erstellen Sie eine vollständige Sicherung von Blogger Blog

Bearbeiten Sie das vorhandene CSS oder fügen Sie Ihr benutzerdefiniertes CSS hinzu, aber hier erhalten Sie nicht die Vorschau-Option, die Sie im Blogger Template Designer erhalten. Speichern Sie schließlich Ihre Vorlage, wenn Sie fertig sind.

Ich hoffe, dieser Artikel hat Sie zum Hinzufügen von CSS in Blogger geführt. Verschönern Sie Ihren Blog und abonnieren Sie unsere RSS-Feeds, um weitere Updates zu erhalten.