Tips | Je lay-out aanpassen in blogger

24.7.13



Ik krijg de laatste tijd heel veel vragen over hoe ik mijn lay-out heb gemaakt. Ik vind het heerlijk om af en toe even lekker met de HTML codes te prutsen, nieuwe menuknoppen te maken of mijn lettertypes aan te passen. Mijn blog is gehost door Blogger, wat ik persoonlijk heel fijn vind werken. Ik hoor vaak dat WordPress beter is, maar het schijnt wel moeilijker te zijn. Blogger vind ik, als je het eenmaal een beetje doorhebt, vrij makkelijk werken. Je kunt alles heel easy aanpassen en zelf je lay-out aanpassen.

Vandaag geef ik een aantal tips om wat dingetjes in je HTML aan te passen zodat je bijvoorbeeld een andere "Read More"-knop kunt toevoegen, je blogtitel gecentreerd kunt krijgen of de afstand tussen foto's kunt vergroten of verkleinen. Allemaal kleine veranderingen, maar het geeft je lay-out nét dat beetje extra.

Voor alle dingen die ik ga laten zien moet je in de HTML van je blog zijn. Deze vind je door in Blogger naar de optie "Sjabloon" te gaan. Je kunt dan kiezen voor "Sjabloon aanpassen" en "HTML bewerken". Je kiest voor die tweede optie. Daarna zul je heel veel cijfertjes en lettertjes zien die je misschien helemaal niets zeggen. Maar geen paniek, het ziet er ingewikkelder uit dan het is!



Blogtitel centreren
In een standaard sjabloon staat de titel van een nieuw artikel meestal links uitgelijnd. Dat heb ik eigenlijk altijd gehad, maar sinds kort heb ik hem gecentreerd staan, wat dus betekent dat de titel in het midden verschijnt.

In de HTML van jouw blog zoek je de volgende code: (Dit vind je door met je cursor in de HTML te gaan staan en vervolgens CTRL + F in te drukken. De code kun je kopieëren en in het zoekvakje plakken en dan op "Enter" te drukken)

]]></b:skin>


Als je deze code hebt gevonden, vervang je deze voor de volgende code:

h3.post-title { text-align:center; }

]]></b:skin>

Je slaat je sjabloon op en daarna is je titel gecentreerd!

Read-More button veranderen
Ook je "read-more button" kun je heel gemakkelijk veranderen. Zo'n read-more button kun je in je artikel instellen door bij het schrijven van een artikel gebruik te maken van de "break-knop". In de afbeelding hieronder is de break-knop omcirkeld. 


Normaal staat er gewoon een tekst die je zelf hebt uitgekozen (bijvoorbeeld "meer lezen" of "read more". Als je hier op klikt, zie je het vervolg van het artikel. Als je in plaats van een normale tekst, gebruik wilt maken van een afbeelding waar je op kunt klikken om de rest van het artikel te lezen (zoals ik ook heb), moet je dat ook weer in de HTML veranderen.

In je HTML ga je op zoek naar de volgende code (Weer CTRL + F gebruiken):

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Als je die code hebt gevonden, verwijder je het roze gemarkeerde deel uit de code. Let op: het aanhalingsteken moet je dus nog laten staan. Vervolgens plak je op de plaats waar zojuist nog de code stond, de volgende code:

<img src="http://image-URL.png"/>

Op de plaats waar nu http://image-URL.png staat, moet je zometeen je afbeelding plakken. Ik heb een afbeelding gemaakt met behulp van Photoshop, je kunt dit ook gewoon in Paint doen of in het gratis programma Photofiltre. Als je een afbeelding hebt gemaakt, moet je die ergens op internet uploaden. Ik maak altijd gebruik van Tinypic. Als je de afbeelding hebt geüpload, krijg je vier verschillende codes zoals je hieronder op het plaatje ziet. 

Je gebruikt de onderste code. Deze plak je op de plaats van http://image-URL.png tussen de twee aanhalingstekens. Daarna sla je je sjabloon op en is je read-more button veranderd!

Ruimte tussen regels vergroten/verkleinen
Je kunt ook de ruimte tussen de regels van je artikel vergroten of verkleinen. Ik vind het zelf altijd prettiger lezen als de regels niet al te dicht op elkaar staan. Dit kun je ook in je HTML veranderen. 
Je gaat in je HTML op zoek naar de code:

line-height

Als het goed is staat hier een getal achter. Bij mij stond er eerst 1.4. Hoe groter je dit getal maakt, hoe meer ruimte er tussen de regels ontstaat. Je kunt het getal verhogen of verlagen, net wat je zelf wilt. Ik heb het nu op 1.55 staan, wat betekent dat er iets meer ruimte is tussen de regels. Je kunt tussendoor op de optie "Voorbeeld van Sjabloon bekijken" klikken, om te kijken of het zo goed is. 

Ruimte tussen foto's vergroten/verkleinen 
Ik heb soms een aantal foto's achter elkaar staan, maar ik vond de ruimte tussen de foto's altijd te groot. Ik ben er achter gekomen hoe je die kunt verkleinen!

In je HTML ga je weer op zoek naar een code, en deze keer is dat:

.post-body img

Als het goed is, staat hieronder de tekst "padding" met een getal erachter. Als je wilt dat er helemaal geen ruimte tussen je foto's komt, typ je hier "0px" in. Ik vind een klein beetje ruimte wel mooi en ik heb "1px" ingevuld. Hoe groter het aantal pixels (px), hoe groter de ruimte tussen foto's wordt. 

Ik hoop dat jullie dit een handig artikel vonden! Als jullie nog meer vragen hebben, laat ze achter in de reacties, dan kan ik jullie daar ook mee helpen!

Deze blogs vind je misschien ook leuk:

76 reacties

  1. Blogger vind ik zelf ook heel fijn werken! Handige tips, denk dat veel mensen hier wat aan hebben :)

    BeantwoordenVerwijderen
  2. Handig! Ik heb zelf dan geen blogger, maar het is wel heel handig :)

    BeantwoordenVerwijderen
  3. Fijne tips, jammer dat ik niet meer op blogger zit haha!

    BeantwoordenVerwijderen
  4. Handig dit :)! Ik ben ook wel vrij handig met HTML en CSS! :)

    BeantwoordenVerwijderen
  5. Heel erg handig artikel! Zelf zit ik ook op blogger en hier heb ik wel wat aan. Liefs

    BeantwoordenVerwijderen
  6. Super handig!

    Gebruik zelf alleen Wordpress. Maar ga toch eens aan de slag (en vooral dingen leren) om zelf eens wat aan te passen. Als dat tenminste ook kan met Wordpress, dat weet ik niet eens ;).

    xx Farah

    BeantwoordenVerwijderen
  7. Ah heel handig, dankjewel! :)
    vooral het centreren van de titel.
    xox

    BeantwoordenVerwijderen
  8. Heel handig! Hiermee ga ik binnenkort eens aan de slag!

    BeantwoordenVerwijderen
  9. Zooo handig! Ik heb ze bijna allemaal gebruikt, als ik op mijn eigen laptop zit ga ik een afbeelding maken voor de read more knop! Echt, 10000 thanks!

    BeantwoordenVerwijderen
  10. Handig artikel, heel leuk dat je het deelt :)!

    BeantwoordenVerwijderen
  11. Heel erg handig! :) Wil je een keertje een artikel plaatsen over hoe je zelf een lay-out ontwerpt? Zou ik heel leuk vinden! ;)

    x liesbeth
    www.aboutfashionliesbeth.blogspot.nl

    BeantwoordenVerwijderen
  12. Handig artikel! Ik heb hem even bij favorieten gezet voor het geval ik het een keer nodig ga hebben

    BeantwoordenVerwijderen
  13. Handige tips! Ik vind vooral het comment systeem van blogger niet fijn voor bezoekers, dus ik ben aan het kijken of ik over kan naar wordpress.

    BeantwoordenVerwijderen
  14. Wat een super handige tips! Vooral die van die foto's, heb het gelijk even aangepast. Maar klopt het dat je dat pas kan zien bij nieuwe artikelen en niet bij wat je tot nu toe hebt gepost?

    BeantwoordenVerwijderen
  15. Super bedankt ervoor heb er even mee moeten prusten maar het lukt het is eigenlijk best makelijk. Binnekort maar ook is me layout gaan veranderen.
    Heel handig artikel

    BeantwoordenVerwijderen
  16. Fijne tips! Ik vond vooral die van regelhoogte handig, maar als ik zoek dmv ctrl F en dan line-height invullen, vind mijn computer niets. Ik heb de widget dingen toen afgesloten, maar nog steeds geen resultaat. Ligt dat aan mijn sjabloon?

    BeantwoordenVerwijderen
    Reacties
    1. Oh, wat raar! Het zou kunnen liggen aan je sjabloon dat je het niet aan kunt passen in Blogger. Dat is de enige reden die ik zou kunnen verzinnen...

      Verwijderen
  17. Ik zoek al zo lang die sneltoets om te zoeken in je html! Top dat je het erin hebt gezet, ben weer blij! :)

    X
    www.fashion-attacks.com

    BeantwoordenVerwijderen
  18. Gelijk even toegevoegd aan favorieten, deze blogpost: komt altijd van pas! :)

    BeantwoordenVerwijderen
  19. Heb je ook de code waarbij je de read more tekst of button in het midden kan zetten en van grootte kan veranderen, bij tekst?

    X

    BeantwoordenVerwijderen
  20. Wat een handige tips! Binnenkort moet ik hier eens naar kijken! :)

    BeantwoordenVerwijderen
  21. Yes! Heel fijn uitgelegd. Hier heb ik echt iets aan. Ik heb alleen nog een andere vraag. Weet jij misschien hoe je aan de zijkant waar bij jou de about knop etc zit, hoe je die knoppen kunt aanpassen? Met kleur of een lintje erachter? Ik weet niet of ik de vraag goed stel, lekker vaag. Hopelijk snap je hem:)

    BeantwoordenVerwijderen
  22. Ik sukkel echt met HTML. Al boeken erbij genomen die uitleggen hoe het moet, maar toch lukt het me niet. Artikels met tips als deze zijn dus echt handig!

    BeantwoordenVerwijderen
  23. Bedankt goede uitleg! Top! Kun je me ook uitleggen hoe je "zoeken in deze blog" hebt gedaan?

    BeantwoordenVerwijderen
  24. Ahh, superfijn! Ik wilde zo graag mijn titel in het midden :)

    Bij die read more tip krijg ik deze foutmelding:

    Fout bij parseren van XML, regel 1894, kolom 29: The value of attribute "expr:href" associated with an element type "a" must not contain the '<' character.

    Ik doe wel gewoon wat jij zegt...

    Xx Alex

    BeantwoordenVerwijderen
    Reacties
    1. jaaaa, dat krijg ik ook! Ik snap er niks van hahah.

      Verwijderen
    2. Dat krijg ik ook ! Ik hoop dat Nicole snel reageert :)

      Verwijderen
    3. Deze reactie is verwijderd door de auteur.

      Verwijderen
    4. oke, vet irritant: ik weet hoe het wel moet alleen kan je geen HTML code in reacties plaatsen, dus het uitleggen gaat een beetje lastig

      Verwijderen
    5. oke, hier is ie dan: mijn vriend heeft me even geholpen en we zijn er uitgekomen. Omdat je dus geen HTML in reacties kan plaatsen even zo:
      http://dagalia.webmasterdennis.nl/page.php#afbeeldingalslink

      Verwijderen
    6. uhm bij mij doet hij het dan nog steeds niet :(

      Verwijderen
  25. Super handig! Dit kan ik mooi gebruiken voor de blog layout van mijn webshop :)

    x Jamie

    BeantwoordenVerwijderen
  26. Thanks hier heb ik zeker wat aan gehad. :) x

    BeantwoordenVerwijderen
  27. Oh danku voor de tips! Mocht ik nog vragen hebben ga ik je die zeker sturen! Leuk dat je dit met iedereen deelt!

    BeantwoordenVerwijderen
  28. ik vind dit heel erg handig maar ik kan al die codes niet vinden als ik ctrl + F doe. Moet je dan naar html bewerken? Daar heb ik op gedrukt maar dan kom ik nergens.
    xx

    BeantwoordenVerwijderen
    Reacties
    1. Je moet inderdaad naar HTML bewerken en dan met je cursor in alle codes gaan staan. Dan moet je op CTRL + F drukken en dan moet je als het goed is de codes kunnen zoeken!

      Verwijderen
  29. Ik hoop dat je dit ziet haha, maar hoe krijg je de datumkop gecentreerd? Want die staat nog heel zielig links bij mij.

    BeantwoordenVerwijderen
  30. Mijn vraag is ook hoe je de datum knop gecentreerd krijgt :)

    BeantwoordenVerwijderen
  31. Handige tips! Jammer dat die van het "lees verder" plaatje het niet doet. Want als ik die probeer verdwijnt heel mijn blog :')

    BeantwoordenVerwijderen
  32. erg handig artikel! Ik ben eigenlijk altijd opzoek op internet naar nieuwe html codes, maar heb eigenlijk nog niet echt een goede site gevonden. Heb je daar misschien een tip voor?

    BeantwoordenVerwijderen
  33. Wauw! Super handig, ik ben eigenlijk nog benieuwd hoe je dat plaatje veranderd in de site balk zeg maar. Ik heb daar een oranje B van blogger. Jij hebt daar een C. Ik weet niet of het zo duidelijk is haha. xx

    BeantwoordenVerwijderen
  34. Weet jij toevallig ook een code om de blogpost titel kleiner te maken in html?
    Ik kan namelijk al een tijdje mijn blogpost titel niet veranderen kwa grote of in een andere lettertyp.
    Liefs

    BeantwoordenVerwijderen
  35. Bij mij staat die html van de blogtitel er niet in.

    BeantwoordenVerwijderen
  36. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  37. Wat een onwijs handig artikel! Dit heeft mij zeker geholpen! Weet jij ook misschien hoe je standaard alle foto's links uitgelijnd kan krijgen ipv gecentreerd?

    BeantwoordenVerwijderen
    Reacties
    1. Als je op de foto klikt kan je de grootte wijzigen en ook links rechts of gecentreerd

      Verwijderen
  38. Heel handig, maar bij mij zegt blogger dat hij de code niet kan vinden.

    BeantwoordenVerwijderen
  39. Supergoede tips! Ik heb er veel aan gehad, heel erg bedankt :D!

    BeantwoordenVerwijderen
  40. Bedankt! Ik ben net een hele middag bezig geweest en mijn blog is weer fris en fruitig! :)

    BeantwoordenVerwijderen
  41. Hi! Een beetje een late reactie, maar ik probeer nu al een tijdje de Read More button te veranderen, maar als ik alle stappen dan uitvoer en het opsla staat er 'Fout bij het parseren van XML' en "A" must nog contain the '<' character. Wat moet ik hieraan doen? Weet jij dat toevallig? Liefs.

    BeantwoordenVerwijderen
  42. Hee nicole, hoekrijg je jouw menu balk boven je header? Dat vind ik erg mooi maar krijg het niet voor elkaar met blogger.

    BeantwoordenVerwijderen
  43. Hee, ik heb een heel groot probleem met mijn blog en heb er echt dagen over zitten puzzelen maar kom er écht niet uit. Dat vind ik superjammer maar misschien dat jij me ermee kan helpen want het gaat over dit. Alsjeblieft :( x

    BeantwoordenVerwijderen
  44. Ik lees dit net pas en probeer ctrl F voor het zoeken maar het werkt niet ( ik heb een apple laptop) wat kan ik dan doen? x

    BeantwoordenVerwijderen
  45. echt super handig!!

    liefs,
    www.ilianax.blogspot.nl

    BeantwoordenVerwijderen
  46. oh en hoe krijg je die foto rechts op je blog zo groot?

    BeantwoordenVerwijderen
  47. Wat een onwijs handige blog is dit, ik heb dit meteen bij mijn favorieten gezet. Ik heb wel even een vraagje: mijn read button kan ik niet aanpassen. Ik krijg dan de volgende melding: Sjabloonvoorbeeld Fout bij parseren van XML, regel 1543, kolom 37: The value of attribute "expr:href" associated with an element type "a" must not contain the '<' character. laden mislukt

    Enig idee hoe ik dit kan fixen? Ik wil zo graag een hele leuke read button ipv een saaie :') Ik hoor het heel graag. Dank je wel alvast!

    BeantwoordenVerwijderen
  48. Handig artikel!
    Die read more button veranderen lukt niet bij mij... Hij vind de code niet in html...

    BeantwoordenVerwijderen
  49. Ah wil je alsjeblieft meer over dit posten? X

    BeantwoordenVerwijderen
  50. Wowh dit is echt een super blogpost! Snapte al niet hoe ik iets moest veranderen en nu met jouw tips kom ik echt weer een stap verder! Hier heb ik heel veel aan gehad! Dankje! X

    BeantwoordenVerwijderen
  51. Heb je tip gebruikt om de titel te centreren, staat veel mooier dankjewel! -Marijke-

    BeantwoordenVerwijderen
  52. Hoe moet kun je de HTML zien want ik kan het niet vinden

    BeantwoordenVerwijderen
  53. Oh super handig !!
    Ik ben een beetje een dummie als het om internet gaat, maar dit is echt super! :)
    Dankjewel
    xx
    JustDaisyx.blogpost.nl

    BeantwoordenVerwijderen
  54. Meer please;-) Het is echt heel handig!

    BeantwoordenVerwijderen

Volg mij op Instagram

De beste budgettips