Bildkollage del 2

I det förra inlägget berättade jag hur du kan göra ett färdigt bildkollage att lägga upp på bloggen.
Här hittar du en enkel kod för att få fram samma effekt men med separata bilder.
Självklart hänger det på att du redan sett till att dina bilder alla har samma storlek, annars kommer din bildruta inte att se så bra ut.
Här ovan blir bildernas ramar dubbla eftersom jag redan har en ramkod inlagd, du kan självklart radera den del som ligger i koden nedan.

Gå till inläggsrutan där du skriver ditt blogginlägg och välj Redigera HTML.
Klistra in nedanstående kod och fyll i dina bildadresser.

Avsluta med att börja skriva något ord i meningen du ska ha under dina bilder för att placera musmarkören rätt. Växla sedan tillbaka till skriv-läget.
Om du inte skriver in något (det räcker med en bokstav) kan det bli svårt att få musmarkören dit du vill efteråt.

 

Du kan byta färg på ramen genom att byta bakgrundsfärgen (background: #ffffff; ) och den tunna yttersta kanten (border: 1px solid #f2f2f2;)

<center>
<table border="0"><tbody>
<tr>
<td style="background: #ffffff; border: 1px solid #f2f2f2; padding: 10px;"><img src="http://bildadress" /></td>
<td></td>
<td style="background: #ffffff; border: 1px solid #f2f2f2; padding: 10px;"><img src="http://bildadress" /></td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td style="background: #ffffff; border: 1px solid #f2f2f2; padding: 10px;"><img src="http://bildadress" /></td>
<td></td>
<td style="background: #ffffff; border: 1px solid #f2f2f2; padding: 10px;"><img src="http://bildadress" /></td>
</tr>
</tbody></table>
</center>

Ett tips, ju mer du växlar mellan html och skrivläge, desto längre ner hoppar din bildkod. Det här är Blogspots beteende och inget som koden skapar. Radera helt enkelt tomrummet ovanför koden så hoppar bilderna upp på plats igen.

Att bygga kod med tables är inte så vanligt längre, men för tabell-liknande små stycken är det ett enkelt sätt att få resultat. Det finns förstås många nya, mer praktiska och framförallt funktionsfyllda metoder, men den här gången har jag valt tables.

 Ps, för att radera bildernas ramar - radera  style="background: #ffffff; border: 1px solid #f2f2f2; padding: 10px;"