17.6.17

DIY: HTML/CSS voor blogger • foto past mooi in post

We kennen allemaal het probleem dat blogger enkel de opties extra groot-groot-normaal-klein heeft om je foto te vergroten/verkleinen. Het gevolg hiervan is is dat je foto niet mooi in je post past, dat er ruimte vrij is. Ik ga je leren hoe je je foto mooi in je post kan laten passen.



Eerst en vooral moet je weten hoe breed je ruimte is van je post: dit kan je berekenen door de breedte van je gehele blog - de breedte van je rechterzijbalk te doen. De uitkomst hiervan zal ongeveer de breedte van je post zijn. Bij mij is dit 575 px.

Nu ga je naar thema -> aanpassen -> CSS (Sla voor de zekerheid altijd eerst je sjabloon op!)
Bij CSS plak je deze code, je past de 575 px aan naargelang de breedte van jouw post:

.post-body img{
max-width: 575px;
max-height: auto;
box-shadow: none;
border: none;}

Als je nu een foto in je post toevoegt, klik je op de afbeelding en selecteer je links en origineel formaat. Als je op voorbeeld drukt dan zie je dat je afbeelding mooi past in de post. Ook is het belangrijk dat je je tekst uitlijnt, zo zal tekst en afbeelding mooi evenwijdig staan.



Als jullie nog vragen hebben over HTML of CSS, aarzel dan niet om een reactie achter te laten!




5 opmerkingen :

  1. Superhandig! Heb hier een paar dagen geleden nog over nagedacht. Maar ben niet zo'n kei in html en css. Maar met dit moet het lukken! :D

    BeantwoordenVerwijderen
  2. Ik kende hem al, maar aah leuk dat je dit weer gaat doen! ((:

    BeantwoordenVerwijderen
  3. Deze kende ik ook al, maar alsnog ontzettend handig!

    BeantwoordenVerwijderen
  4. Superhandig dit, kan niet wachten op meer posts hihi ;)

    BeantwoordenVerwijderen