Header Ads

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;"

5 comments:

  1. Letar efter ditt inlägg om att "svara på kommentarer" men det gick inte att söka. Har du möjlighet att ge mig en länk till det inlägget?
    :-D

    ReplyDelete
  2. Stattinskan - är det det här inlägget du tänker på? http://fixa-din.blogspot.com/2011/08/framhav-dina-svar-i-kommentarer.html

    ReplyDelete
  3. Går det att ha en såndan här "4-bild" som du visade här överst på bloggen där man har skrivit sin "titel" (där jag skrivit "My Life As Josefine") fast med snö istället för regn?!

    Min bloggadress är: http://jossanskrypin.blogspot.com

    Tack på förhand :) Mvh Josefine

    ReplyDelete
  4. Josefin - nej, tyvärr du kan bara ha en bild i din header, inte flera

    ReplyDelete

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