Header Ads

Ikon brevid inläggsrubriken

Jag skrev tidigare (för två år sedan) om hur du kunde lägga till en ikonbild brevid din inläggsrubrik, men eftersom Blogger har uppdaterat med nya mallar är det dags att uppdatera med ny kod som fungerar  i de nya mallarna.

Vill du lägga till en bild brevid dina inläggsrubriker?
Gör då så här:


Använder du det gamla gränssnittet (det beiga)? Gå då till Design - Malldesigner


Om du använder det nya, vita gränssnittet, gå då till Mall - Anpassa



I Malldesignern under filken Avancerat - Lägg till CSS lägger du till följande kod:



h3.post-title a {
background: url('http://din-bildadress') no-repeat ;
padding-left: 30px;
}

Byt ut "din-bildadress" mot din bilds adress.
Tänk på att du inte kan ha en stor bild om det ska passa in brevid din rubrik, välj en smiley eller en liten bild.

18 comments:

  1. Tack =) Lite svårt att hitta tillräckligt små bilder bara - hade velat ha en rosa stjärna men fick nöja mig med en gul =)

    ReplyDelete
  2. Jag kikade in på din blogg med en länk till en rosa stjärna ;-)

    ReplyDelete
  3. Tusan så många tack =) Jättegulligt av dig!

    ReplyDelete
  4. Tack!
    Men jag lyckades faktiskt få in en STOR bild, som jag sedan kunde skriva bredvid (se andra inlägget uppifrån, dec 2011).
    Men jag lyckades inte med samma sak i slutet av inlägget, dvs skriva bredvid bilden - trots att det är samma bild, som jag roterat i Paint!
    Har du något bra förslag på hur man kan fixa detta? Bilden har jag fått av BABBI.

    ReplyDelete
  5. Jag försöker och jag försöker...Jag lyckades i går när jag bara testade. Men idag när jag hittade den bild jag vill ha så går det inte :(. Nu är det ju mycket som krånglar på blogger i dagsläget (många klagar) så det har säkert med det att göra. Det är bara att fortsätta testa! Tack för alla roliga tips vi får, för att snygga till våra bloggar..det är så värdefullt :)

    ReplyDelete
  6. Hej och tack för denna underbara sida, tur att det finns sådana som dig så vi amatörer får lite tips och ideer. Jag har ett problem som jag behöver hjälp med och det kan ligga under detta inlägget.
    Jag vill gjärna ha en liten bild på inläggs rubriken men jag vill även centera den mer, som det är nu så ligger den inte i mitten över första bliden utan mer till vänster. Hur får man den centerad ovanför bilden ??

    Mvh CC

    ReplyDelete
  7. Room of Karma - om jag förstått dig rätt och det är rubriken du vill centrera kan du lägga till den här raden i din kodmall under raden h3.post-title, .comments h4 :

    text-align: center;


    Så här alltså:

    h3.post-title, .comments h4 {
    font: normal normal 22px Century Gothic, Geneva, sans-serif;
    margin: .75em 0 0;
    text-align: center;
    }

    ReplyDelete
  8. Kan man lägga in den här koden i HTML istället och i så fall var gör jag det(ikonbild brevid inläggsrubrik)? Det funkar inte att lägga den i avancerat css.

    ReplyDelete
  9. Babbi - du kan lägga den precis före ]]><-/b:skin-> (ta bort de två - tecknen, jag var tvungen att lägga dit dem, annars "äter bloggen upp koden")

    Du kan alltid lägga css-kod där om det inte fungerar i Malldesignern. Det är konstigt för ibland fungerar det med Malldesignerns Css-del i vissa bloggar och inte i andra. För mig går det bra att lägga den här koden där, tydligen skär det sig för dig. Tanken med den där rutan är bra, men det vore bättre om det fungerade jämt...

    ReplyDelete
  10. Tusen tack..ska genast se om jag kan fixa det. Ja det är synd att det inte funkar enhetligt för alla bloggar...men det är ok om det går att fixa på annat sätt :)

    ReplyDelete
  11. Gick ju bra..men inte på en väns blogg hur jag än försökte. Jag väntar och ser om det dyker upp så småningom.

    ReplyDelete
  12. Tack så hemskt mycket för detta, nu har jag bara 2 små saker kvar innan jag är nöjd som jag hoppas att du kan hjälpa mig med ?

    Jag vill ha ett "mellanslag" efter rubriken, jag tycker att den kommer för nära första bilden så jag vill ha lite luft emellan ?

    Hur får jag med datum rubriken så den oxså centreras ?

    Skälvklar kommer jag att lägga in din ikon på min sida så att fler kommer att hitta denna suveräna sida

    Tack på förhand
    CC

    ReplyDelete
  13. Room of Karma - för att skapa ett mellanrum mellan rubrik och inlägg kan du lägga till margin-bottom, så här. Samma ställe som tidigare och margin-raden kan du lägga under text-align som du la dit. Anpassa avståndet till det du vill ha.

    h3.post-title, .comments h4 {
    font: normal normal 22px Century Gothic, Geneva, sans-serif;
    margin: .75em 0 0;
    text-align: center;
    margin-bottom: 30px;
    }


    När det gäller datumet så behöver du lägga in det först så att jag kan se det utifrån och titta på källkoden för just den delen. Eftersom man kan lägga datum på olika ställen är det bäst att vi utgår från hur det faktiskt ser ut hos dig. ;-) Det blir ju också en text-align:center; men vi måste veta vad stycket heter där det ska ligga.

    ReplyDelete
  14. Hej igen och tack för all hjälp som jag har fått.

    Datumet som jag menade är det som ligger ovanför rubriken, nu syns det till vänster om rubriken och är i mindre text. Det är det det datumet som kommer upp varje gång man lägger upp ett nytt inlägg.

    Mvh CC

    ReplyDelete
  15. Tack så mycket för tipset! Jag är så glad att du hjälper oss med så mycket tips och särskilt tack för att du gör det så tydligt! Det behöver jag som har lätt att snurra till det annars!
    Kraaaaam!

    ReplyDelete
  16. Vet du vilken storlek/upplösning som det ska vara på bilden för att den ska passa? Skulle vara bra att veta om man ska göra en själv :)

    ReplyDelete
  17. Någonstans mellan 20-30px är nog lagom, det beror på hur man vill att det ska se ut i bloggen.

    Upplösningen kan du göra som du tycker med, bilden är så liten att även om du väljer en hög upplösning (kanske 250ppi) påverkar det inte din bloggs laddningstid märkvärt.

    ReplyDelete
  18. Hur får man bort css adressen.? Vill inte ha kvar ikonen.

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------