Blogspot – Header zentrieren – Mittig setzen

Viele möchten ihren Header, also das Bild, was oben angezeigt wird beim eigenen Blog mittig setzen. Man findet hierzu viele zahlreiche Tutorials und Erklärungen. Manche sind einfach zu verstehen, mache sind etwas komplexer.

Blogspot - Header zentrieren

Blogspot – HTML Vorlage



Doch helfen die vielen Tutorials? Nicht immer!

Einige erklären dies im Tutorial sehr komplex und als „unerfahrener User“ kann man meist damit nichts anfangen. Egal, wie schön das Tutorial auch sein mag. Andere Tutorials sind zwar einfacher, jedoch funktioniert dies anscheinend nur sporadisch. Wieso auch immer…

Es geht auch viel einfacher. Dazu muss man nur die Vorlage bearbeiten und einen Code einsetzen.


Blogspot Header mittig setzen:

Dazu geht man zuerst zum Blogger-Dashboard. Anschließend navigiert man zu der „Post-Liste“ und wählt die „Vorlage“ aus. Dort sieht man dann das eigene Design, dass man derzeit nutzt und dort klickt man auf „HTML bearbeiten“.

Anschließend öffnet sich ein Popup, wo man den HTML Code und einiges mehr zum Design ändern kann.

In dem Popup sucht man dann nach dem Haupteintrag folgendes:


/* Header
----------------------------------------------- */

Direkt im Anschluss fügt man diesen Code hier ein:

#Header1_headerimg {
margin: auto;
}

Zum Abspeichern dann nur noch auf „Vorlage speichern“ klicken. Schon hat man den Header mittig gesetzt.

Beachtet aber nach der Änderung, dass ihr eventuell die Cache vom Browser löschen müsst, damit die Änderung sichtbar ist. Dazu am besten auf die Blogspot-Seite gehen und mehrmals STRG + F5 zusammen drücken. Ruhig mehrmals. Damit sollte man denselben Effekt (Cache löschen) erzielen.

Sollten hier noch Fragen und / oder Probleme auftauchen, einfach per Kommentarfunktion melden.

Das könnte dich auch interessieren:

Raphael Jäger

Veröffentlicht von

Raphael ist Redakteur und Inhaber von Gedankenausbruch.com. Bei Anregungen, Fragen oder Problemen gerne und zu jeder Zeit erreichbar. Wenn du zum Beitrag eine Frage hast, veröffentliche einfach ein Kommentar. Per E-Mail, sowie per Smartphone-Push-Benachrichtigung werden wir darüber informiert und werden zeitnah auf den Kommentar antworten.

15 Kommentare » Schreibe einen Kommentar

  1. Hallo :) ich habe meinen Blog gerade erst gestartet und dementsprechend noch nicht so viel Ahnung von der Materie.
    Problem: Der Header will sich einfach nicht zentrieren. Ich habe schon alle möglichen CSS- Formeln ausprobiert und suche seit Tagen nach einer Lösung.
    Oder habe ich beim Erstellen des Headers mit Picasa irgendwas falsch gemacht? Ich hab aber auf Breite etc geachtet…
    Ich wäre sehr dankbar, wenn mir jemand helfen könnte!

    Liebe Grüße!

  2. Der Code muss nicht im HTML-Code Feld eingesetzt werden. Dort existiert besagte Stelle gar nicht.
    /* Header
    ———————————————– */ werdet ihr nicht finden. Zumindest beim neuen Blogger nicht.
    Ihr müsst auf Vorlage – Anpassen – Erweitert – CSS einfügen und dort dann den Code eingeben. Wenn ihr alles richtig gemacht habt, müsste unten, wo ihr euren Blog, seht euer Header sofort in die Mitte gehen. Wenn nicht, drückt ihr einfach vor dem Code mal Enter. So hats bei mir funktioniert.

    • Hallo hannah,
      würdest du mir nochmal den genauen code sagen, den man bei css einfügen muss?
      Das wäre wirklich richtig lieb! Es klappt einfach nicht bei mir :(.
      Ganz liebe Grüße!
      Vielleicht kannst du mir auch helfen, wie ich das favicon richtig einfüge? ich habe es erfolgreich hochgeladen, aber es wird trotzdem nicht im tab angezeigt… ich bin am verzweifeln…
      Ich wäre dir sehr dankbar!

  3. Bei mir funktioniert es nicht.. ich habe dasselbe Problem wie die Bloggerin über mir, dass der Code dann ganz oben in meinem Blog zu lesen ist, das Bild bleibt an Ort und Stelle.. ich verzweifle noch.
    Liebe Grüße,
    Sophia

  4. Bei mir klappt es nicht -.- Ich finde diesen strich nicht und wenn ich ihn einfach i-wo einfüge steht der cod nur in meinem blog…mehr nicht.

    gibt es noch eine ander möglichkeit… mein htm ist auch ganz bunt nicht wie im beispiel bild. es ist rot,grün,schwaz…..

  5. Bei mir wird dieses mysteriöse /* Header———————————————– */“
    im HTML-Text gar nicht angezeigt. oO

  6. wuuhuuuuuu!!!!! Tausendankundimmerwieder!!!!!
    Eeeeeeeeeeeeeeeeeeeendlich hat es mit deinem Tipp geklappt!!!!! :)
    Juhuuuuuu!!!!! :)

    • Raphael

      Hallo.
      Nach dem Tutorial funktioniert es bis heute noch bei mir.

      Hast du denn alle zu vorige Änderungen rückgängig gemacht und anschließend nach diesem Tutorial hier ausprobiert?

      • Hallo.
        Jetzt hat es funktioniert :-) Ich habe es mehrmals eingesetzt und gleich gespeichert. Aber nachdem ich dann mal auf Enter gegangen bin hats den Header dann sofort mittig gesetzt^^

        Danke trotzdem für den Tipp mit dem Code :-)

        • Raphael

          Hallo.
          Freut mich zu lesen. Dann hat wohl deine Cache dir einen Streich gespielt. ;)

          Bei solche Änderungen empfiehlt es sich, die Cache zu löschen. Alternativ STRG und danach F5 zu drücken. Sollte in der Regeln denselben Effekt erzielen.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.