aanpassen
blogger
blogtitel centreren
break-knop
button
lay-out aanpassen
read more knop
ruimte tussen foto's
ruimte tussen regels
space between photos
tips
veranderen
vergroten
verkleinen
Tips | Je lay-out aanpassen in blogger
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.
]]></b:skin>
Als je deze code hebt gevonden, vervang je deze voor de volgende code:
h3.post-title { text-align:center; }
]]></b:skin>
]]></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 + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' 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!
Super handig!
BeantwoordenVerwijderenBlogger vind ik zelf ook heel fijn werken! Handige tips, denk dat veel mensen hier wat aan hebben :)
BeantwoordenVerwijderenHandig! Ik heb zelf dan geen blogger, maar het is wel heel handig :)
BeantwoordenVerwijderenFijne tips, jammer dat ik niet meer op blogger zit haha!
BeantwoordenVerwijderenHandig dit :)! Ik ben ook wel vrij handig met HTML en CSS! :)
BeantwoordenVerwijderenHeel erg handig artikel! Zelf zit ik ook op blogger en hier heb ik wel wat aan. Liefs
BeantwoordenVerwijderenHandig :)
BeantwoordenVerwijderenSuper handig!
BeantwoordenVerwijderenGebruik 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
Ah heel handig, dankjewel! :)
BeantwoordenVerwijderenvooral het centreren van de titel.
xox
Heel handig! Hiermee ga ik binnenkort eens aan de slag!
BeantwoordenVerwijderenWow, super handig!
BeantwoordenVerwijderenZooo 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!
BeantwoordenVerwijderenHandig artikel, heel leuk dat je het deelt :)!
BeantwoordenVerwijderenHeel erg handig! :) Wil je een keertje een artikel plaatsen over hoe je zelf een lay-out ontwerpt? Zou ik heel leuk vinden! ;)
BeantwoordenVerwijderenx liesbeth
www.aboutfashionliesbeth.blogspot.nl
Handig artikel! Ik heb hem even bij favorieten gezet voor het geval ik het een keer nodig ga hebben
BeantwoordenVerwijderenHandige 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.
BeantwoordenVerwijderenWat 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?
BeantwoordenVerwijderenSuper bedankt ervoor heb er even mee moeten prusten maar het lukt het is eigenlijk best makelijk. Binnekort maar ook is me layout gaan veranderen.
BeantwoordenVerwijderenHeel handig artikel
Superhandige tips! Liefs
BeantwoordenVerwijderenFijne 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?
BeantwoordenVerwijderenOh, 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...
Verwijderenonzettend handig!
BeantwoordenVerwijderenIk zoek al zo lang die sneltoets om te zoeken in je html! Top dat je het erin hebt gezet, ben weer blij! :)
BeantwoordenVerwijderenX
www.fashion-attacks.com
Gelijk even toegevoegd aan favorieten, deze blogpost: komt altijd van pas! :)
BeantwoordenVerwijderenHeb je ook de code waarbij je de read more tekst of button in het midden kan zetten en van grootte kan veranderen, bij tekst?
BeantwoordenVerwijderenX
Wat een handige tips! Binnenkort moet ik hier eens naar kijken! :)
BeantwoordenVerwijderenYes! 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:)
BeantwoordenVerwijderenIk 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!
BeantwoordenVerwijderenBedankt goede uitleg! Top! Kun je me ook uitleggen hoe je "zoeken in deze blog" hebt gedaan?
BeantwoordenVerwijderenAhh, superfijn! Ik wilde zo graag mijn titel in het midden :)
BeantwoordenVerwijderenBij 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
jaaaa, dat krijg ik ook! Ik snap er niks van hahah.
VerwijderenDat krijg ik ook ! Ik hoop dat Nicole snel reageert :)
VerwijderenDeze reactie is verwijderd door de auteur.
Verwijderenoke, vet irritant: ik weet hoe het wel moet alleen kan je geen HTML code in reacties plaatsen, dus het uitleggen gaat een beetje lastig
Verwijderenoke, 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:
Verwijderenhttp://dagalia.webmasterdennis.nl/page.php#afbeeldingalslink
uhm bij mij doet hij het dan nog steeds niet :(
VerwijderenSuper handig! Dit kan ik mooi gebruiken voor de blog layout van mijn webshop :)
BeantwoordenVerwijderenx Jamie
Thanks hier heb ik zeker wat aan gehad. :) x
BeantwoordenVerwijderenOh danku voor de tips! Mocht ik nog vragen hebben ga ik je die zeker sturen! Leuk dat je dit met iedereen deelt!
BeantwoordenVerwijderenVet handig!!
BeantwoordenVerwijderenik 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.
BeantwoordenVerwijderenxx
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!
VerwijderenSuper handig artikel! Dankjewel! xx
BeantwoordenVerwijderenIk hoop dat je dit ziet haha, maar hoe krijg je de datumkop gecentreerd? Want die staat nog heel zielig links bij mij.
BeantwoordenVerwijderenMijn vraag is ook hoe je de datum knop gecentreerd krijgt :)
BeantwoordenVerwijderenHandige tips! Jammer dat die van het "lees verder" plaatje het niet doet. Want als ik die probeer verdwijnt heel mijn blog :')
BeantwoordenVerwijderenerg 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?
BeantwoordenVerwijderenWauw! 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
BeantwoordenVerwijderenWeet jij toevallig ook een code om de blogpost titel kleiner te maken in html?
BeantwoordenVerwijderenIk kan namelijk al een tijdje mijn blogpost titel niet veranderen kwa grote of in een andere lettertyp.
Liefs
Bij mij staat die html van de blogtitel er niet in.
BeantwoordenVerwijderenDeze reactie is verwijderd door de auteur.
BeantwoordenVerwijderenWat 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?
BeantwoordenVerwijderenAls je op de foto klikt kan je de grootte wijzigen en ook links rechts of gecentreerd
VerwijderenHeel handig, maar bij mij zegt blogger dat hij de code niet kan vinden.
BeantwoordenVerwijderenSupergoede tips! Ik heb er veel aan gehad, heel erg bedankt :D!
BeantwoordenVerwijderenBedankt! Ik ben net een hele middag bezig geweest en mijn blog is weer fris en fruitig! :)
BeantwoordenVerwijderenHi! 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.
BeantwoordenVerwijderenIk heb hetzelfde probleem...
VerwijderenHee nicole, hoekrijg je jouw menu balk boven je header? Dat vind ik erg mooi maar krijg het niet voor elkaar met blogger.
BeantwoordenVerwijderenHee, 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
BeantwoordenVerwijderenIk 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
BeantwoordenVerwijderenHandig!!
BeantwoordenVerwijderenLiefs,
www.loisblog.com
echt super handig!!
BeantwoordenVerwijderenliefs,
www.ilianax.blogspot.nl
oh en hoe krijg je die foto rechts op je blog zo groot?
BeantwoordenVerwijderenSuper handige tips, thank you!
BeantwoordenVerwijderenWat 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
BeantwoordenVerwijderenEnig 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!
Top dit!
BeantwoordenVerwijderenHandig artikel!
BeantwoordenVerwijderenDie read more button veranderen lukt niet bij mij... Hij vind de code niet in html...
Ik heb er heel veel aan gehad !
BeantwoordenVerwijderenAh wil je alsjeblieft meer over dit posten? X
BeantwoordenVerwijderenWowh 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
BeantwoordenVerwijderenleuk artikel!
BeantwoordenVerwijderenHeb je tip gebruikt om de titel te centreren, staat veel mooier dankjewel! -Marijke-
BeantwoordenVerwijderenHoe moet kun je de HTML zien want ik kan het niet vinden
BeantwoordenVerwijderenOh super handig !!
BeantwoordenVerwijderenIk ben een beetje een dummie als het om internet gaat, maar dit is echt super! :)
Dankjewel
xx
JustDaisyx.blogpost.nl
Meer please;-) Het is echt heel handig!
BeantwoordenVerwijderen