Icon vor dem Posttitel
Heute zeige ich euch, wie man ein kleines Bildchen vor dem Posttitel einfügen kann! Und dafür braucht ihr gar nicht so viel Aufwand 🙂
Schritt 1 – Das Bild
Fangen wir mit dem Bild an. Ihr könnt euch auch selber eins erstellen, sie sollte allerdings die Größe 15x15px (darf auch etwas mehr sein) haben. Alle anderen folgen mir auf IconArchive.com oder auf eins eurer Wahl, wenn ihr noch bessere kennt 🙂
Dort schaut ihr nach einem Icon, das euch gut gefällt. Wenn ihr eins habt, klickt ihr rechtsklickend auf PNG (Egal welche Größe) und dann auf “Link speichern unter…”
Schritt 2 – Bildgröße optimieren
Jetzt muss die Größe abgestimmt werden. Entweder macht ihr das mit dem Bearbeitungsprogramm eures Vertrauens, wenn der das kann, oder ihr lädt es bei Photobucket oder Picnik (es gibt bestimmt noch mehr) hoch, wo ihr dann die Bildgröße auf 15x15px verkleinern könnt. Ich habe es mit Photobucket gemacht!
Schritt 3 – Einfügen
Ihr öffnet Design –> HTML bearbeiten und sucht nach h3.post oder h3.post-title (wie gewohnt mit STRG+F)
Darüber fügt ihr diesen Code ein:
.post h3 a, .post h3 strong {
background:url("http://www1.blogblog.com/harbor/icon_lighthouse.gif") no-repeat left .15em;
display:block;
padding-left:20px;
text-decoration:none;
color:#336688;
font-weight:normal;
}
Auch wenn ich kein Posttitel oder so findet, sucht auf jeden Fall h3, denn das ist immer da!
Schritt 4 – Bild-URL einfügen
Und danach speichern nicht vergessen 😀
Und schon habt ihr das Werk vollendet 🙂 Wünsche euch viel Spaß damit 😉
Betty
1. February 2011 at 17:00Vielen Dank für die tolle Anleitung (:
Ich habe euch jetzt auf meiner Seite verlinkt ♥
Tatwiels
1. February 2011 at 17:07Hallo
Habt ihr schon mal eine Anleitung gemacht wie man bei Blogger Bilder mit Links hinterlegen kann. Also wenn ich auf ein Bild klick in einem Post komm ich dann auf die Seite die ich als Link hinterlegt habe.
Wer echt toll wenn ihr das mal machen würdet.
Lieber Gruß
Nadine
2. February 2011 at 17:29Und wohin muss es bei der neuen Vorlage? Geht das damit überhaupt?
LG, Nadine
mira
2. February 2011 at 17:33@nadine: klar geht das auch, einfach über post.title, steht auch im Tut ^^
Elster
7. February 2011 at 12:05bei mir gehts leider nicht 🙁
Lg Elster
Kim Barbie
10. February 2011 at 12:03Ihr hattet doch früher mal ein anderes Tutorial dafür oder? Ich hab das vor ner Weile mal gemacht, mit nem anderen Tutorial aber.. jetzt habe ich meinen Post-Titel mittig gemacht, aber der Icon bleibt links.. würde ihn einfach wegmachen, aber cih weiß nicht mehr wie ich ihn überhaupt da hin bekommen habe 😀 könnt ihr mir villeicht helfen, weil ich finde das alte tutorial nichtmehr..
xx
mira
10. February 2011 at 17:23Hey KimBarbie,
Wir haben einen Google-Suchfeld oben rechts eingebaut, gib einfach dort ein, was du suchst, und schon ist es da 😉
Meintest du das hier?
http://copypastel0ve.blogspot.com/2011/01/post-titel-und-datum-zentrieren.html
Lg Mira
Kim Barbie
10. February 2011 at 21:46Ich hab schon euer ganzes Archiv durchgeklickt 😀
Nein das hab ich nicht gemeint. Also das hab ich benutzt um meinen Post Titel zu zentrieren aber das ist nicht das das ich gesucht habe.
Ich hab schon vor ner Weile einen Icon vor dem Post titel eingefügt, auch mit einem Tutorial von euch, aber nicht mit dem hier. Und das Tutorial hab ich gesucht, weil sich dieser Icon nicht mit zentriert und ich ihn deswegen löschen möchte..
Aber ich weiß eben nicht mehr wie ich den Icon dahin bekommen habe, deswegen kann ich ihn auch nicht wegmachen 😀
blonder Engel
16. February 2011 at 18:05GEILES TUTORIAL! YAAAAAAAAAY
Hat geklappt. die seite ist der hammer! ehrlich!
Helen
15. March 2011 at 12:41Vielen Dank für das Tutorial! 🙂
flowerTeam
16. October 2011 at 10:28Kann man das auch so machen, wenn man einen Gemeinschaftsblog hat, dass man immer auswählen kann, welches Bild man nimmt, je nach dem, wer von dem Gemeinschaftsblog das geschrieben hat? Also dass man so auf Anhieb erkennt, wer das jetzt geschrieben hat.
Lulu
20. October 2011 at 16:32Bei mir klappt es leider auch nicht :/
Lulu
20. October 2011 at 16:33.
Lee
5. November 2011 at 20:47wow super Dankeschön! Danach hab ich lange gesucht!
hab euch auch al verlinkt! eure Seite ist super!!!
wünsche euch ein schönes Wochenende
Melody
5. January 2012 at 23:51Hey,
die Idee mit dem icon finde ich sehr gut und hatte es auch gleich ausprobiert. Allerdings wurde in dem Tutorial nicht erwähnt, dass man die HTML-Vorlage vorher speichern sollte, was bei bei einem Anfänger wie mir echt blöd sein kann. Ich wollte den Icon wieder löschen und habe dadurch einiges an den Posttiteln geändert. Jetzt muss ich alles wieder neu einrichten..
Deswegen für alle, die dies zum ersten mal machen: Vorlage vorher abspeichern !!!!
beautysunshine
20. September 2012 at 19:56bei mir klappt das nicht 🙁
deNani
29. September 2012 at 9:24bei mir wird er nur zur Hälfe angezeigt… was kann ich da machen? bitte um hilfe! tolles tutorial!
Vanni
11. November 2012 at 10:33Bei mir klappt das irgendwie nicht, anstatt das der Blogtitel normal orange ist, ist er jetzt blau und er rückt nur ein stück nach rechts, das Bild erscheint aber nicht :/
Lisa
22. June 2013 at 18:00Geht mir auch so. :/
Ayumi
2. February 2013 at 10:11Also bei mir verändert sich leider rein gar nichts, wenn ich das in den html-code einfüge.
Dachte dann, dass ich es vielleicht beim Vorlagen-Designer einfach unter CSS einfügen kann.
Hat aber auch gar nichts verändert.
Habt ihr Tipps woran es liegen kann?
Ayumi
2. February 2013 at 17:37Ah hab es doch allein rausgefunden. Habe es über dem falschen h3 eingefügt!
Sooyoona
15. March 2013 at 10:17Das ist ein echt gutes Tutorial und hat auch soweit geklappt und das Bild ist zuerst sichtbar. Nur wenn ich den Post dann anklicke, verschwindet das Bild wieder. :-O
Gaby Martens
24. March 2013 at 11:36Hi, tolle Anleitung. Aber wie kann ich das machen, wenn ich das Bild, welches ich verwenden möchte auf meinem Computer gespeichert habe.
Vielen Dank.
blackshine
16. May 2013 at 20:54Du musst es zuerst hochladen, z.b. auf Picasa (wenn du einen Google-Blog hast, bist du da automatisch angemeldet) oder auf Tinypic
feelgood
17. April 2013 at 8:53Super Tutorial, an sich klappt es auch einwandfrei, jedoch befindet sich mein title mittig & der kleine Icon ist nur links! Ich habe es schon mit text-align: center; probiert habe… Könnte mir da jemand helfen? 🙂
Fräulein Mimi
14. September 2013 at 12:05Halli hallo!
Ich habe ein Problem und kann es nicht selbst lösen. Wenn ich das icon einfüge liegt der Text darüber (ist ja logisch, da ich es als Hintergrundbild eingefügt habe). Gibt es eine Möglichkeit automatisch geschützte Leerzeichen vor die Headline einzufügen? (oder etwas in der Art, damit die Headline nicht mehr über den Icon liegt?
Vielen Dank schon mal für eure Hilfe!
Grüßle,
Mimi
lovemira
14. September 2013 at 17:56Schau mal bei Schritt 3 – da kannst du bei Padding-left:…px; den Wert ändern, dann schiebt es sich weiter nach rechts 😉
Sabrina Wortmann
6. January 2014 at 19:59Hallo! Super Tutorial!
Ist es auch möglich, bei Blogger die Icons nur bei bestimmten Labels einblenden zu lassen? Also so wie ihr das jetzt auch habt mit den Kategorien?
Danke und Liebe Grüße 🙂
Sabrina
tinicook
22. November 2014 at 16:46Hi, das hat super geklappt. Danke. Eine Frage: Das Icon erscheint nun auch in den Bubbles (für die Kommentare). Kann man das irgendwie unterbinden? Danke, LG tinicook
SarahAngelina
12. December 2015 at 4:42Hallo ich möchte über meinem Posttitel das erste Bild haben. Gibt es da irgendeine Möglichkeit dass so hinzubekommen? Wäre super lieb wenn mir jemand eine Lösung sagen könnte! <3 das ist mein blog: sarah-angelina.blogspot.com.au