riggs blogg: bildtrick i blogger... (Uppdaterad)

lördag 23 februari 2008

bildtrick i blogger... (Uppdaterad)

Jag fick frågan hur i he***e jag lyckades få in en bakgrundsbild i en bloggpost.

Uppdaterad: Jag har lagt hela denna anvisning i en PDF-fil HÄR!

Det började med att jag la in bilden som en vanlig bild i bloggposten när jag skrev den. Satt och tittade på inlägget och tänkte "nä, det här är ju en perfekt bakgrundsbild". Jag har ju flera gånger använt färgad bakgrund i bloggen så jag visste ungefär hur jag skulle göra.

Lite trixigt var det, kan jag erkänna, innan jag lyckades googla fram helt rätt kod.

För att göra detta tricks måste man handskriva lite HTML-kod. I blogger klickar du på Edit Html fliken och skriver in koden för hand. Här kommer koden, tänk på att bilden redan måste ligga på nätet och att den upprepas oavbrutet både på bredden och höjden, så det måste vara en bild som är gjord för att användas som bakgrundsbild.

Tänk också på att det inte är hela bloggposten som påverkas, utan bara området mellan den första div-taggen och den avslutande /div-taggen. Du kan därför behöva lägga ett antal radbrytningar mellan den första taggen och textstarten.

Börja med att skriva denna div-tagg som lägger in bilden som bakgrund (byt naturligtvis ut länk/bild.jpg mot adressen till din bild):

Uppdatering: Vill du ha ram runt bilden kompletterar du koden så den bli såhär:

<div style="BACKGROUND-IMAGE: url(http://länk/bild.jpg); border: 2px solid rgb(0, 0, 0)">

(I Firefox radbryts inte kodraden här ovanför, dubbeklicka på texten så hela raden blir markerad och kopiera ut den)

För att texten inte skulle ligga direkt mot kanten (blir inte snyggt) så lade jag till marginaler för texten i en ny div-tagg... Efter lite experiment med olika mått bestämde jag mig för 25 pixlar både till vänster och höger. Så här skriver du den koden:

<div style="MARGIN-LEFT: 25px; MARGIN-RIGHT: 25px">

På samma sätt som man lägger en bakgrundsbild kan man använda en färgad bakgrund. Färgen anges i decimalt RGB-format men ofta är det lättare att hitta önskad färg i hexadecimal form (ex. denna ljusgrå bakgrundsfärg heter i hexform #cccccc. För att få fram decimalformen (204, 204, 204) behövs en decimal till hex RGB konverterare.

<div style="BACKGROUND-COLOR: rgb(204,204,204)">

Tänk på att avsluta det hela med att stänga div-taggarna längst ner i bloggposten!

</div></div>

---
Uppdatering 24/2: I blogger går det att klistra in koden i inläggsmallen så du får den i alla inlägg. Inställningar -> formattering -> mall för inlägg
---
Läs även andra bloggares åsikter om bloggar, bloggtips, bloggdesign

4 kommentarer:

stationsvakt@gmail.com sa...: Du är kungen av bakgrunder.; 23 februari 2008 kl. 23:35
E sa...: Du är min guru. (Och om jag nån gång orkar ska jag läsa hela det här inlägget och lära mig nåt...); 24 februari 2008 kl. 09:18
Anonym sa...: Nä smaken är ju olika och jag tycker mest detta ser ut som skit om du inte tar illa upp.Har sett en del coola bloggar med häftiga bakgrunder och dit hör ju inte denna.

Eric; 24 februari 2008 kl. 09:22
rigg sa...: johnny >> ;)

e >> Ser fram emot det!

eric >> Alla kan ju inte gilla tidlös, klassisk 50-talsdesign när den var som bäst. För mig är annars själva innehållet i en blogg viktigast, inte cool design och häftiga bakgrundsbilder.; 24 februari 2008 kl. 11:34