Tech thursday: Så kodar du ett sponsor-meddelande i CSS

Något som många bloggare tampas med är hur man ska annonsmärka sina inlägg på ett sätt som ser bra ut på såväl datorn som mobilen. Det måste också vara tillräckligt utmärkande men samtidigt passa in i bloggens design. I det här inlägget tänkte jag visa ett sätt du kan göra på!

css-sponsormeddelande-blogg

Att göra ett sponsormeddelande i form av en bild är en lösning, problemet blir då att budskapet inte blir tydligt för de som använder talsyntes och att bilden kan förstöra hur inlägget visas i RSS-läsare som Bloglovin.

Jag har därför landat i att den smartaste lösningen är att göra en särskilt CSS-stil för sponsormeddelanden. För att meddelandet ska skilja sig från övrig text även i Bloglovin-appen (där CSS inte visas) och andra RSS-läsare så ska vi styla ett blockquote-element.

» Läs mer: Rekommendationer: Annonsmärkning av samarbeten på blogg, YouTube och Instagram

Så här kommer vårt färdiga resultat att se ut:

I webbläsaren på datorn

css-sponsormeddelande-2

På mobilen

css-sponsormeddelande-11

I Bloglovin-appen

bloglovin-rssOm du inte bryr dig om hur det ser ut i Bloglovin-appen/RSS-läsare och vill ha ett lite snabbare fix kolla i slutet på inlägget hur du stylar en vanlig div-tagg.

Mina instruktioner utgår från om du har en egen installation av WordPress men oavsett vilken plattform du använder så kan du antagligen göra detta. Det enda kravet är att du har tillgång till din stilmall/style.css-fil.

Gör så här:

1. Skapa ett nytt utkast till ett blogginlägg

Vi kan jobba med vår stil i ett nytt inlägg som inte är publicerat än för att se hur det kommer se ut live på bloggen utan att det syns för våra besökare.

2. Gör ett blockqoute-element

Först ska vi kolla hur blockqoute-elementet ser ut just nu i ditt tema. Skriv in texten:

Det här inlägget är ett samarbete med Företag X

Markera och välj ”citat”-knappen.

css-sponsormeddelandeOm du inte har det alternativet slå över till ett läge där du ser källkoden och skriv:

<blockquote> Det här inlägget är ett samarbete med Företag X </blockquote>

 

css-sponsormeddelande-10

Förhandsgranska inlägget – nu ser du hur blockquote-elementet stylas av ditt tema.

css-sponsormeddelande-9

Om du använder chrome kan du använda tricket jag visade i min introduktion till CSS för att se stilarna. Bara högerklicka på ditt sponsormeddelande och välj ”inspektera”.

3. Lokalisera CSS-koden för blockqoutes i ditt tema

Öppna en ny flik och gå till stilmallen för ditt bloggtema. På WordPress så finns det om du går till: Utseende > Redigerare

css-sponsormeddelande-8

Om du inte använder ett child theme: Kolla i listan till vänster och scrolla längst ned till Stilmallar.

Om du använder ett child theme: Använd rullisten högst upp till vänster och välj ditt föräldratema. Scrolla längst ned till Stilmallar.

css-sponsormeddelande-7
Klicka på stilmallen som heter style.css.

Klicka i fönstret med koden och använd kortkommandot ctrl+F (PC) eller cmd+F (Mac) för att söka i texten. Skriv ”blockquote” i sökrutan för att få fram rätt segment i koden.

Om du använder WordPress: Kopiera hela den kodbiten för blockquotes.

css-sponsormeddelande-6

Om du inte använder WordPress och bara kan skriva in CSS-kod på det här stället (alltså saknar ett ”custom CSS”-alternativ eller liknande) stanna kvar här, klistra in koden direkt under där du kopierade och hoppa över nästa steg.

4. Klistra in koden på rätt ställe

Om du har ett Child theme:

Jag har tidigare skrivit om Child themes i WordPress och varför du borde ha ett. Om du har det så ska du nu öppna stilmallen för ditt childtheme i ditt kodskrivarprogram eller i textredigeraren. Ta för vana att ta en kopia av filen innan du redigerar lokalt på din dator så du kan gå tillbaka om du råkar förstöra något! (Du kan även öppna stilmallen direkt i WordPress via Utseende > Redigera som vi gjorde ovan men det är inte att rekommendera! Använd hellre ”Ändra CSS”-alternativet om du har ett child theme men inte koll på FTP.)

Om du inte har ett Child theme eller använder en annan plattform:

För WordPress får vi använda Utseende > Ända CSS.

css-sponsormeddelande-5

Om du använder en annan plattform leta efter ett alternativ som heter ”Custom CSS” eller liknande.

Så – klistra nu in koden som du kopierade här.

5. Gör en ny klass för ditt sponsormeddelande

Det vi vill göra nu är inte att ändra på stilen för citat generellt på din blogg. Det vi vill göra är att skapa en ny klass som vi ska använda enbart på våra sponsormeddelanden och tala om för CSS-mallen att dessa citat ska ha ett helt annat utseende än de vanliga. Läs mer om klasser i min introduktion till CSS.

Därför gör vi nu en blockquote-klass genom att lägga till .sponsor (om vi vill kalla vår klass så) efter blockquote i koden vi precis klistrat in. Då talar vi om för webbläsaren att när vi har ett blockquote-element med klassen ”sponsor” så vill vi att det ska ha en särskild stil.

css-sponsormeddelande-4

6. Styla ditt sponsormeddelande

Nu kan vi ändra på koden för att få vårt sponsormeddelande att se ut som vi vill. Beroende på hur mycket ditt nuvarande tema fixar med ditt blockqoutes-element så kan det här ta olika lång tid.

Jag vill att mitt meddelande ska ha en ljusgrå bakgrund så jag skriver till ”background” med värdet ”#d9d9d9”. För att få hjälp att hitta hex-färger att använda kolla W3 Schools hex color picker.

Allt som du inte vill ha, t.ex. indrag (margin), ramlinje (border) osv kan du oftast ta bort genom att sätta värderna för dessa properties till 0 eller none.

Ofta är texten i blockquotes satta till kursiv med font-style: italic. Den kan du ändra till ”normal” om du inte vill ha kursiverad text.

Eftersom blockquote-elementet kommer läsas in först innan din kod så måste du ändra alla värden men ha kvar samtliga properties. Är du osäker på vad det är för skillnad på %, px, em, rem? Läs på om de olika enheter i CSS på W3 Schools och prova dig fram.

Så här ser min kod ut nu:

blockquote.sponsor {

background: #d9d9d9;
border: 0 solid #1a1a1a;
border-left-width: 0;
color: #686868;
font-size: 80%;
font-style: normal;
text-align: center;
line-height: 1.4736842105;
margin: 0 0 1.4736842105em;
overflow: hidden;
padding: .5em;
}

 

7. Kolla hur det ser ut

Tryck på ”Spara stilmall” och gå nu in i utkastet till inlägget som vi skapade i början. Gå till kod-läget för inlägget och skriv in ”class=”sponsor” i blockquote-taggen.

css-sponsormeddelande-3

Tryck sedan på ”Förhandsgranska” för att se hur din nya blockquotes-stil ser ut i verkligheten. Kanske lägg till en bild och lite exempeltext (t.ex. med Lorem ipsum) för att se helheten.

css-sponsormeddelande-2

8. Gå tillbaka till koden och ändra till du är nöjd

Om du ser något som inte funkade som du tänkt gå tillbaka till koden och ändra lite till. Prova dig fram. Använd inspekteraren i Chrome (eller Firefox) för att klargöra vad som läses in och varför något kanske inte funkade som du tänkt.

Om absolut ingenting verkar hända kontrollera att du stavat rätt på blockquote och att du skrivit samma klass-namn både i CSS-koden och koden i inlägget. Kolla så att du inte har glömt ett semi-kolon eller ett vanligt kolon någonstans i CSS-koden.

Lägger ditt tema till ett stort citations-tecken i rutan? Gör så här:

Vissa teman lägger till ett stort citationstecken eller liknande i blockquote-elementet som vi inte vill ha. Detta kan ha gjorts genom att använda :before. Det kan du ta reda på genom att kolla i stilmallen som du kopierade koden från och se om det finns en kod för blockquote:before där.

Det enda du behöver göra för att ta bort den i ditt sponsormeddelande är att under din blockquote.sponsor-kod skriva in följande kod:


blockquote.sponsor:before {
content: none;
}

 

Klart!

Börja använda ditt nya sponsor-meddelande

Så nu när du har ett sponsrat samarbete kan du skriva din sponsortext, markera den som citat, gå in i html/text-redigerar läget och skriv: <blockquote class=”sponsor”>Din text</blockquote>! Enkelt.

Har ditt tema krånglat till det alldeles med blockquotes? Använd div istället!

Det kan vara så att du har otur och ditt tema har gjort det superkrångligt att få ordning på blockquote-elementet. Då kan du bestämma dig för att strunta i om ditt meddelande ser ut som vanlig text i Bloglovin-appen/RSS-läsare och göra så här istället:

1. Gå till UtseendeÄndra CSS eller din stilmall.

2. Gör en ny klass .sponsor och styla den t.ex:

.sponsor {

background: #d9d9d9;
font-size: 80%;
padding: 0.5em;
text-align: center;

}

 

3. Runt ditt sponsormeddelande i text/HTML-läget för inlägget skriv:

<div class=”sponsor”>Detta inlägg är ett samarbete med Företag X</div>

Överkurs

Om du vill slippa skriva in den lilla snutten class=”sponsor” varje gång så kan du testa att göra ett eget format av ditt sponsormeddelande. Här finns t.ex. en tutorial att testa.

Hur annonsmärker du dina samarbeten? Länka gärna och inspirera andra!

Elin Häggberg

Digital designer, medievetare och journalist. Bloggar om teknik och internet ur ett kreativt perspektiv på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

4 Comments
    1. Bra utveckling tycker jag även om Child themes fortfarande kommer vara snäppet bättre eftersom du har mer kontroll över dina förändringar och även kan göra egna ändringar i functions och templates. Men absolut bra för de som bara vill göra småförändringar precis som du säger!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>