Styr enskilda gadgets med smart liten kod!

Ibland vill man ju t ex ändra avstånd eller liknande på enskilda gadgets. Detta kan man fixa enkelt genom att lägga till en liten CSS-kod för enbart den gadgeten!

Först måste vi ta reda på den aktuella gadgetens id. Det gör man lättast  genom att använda webbläsaren Google Chrome.
I detta inlägg kan du även läsa mer om hur man kan använda Google Chrome om man är intresserad av koder.

I webbläsaren Google Chrome går vi till Layout. Högerklicka och klicka sedan på
Granska Komponent.

Efter att ha klickat på Granska Komponent, ser det ut ungefär som på bilden nedan. Då letar vi efter id=. 

När vi har hittar det, testar vi att det är rätt genom att hålla musen över den. Är det rätt så blir gadgeten blå.

I detta fall högerklickade jag på bloggrubriken, sedan granska komponent, och gjorde en "mouse over" på id="Header1" - som blev blå.

Nu vet vi alltså gadgetens id. 

Tänk på att när vi nu granskar källkoden, så står det te x id="Header1", men det är bara det mellan " " (alltså  Header1) som är id-namnet. 

Var också noggrann med att om något står med storbokstav, så ska det vara storbokstav!

Vill du nu lägga till en kod för just denna gadgeten i din bloggs kodmall, gör du så här:

Gå till Mall - Redigera HTML - Fortsätt.

Alldeles ovanför 

]]></b:skin>

kan du sedan lägga in koden.

Och koden som du lägger in ser ut så här:

#DinGadget {
Valfritt;
}

DinGadget byter du ut mot den aktuella gadgetes id. 

Valfritt byter du ut mot det du vill fixa till, t ex padding och margin om det är avstånd eller marginaler du vill ändra. Eller kanske 

text-align: center; 

om du vill centrera en text.

Detta är en smart liten kodsnutt att komma ihåg och testa sig fram med.

Men glöm inte att först göra en back up på din kodmall om du är osäker!