Freitag, Zeit für einen kleinen Blog-Tipp! 🙂

Alle bereits veröffentlichten Tipps sind auf dieser Seite zusammengefasst: Blog Tipps.

Diesmal auch wirklich sehr schnell und gar nicht besonders “innovativ”, ich dachte mir nur, da ich schon mal danach gefragt wurde, könnte es auch für einige andere interessant sein.

Es geht darum, wie man die Überschriften in der Sidebar des Blogs dem Design und persönlichen Vorlieben anpassen kann. Etwa eine Schriftart, die ihr auch im Header verwendet, die aber von Blogger nicht unterstützt wird, oder grafische Elemente etc.

Nun, es geht ehrlich gesagt sehr einfach – zur Gestaltung der Überschriften ist natürlich euer Design-Talent gefragt. Ich habe hier im Blog nichts Besonderes integriert, lediglich ein kleines “beschreibendes” Symbol und die Überschrift in meiner Wunschfont, zB:

Gestalten kann man natürlich wo man will, da ich diese Symbole nutzen wollte, habe ich es in Word gemacht und mit dem Snipping Tool ausgeschnitten und gespeichert. Es ist übrigens gar nicht soo wichtig, ob man es immer gleich ausschneidet, da es in der Sidebar automatisch in der Länge angepasst wird – lediglich etwa der Abstand nach unten sollte nicht zu groß sein, da sonst zu viel weiß zwischen Widgettitel und Widgetinhalt vorkommt.

Hat man alle seine Titel zur Zufriedenheit erstellt, (ausgeschnitten) und gespeichert, kann man sie bei einem Bildhostingservice der Wahl hochladen. Ich benutze da häufig imageshack oder photobucket, einfach ein Service, wo die Bilder auch längerfristig gespeichert sind.

Jetzt geht’s ans Einbetten: Dazu im Dashboard auf Template – HTML Bearbeiten klicken. Nicht vergessen “Expand Widget Template” anzuhaken!

Strf+F drücken und nach <b:section id=’sidebar’ suchen. Dann solltet ihr am Anfang der Sidebar Widgets im Code stehen.

Bei jedem Widget gibt es die Zeile <h2 class=’title’><data:title/></h2> – wobei h2 bei euch auch h3 oder h4 sein könnte, es bezeichnet lediglich die Formatierung der Heading, h1 ist die größte Hauptüberschrift usw…

Was aber hierbei gar nichts zur Sache tut, wichtig ist, dass man in der Zeile class=’title’ ist:

Wie man hier hoffentlich im Schaubild sieht, löscht man einfach im Titel dieses übliche <data:title/> raus, und fügt einen Bildcode ein: <img src=’http://euerdirekterlinkzumbild.com/’>  – hier nur den roten Code ändern, den Rest so belassen.

Den Code erhält ihr bei imageshack, photobucket, oder wo ihr eure neuen Überschriften hochgeladen habt: Kopiert den “Direct Link” und fügt ihn im obigen Code ein.

Ja, das war’s schon – bei jedem Widget wiederholen, save template klicken et voilà 🙂 Ich hoffe, das hat jetzt etwas geholfen und einige Fragen beantwortet!

Eure HTML-Tweaking Mutti,

You May Also Like

12 comments

Reply

Danke für den tollen Tipp. Ich hab mich schon eine Weile gefragt wie das denn funktioniert.. 😀

Reply

Kleine Info von mir – ich habe es gerade ausprobiert und festgestellt, dass es mit dem Follower-Gadget NICHT funktioniert. Man kann es zwar einfügen, aber das Bild erscheint nicht.

Ebenfalls heißt bei mir der Begriff für die Suche

Hoffe das ist noch hilfreich für den ein oder anderen Nachbauwilligen!

LG
Pussybat

Reply

@RoxyGerne!

Reply

@PussybatDas stimmt durchaus, mir ist das auch bewusst 😉
Für solche Gadgets, die automatischen Inhalt haben, empfiehlt es sich, den Titel im Widget (unter Layout) zu löschen und die gewünschte Grafik darüber mit einem Image oder HTML Widget einzusetzen 😉

Reply

Ich wollte letztesn meine Sidebar auch etwas persönlicher gestalten^^ Aber da ich so ein HTML-Trottel bin, habe ich einfach Bilddateien erstellt und dann als Gadget “Bild” hochgeladen 😀 Sieht ja aber genauso aus.. wenn ich mal Zeit habe, werde ich mich vielleicht dieser Anleitung hier widmen und mir Mühe geben, etwas professioneller zu sein^^

Reply

Danke für den Tipp! Das werde ich bestimmt auch bald mal anpassen 🙂

Reply

@GodfrinaKomischerweise finde ich diesen Bereich bei mir nicht.. Ich hab verschiedene Dinge in die Suche eingegeben und sogar die Zeile “class=’title’>” gibt’s nicht.. ääh.. seltsam 😀

Expand Widget Template hab ich natürlich angeklickt.

Reply

@RoxyWas ergibt denn die Suche nach Sidebar?
Die Anführungszeichen hast du aber nicht bei der Suche eingegeben, oder?

Reply

Gibt auch kein Ergebnis, wenn ich nach “sidebar” suche.. Echt seltsam.. Nein, die Anführungszeichen habe ich nicht mit eingegeben 😉

Reply

@RoxySuch mal nach einer deiner Überschriften. Dass die Sidebar nicht vorhanden wäre, ist einfach nicht möglich.

Reply

DANKE! Mal sehen, ob ich es hinbekomme, so einfach sieht es gar nicht aus, ich werde es aber testen.

Reply

@MaegwinDoch doch, ganz einfach, kriegt jeder hin!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge