change title background [blog help II]

Einige von euch haben gefragt wie man die Post und Widget-Überschriften mit einer eigenen Grafik hinterlegen kann. In dieser Ausgabe von Frau Müllis kleine Blognachhilfe zeige ich euch wie ich es gemacht habe.

Some of you had asked how I managed to put an image under my post title. Let me show you how….

Zuerst braucht ihr natürlich ein Hintergrundbild. Bitte beachtet das Urheberrecht und die Copyright-Hinweise falls ihr im Internet fündig werdet. Dann müsst ihr das Bild auf einem Server im Netz hochladen. Ich habe meine jolijou Domain bei Host Europe angemeldet. Die gibt es da schon  ab 50 Cent im Monat, also echt günstig. In den FAQ wird ausführlich erklärt wie man sein Bild per FTP hochladen kann und welche Daten ihr dafür braucht.

First of all you need an image of some sort. Make sure to abide by copyright laws if you’re taking something off the internet. Then you need to save your picture somewhere on the internet you can access it later via a direct url. You will need this url later, so save it for future reference. I upload my files using Filezilla, a free FTP-utility.

Zum Hochladen benutze ich Filezilla, ein kostenloses FTP-Programm. Aber falls ihr Dreamweaver oder ähnlich WYSIWYG-Programme habt, geht es auch damit. Die Daten für den FTP-Zugang bekommt ihr bei eurem Webhost. Oder ihr benutzt die zahlreichen Bild-Hosting-Programme im Internet wie Dropbox, Freenet etc.pp. Wichtig ist nur, dass ihr euch die exakte URL eures Bildes merkt. Und zwar mit allem drum und dran, also auch mit dem http: usw. Die braucht ihr nachher, am besten per Mausklick in einem Textbearbeitungsprogramm einfügen, damit ihr später darauf zurückgreifen könnt.

Aber so viel zu den Grundlagen. Jetzt geht’s ans Einfügen. Ich benutze die neue Blogger-Oberfläche. Ihr auch? Falls nicht, stellt mal um, es ist zwar gewöhnungsbedürftig, aber selbst ich habe mich inzwischen daran gewöhnt. Meine Anleitung funktioniert aber auch für die alte Oberfläche.

Now switch to the new dashboard if you haven’t already.

Als nächstes sichert ihr erst mal eure Vorlage indem ihr sie auf eurem Rechner speichert. Nur für alle Fälle, falls etwas schief geht! Das mache ich immer vor jeder Änderung. Dann geht ihr im Blogger-Dashboard auf Vorlage — HTML bearbeiten. Dort kommt eine kleine Warnung, da klickt ihr auf “Fortfahren” (wir haben ja unsere Vorlage gesichert also nur Mut).

First make sure to backup your template. I always do this before I change anything. Then go to template, edit HTML.

Am unteren Browserrand habt ihr nun ein Suchfeld. Dort gebt ihr post h3 (in manchen Templates heißt es h3.post-title) ein. Post h3 kommt öfter vor, die ohne weitere Zusätze vor der Klammer ist die Passage die ihr braucht.

Then look for post h3 or h3.post-title depending on what template you are using. 

H3 ist HTMLisch für Überschrift. Auf Deutsch bedeutet also Post h3 Post Überschrift und regelt das Aussehen der Überschriften (mehr über Überschriften in HTML wer mag hier). Irgendwo zwischen den {} Klammern muss jetzt diese Zeile: background: url(xxxxxxxxx) no-repeat; eingefügt werden, wobei ihr die xxx mit eurer Bild-URL ersetzt.

Somewhere between the {} brackets place this line of code:  background: url(xxxxxxxxx) no-repeat; and substitute the xxxx with the url of your image.

Damit die Grafik ganz zu sehen ist habe ich zusätzlich noch die Zeile line-height: 2em; entsprechend geändert, einfach die Zahl vor em ein wenig erhöhen (einfach probieren bis es passt). Zwischendrin immer mal auf Vorschau klicken und gucken, wenn alles passt, auf veröffentlichen. Fertig!

Auf diese Weise kann man übrigens auch andere Überschriften, z.B. in der Sidebar, ändern. Diese sind oft als H2 o.ä. gekennzeichnet. Einfach mal ausprobieren, das Prinzip kennt ihr ja jetzt.

Now that you’ve got the general drift of this method you could also change the backgrounds of your sidebar headings too. They might be called H2 or something and will be under the sidebar parts of your code. Just be game and fiddle around a bit.

Viel Spaß beim Basteln! Have fun!