Tipps & Tutorials, tutorial

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 😉

30 Comments

  1. Betty

    1. February 2011 at 17:00

    Vielen Dank für die tolle Anleitung (:
    Ich habe euch jetzt auf meiner Seite verlinkt ♥

  2. Tatwiels

    1. February 2011 at 17:07

    Hallo
    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ß

  3. Nadine

    2. February 2011 at 17:29

    Und wohin muss es bei der neuen Vorlage? Geht das damit überhaupt?
    LG, Nadine

  4. mira

    2. February 2011 at 17:33

    @nadine: klar geht das auch, einfach über post.title, steht auch im Tut ^^

  5. Elster

    7. February 2011 at 12:05

    bei mir gehts leider nicht 🙁
    Lg Elster

  6. Kim Barbie

    10. February 2011 at 12:03

    Ihr 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

  7. mira

    10. February 2011 at 17:23

    Hey 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

  8. Kim Barbie

    10. February 2011 at 21:46

    Ich 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 😀

  9. blonder Engel

    16. February 2011 at 18:05

    GEILES TUTORIAL! YAAAAAAAAAY
    Hat geklappt. die seite ist der hammer! ehrlich!

  10. Helen

    15. March 2011 at 12:41

    Vielen Dank für das Tutorial! 🙂

  11. flowerTeam

    16. October 2011 at 10:28

    Kann 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.

  12. Lulu

    20. October 2011 at 16:32

    Bei mir klappt es leider auch nicht :/

  13. Lee

    5. November 2011 at 20:47

    wow super Dankeschön! Danach hab ich lange gesucht!
    hab euch auch al verlinkt! eure Seite ist super!!!
    wünsche euch ein schönes Wochenende

  14. Melody

    5. January 2012 at 23:51

    Hey,

    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 !!!!

  15. beautysunshine

    20. September 2012 at 19:56

    bei mir klappt das nicht 🙁

  16. deNani

    29. September 2012 at 9:24

    bei mir wird er nur zur Hälfe angezeigt… was kann ich da machen? bitte um hilfe! tolles tutorial!

  17. Vanni

    11. November 2012 at 10:33

    Bei 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 :/

    1. Lisa

      22. June 2013 at 18:00

      Geht mir auch so. :/

  18. Ayumi

    2. February 2013 at 10:11

    Also 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?

    1. Ayumi

      2. February 2013 at 17:37

      Ah hab es doch allein rausgefunden. Habe es über dem falschen h3 eingefügt!

  19. Sooyoona

    15. March 2013 at 10:17

    Das 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

  20. Gaby Martens

    24. March 2013 at 11:36

    Hi, tolle Anleitung. Aber wie kann ich das machen, wenn ich das Bild, welches ich verwenden möchte auf meinem Computer gespeichert habe.
    Vielen Dank.

    1. blackshine

      16. May 2013 at 20:54

      Du musst es zuerst hochladen, z.b. auf Picasa (wenn du einen Google-Blog hast, bist du da automatisch angemeldet) oder auf Tinypic

  21. feelgood

    17. April 2013 at 8:53

    Super 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? 🙂

  22. Fräulein Mimi

    14. September 2013 at 12:05

    Halli 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

    1. lovemira

      14. September 2013 at 17:56

      Schau mal bei Schritt 3 – da kannst du bei Padding-left:…px; den Wert ändern, dann schiebt es sich weiter nach rechts 😉

  23. Sabrina Wortmann

    6. January 2014 at 19:59

    Hallo! 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

  24. tinicook

    22. November 2014 at 16:46

    Hi, 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

  25. SarahAngelina

    12. December 2015 at 4:42

    Hallo 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

Leave a Reply to Kim Barbie Cancel