Passen Sie den Header-Bereich Ihres Blogger.com-Blogs an
Im letzten Tutorial haben wir den Abschnitt "Links" für Ihren Blogger angepasstTM Weblog. Jetzt werden wir den Header-Bereich oben im Blog anpassen. Die Kopfzeile enthält den Titel und die Beschreibung Ihres Blogs. Wir werden die Schriftart für den Text ändern und einen farbigen Hintergrund hinzufügen.

Wie im letzten Tutorial werden wir diese Verbesserungen vornehmen, indem wir einige Zeilen des HTML-Codes der Vorlage ändern. Klicken Sie im Menü oben auf der Seite auf die Registerkarte Vorlage, um zum Abschnitt Aktuelle Vorlage bearbeiten zu gelangen. Den HTML-Code für die Vorlage finden Sie im Feld unten. Wir werden einige Änderungen am CSS-Stilcode vornehmen. (Um mehr über Cascading Style Sheets zu erfahren, folgen Sie dem Link unten.) Scrollen Sie im Code nach unten, bis Sie den Abschnitt Header innerhalb des CSS-Style-Tags erreichen. Wie Sie sehen können, ist das Style-Tag sehr lang und der Header-Abschnitt des Style-Tags besteht aus sechs Teilen.

  1. @media all
  2. @ Media Handheld
  3. #Blog Titel
  4. # Blog-Titel a
  5. # Blog-Titel a: Hover
  6. #Beschreibung

  • Der erste Teil des Codes (@media all) steuert die Eigenschaften der Kopfzeile, einschließlich der Breite, des Randes und der Rahmengröße. Der zweite Teil (@media Handheld) erbt diese Eigenschaften vom ersten Teil und ändert auch die Breite des Headers für Handheld-Monitore auf 90 Prozent. Da die neue Hintergrundfarbe in beiden Fällen verwendet werden soll, fügen wir im ersten Teil (@media all) eine Codezeile für die Hintergrundfarbe hinzu. Diese neue Codezeile ist unten fett gedruckt. Im folgenden Beispiel haben wir eine hellgraue Farbe verwendet, können jedoch jede gewünschte Farbe verwenden.

    @media all {
    #Header {
    Hintergrundfarbe: # EFE3EF;
    ...

  • Als nächstes werden wir die Schriftart für den Titel in die beliebte, lässig gestaltete Schriftart Comic Sans MS ändern. Natürlich können Sie jede beliebige Schriftart verwenden. Die nächsten drei Teile des CSS-Codes der Vorlage (# Blog-Titel, # Blog-Titel a, # Blog-Titel a: Hover) steuern die Eigenschaften für den Titel des Blogs. Der erste Teil steuert die allgemeinen Eigenschaften und die anderen beiden Teile steuern das Aussehen des Textes, wenn er als Hyperlink fungiert. Um die Schriftart oder Schriftart des Titels für alle Instanzen festzulegen, fügen wir dem ersten Teil (# blog-title) den CSS-Code für die Schriftfamilie hinzu. Da unser Schriftname Leerzeichen enthält, muss er auch in Anführungszeichen gesetzt werden („comic sans ms“).

    #Blog Titel {
    Schriftfamilie: "comic sans ms";
    ...

  • Schließlich arbeiten wir am CSS-Code für die Beschreibung Ihres Blogs (#description). Dies ist der letzte Teil der ursprünglichen sechs. Wie Sie unten sehen können, wird der gesamte CSS-Code, der die Schriftartmerkmale für den Beschreibungstext steuert, in einer Zeile zusammengefasst. Alles, was wir tun müssen, ist, "Comic Sans Ms" am Anfang der Liste der Schriftarten hinzuzufügen, wodurch Comic Sans MS zur Standardschriftart für den Beschreibungstext wird.

    #Beschreibung {
    ...
    Schriftart: 78% / 1.4em "comic sans ms""Trebuchet MS", Trebuchet, Arial, Verdana, Sans-Serif;
    ...
    }

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Vorschau, um eine Vorschau Ihrer Änderungen anzuzeigen, und schließen Sie dann das Browserfenster, um zur vorherigen Webseite zurückzukehren. Klicken Sie auf die Schaltfläche Vorlagenänderungen speichern. Wenn die Bestätigungsmeldung angezeigt wird, dass die Änderungen gespeichert wurden, klicken Sie auf die Schaltfläche Neu veröffentlichen. Um zu überprüfen, ob Ihr Blog aktualisiert wurde, klicken Sie oben auf der Seite im Menü auf die Registerkarte Blog anzeigen. Möglicherweise müssen Sie Ihre Blog-Webseite aktualisieren, um die Änderungen zu sehen.





Screenshots mit Genehmigung von Google Inc. GoogleTM, BloggerTM und BlogSpotTM sind entweder eingetragene Marken oder Marken von Google Inc. in den USA und / oder anderen Ländern.


Video-Anleitungen: Wordpress Website Erstellen -2020- Tutorial in 20 EINFACHEN Schritten | (Deutsch|German) (April 2024).