Header Ads

Ikon före bloggpost-rubrik


Ibland är det de små detaljerna som gör skillnad. En enkel liten ikonbild före eller efter din bloggs inläggsrubriker kan lyfta din bloggs utseende och vara en detalj som gör att dina besökare minns dig lite extra.
Att lägga till själva bilden är inte svårt, men att välja ut den - det kan ju vara desto knepigare!

Här visar jag hur det kan se ut, både med varianten före och efter titeln. I de nya mallarna hamnar ikonen direkt efter titeln, men i de äldre designmallarna lägger den sig ute till höger över ditt inlägg.






GÖR SÅ HÄR


Börja med att välja ut den ikon du vill ha. Det finns många sidor som har fina, gratis ikoner och här har jag fyra stycken du kan börja att kika på. Hittar du inte vad du söker där kan du googla vidare på uttrycket "free icons".



Det du behöver tänka på är att bilden inte får vara för stor. I exemplen ovan har jag använt ikoner som är 32x32px (pixlar). De är lagom stora med tanke på den storlek jag har på rubrikerna, har du större rubriker kanske du vill ha en större bild. På sidorna jag länkade ovan kan du antingen söka på rätt storlek direkt eller så väljer du när du ska ladda ner din bild.

Finns din bild inte i den storlek du vill ha? Då kan du använda t.ex. Picresize för att förminska den.

När du har kommit så här långt är det dags att ladda upp din bild på nätet för att få en bildlänk. Kanske har du redan skaffat testblogg att ha som bildgalleri, då använder du den. Annars kan du använda någon av de sidor jag länkar till längst ner till vänster här på Fixabloggen, nere i sidfoten.

Ladda upp din bild och håll fliken öppen för att kunna hämta din bildlänk alldeles strax.


I MALLEN


Nu är det dags att lägga in koden i din mall. För att göra det går du till Tema i din bloggs adminpanel och klickar på knappen Redigera HTML.

Beroende på vilken mall du har kan du behöva öppna själva stilmallen. Om du har den här taggen du ser på bilden nedan ska du klicka på pilen, då visas koden som finns dold där.
De allra nyaste mallarnas stilmall är redan öppen så med dem kan du hoppa över det här steget.





När du öppnat mallen trycker du på Ctrl och F (Cmd och F för Mac) för att få fram en sökruta. I den fyller du i </b:skin> och trycker sen på Entertangenten för att söka. Du kommer då direkt till rätt plats  för att klistra in den nya koden i din mall.




På raden innan  ]]</b:skin>  ska du klistra in koden du får nedan. I den ska du, där det står https://bildlank.png, klistra in din egen bildlänk som du nyss skapat.






Klicka på knappen Förhandsgranska tema innan du spar. Är du inte nöjd kan du då bara klicka på Återställ ändringar (eller själv radera koden) så har inget ändrats permanent.



KODEN


Nu är det dags att titta lite närmre på själva koden och vilka ändringar du ev. kan behöva göra.

Om du använder någon av de äldre designmallarna, Enkel, Bildfönster, Häftigt Ab, Vattenstämpel etc är det den här koden du ska använda.

Ikon före Inläggsrubriken:

h3.post-title.entry-title:before {
content: "";
display: block;
background: url(http://bildlank.png) no-repeat;
width: 32px;
height: 32px;
float: left;
margin: 2px 6px 0px 0px;
}


Ikon efter inläggsrubriken:

h3.post-title.entry-title:after {
    content: "";
    display: block;
    background: url(http://bildlank.png) no-repeat;
    width: 32px;
    height: 32px;
    float: right;
    margin: 0px 6px 15px 20px;
}


Om du däremot hör till dem som bytt till en av de nya designmallarna, Contempo, Soho, Emporio eller Anmärkningsvärt behövs lite längre kod eftersom den första delen styr ikonen på bloggens inläggslista (startsidan) och den andra delen styr hur det ser ut när man öppnar ett inlägg.
Du kan välja att lägga till båda delarna eller bara den ena, beroende på vad du väljer att ha och vill du kan du använda olika bilder.

Tänk på att rubrikerna kan ha olika storlek på startsidan och i ett öppnat blogginlägg så du kan behöva justera marginalerna för bilden.

Obs! I de här mallarna hamnar bilden inte längst ut till höger som på bilden ovan om du väljer alternativet efter inläggsrubriken, utan precis intill den.


Ikon före inläggsrubriken:

/* Titel på startsidan */
.post-title:before {
    content: "";
    display: block;
    background: url(http://bildlank.png) no-repeat;
    width: 32px;
    height: 32px;
    float: left;
    margin: 3px 0px 0px 0px;
}

/* Titel på öppnat inlägg */
h3.post-title.entry-title:before {
    content: "";
    display: block;
    background: url(http://bildlank.png) no-repeat;
    width: 32px;
    height: 32px;
    float: left;
    margin: 0px 6px 15px 0px;
}


Ikon efter inläggsrubriken

/* Titel på startsidan */
.post-title:after {
    content: "";
    display: block;
    background: url(http://bildlank.png) no-repeat;
    width: 32px;
    height: 32px;
    float: right;
    margin: 8px 0px 0px 20px;
}

/* Titel på öppnat inlägg */
h3.post-title.entry-title:after {
    content: "";
    display: block;
    background: url(http://bildlank.png) no-repeat;
    width: 32px;
    height: 32px;
    float: right;
    margin: 3px 0px 0px 20px;
}


I koden hittar du först den blåmarkerade http://bildlank.png. Här ska du självklart klistra in din bildkod.

Width och height som är rödmarkerade är storleken du har på din bild. Kanske har du valt en annan storlek än 32px, då ska du ändra här.

Det som kan vara svårast är att få bilden precis dit du vill. Genom att ändra i siffrorna i den grönmarkerade margin kan du styra bildens placering. Det finns fyra siffror och de styr varsin riktning.
Tänk dig att din bild ligger i en ruta och varje siffra puttar bilden bort från kanten från sitt håll.
Den första puttar bilden nedåt, nästa puttar från höger, den tredje siffran puttar bilden uppåt och den sista puttar från vänster.

Siffrorna styr alltså medsols, den första börjar uppifrån (kl 12), sen från höger (kl 3), nedifrån (kl 6) och sist från vänster (kl 9)


Öka på den siffra från det håll du vill ha avståndet ifrån.
Krånglig? Ställ din fråga här nedan i kommentarerna så hjälper jag dig!

Länka gärna till din blogg här när du är klar! Lycka till!


No comments

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