Ik gebruik graag blockquotes in mijn blogposts! Voor wie ze niet kent: een blockquote is een blokje tekst dat je er visueel uit laat springen. Je kunt een blockquote bijvoorbeeld gebruiken voor een opvallende uitspraak, een belangrijke tip of een stukje tekst waar je extra aandacht op wilt vestigen.
Hieronder een eenvoudig voorbeeld van een blockquote:
Een blockquote is een handige manier om een stukje tekst visueel te laten opvallen.
Waarom zou je een blockquote gebruiken?
Een blockquote is niet alleen maar een kwestie van een blogpost wat mooier maken. Zo’n opvallend tekstblok voegt echt iets toe aan de leesbaarheid van je blogpost.
- Een belangrijk stukje tekst valt meer op.
- Een lange blogpost krijgt een welkome visuele onderbreking.
- Een belangrijke tip of uitspraak krijgt extra aandacht.
- Een lezer die je blogpost scant, ziet een opvallend tekstblok sneller.
Vooral bij langere blogposts vind ik dat laatste handig. Een lezer die een blogpost een beetje scant, ziet zo’n opvallend blokje tekst sneller dan een gewone zin die ergens tussen twee alinea’s staat.
Hoe ziet een blockquote eruit?
Je kunt blockquotes helemaal naar smaak aanpassen. Het uiterlijk wordt voor een groot deel bepaald door je thema en de manier waarop de blockquote is opgemaakt. Je kunt bijvoorbeeld kiezen voor een eenvoudige inspringing, een gekleurde achtergrond, een verticale lijn aan de zijkant of een groter lettertype.
Een simpele blockquote kan er bijvoorbeeld zo uitzien:
“Dit is een voorbeeld van een tekst die door de opmaak meer opvalt.”
Maar je kunt er ook een gekleurde achtergrond of een rand aan geven.
Blockquotes in Blogger
Gebruik je het Blogger platform? Ook daar kun je blockquotes gebruiken. In Blogger kun je via de editor de optie voor een quote gebruiken. Het precieze uiterlijk is afhankelijk van het thema dat je gebruikt.
Wil je het uiterlijk verder aanpassen, dan kun je CSS toevoegen via Thema en Aanpassen. Bij de huidige Blogger-versie vind je aangepaste CSS onder Geavanceerd en vervolgens CSS toevoegen.
Daar kun je bijvoorbeeld deze CSS gebruiken:
blockquote {
background: #f5f5f5;
padding: 15px;
font-size: 20px;
color: #555;
}Klik daarna op Opslaan.
Wil je meer controle over je Blogger-thema? Dan kun je via Thema de HTML van je thema bewerken. Maar maak dan voor de zekerheid eerst een back-up van je thema voordat je daarin gaat zitten rommelen!
Stappenplan om je blockquote aan te passen
Wil je met het uiterlijk van je blockquote experimenteren? Dan kun je het beste stap voor stap werken.
- Kies eerst hoe je wilt dat je blockquote eruitziet.
- Bepaal bijvoorbeeld een achtergrondkleur, tekstkleur en lettergrootte.
- Gebruik CSS om deze eigenschappen aan te passen.
- Sla je wijzigingen op.
- Bekijk vervolgens je blog en controleer of de blockquote er op desktop én mobiel goed uitziet.
Verander niet meer dan één of twee dingen tegelijk. Dan weet je tenminste welke CSS-regel het gewenste effect heeft.
Blockquotes voorbeelden
Een blockquote kan er heel verschillend uitzien. Met een beetje HTML en CSS kun je allerlei stijlen maken. De blockquotes voorbeelden hieronder laten zien wat er mogelijk is met de vormgeving. De tekst is voorbeeldtekst. Je kunt die eenvoudig vervangen door je eigen tekst. Onder ieder voorbeeld staat de code die je kunt kopiëren!
1. Een eenvoudige blockquote
Een eenvoudige blockquote met een gekleurde lijn aan de zijkant.
De code:
<blockquote style="border-left: 5px solid #77cfe1; padding: 15px 20px; margin: 25px 0; font-style: italic;">
Een eenvoudige blockquote met een gekleurde lijn aan de zijkant.
</blockquote>2. Een blockquote met een grote aanhaling
“
Een stukje tekst kan door de juiste opmaak een echte blikvanger worden.
De code:
<blockquote style="border: none; margin: 30px 0; padding: 20px 30px; text-align: center; font-size: 21px; font-style: italic;">
<span style="font-family: Georgia, serif; font-size: 70px; line-height: 30px;">“</span><br>
Een stukje tekst kan door de juiste opmaak een echte blikvanger worden.
</blockquote>3. Een blockquote als kaartje
Een blockquote kan ook lijken op een klein kaartje dat tussen je tekst staat.
De code:
<blockquote style="border: none; margin: 30px 0; padding: 25px 30px; background: #f3f8f5; border-radius: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); font-size: 18px;">
Een blockquote kan ook lijken op een klein kaartje dat tussen je tekst staat.
</blockquote>4. Een handgeschreven blockquote
Een opvallend tekstblok kan een speelse uitstraling geven.
De code:
<blockquote style="border: none; margin: 40px 10px; padding: 30px 35px; background: #fffdf0; box-shadow: 4px 5px 0 rgba(0,0,0,0.12); font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: 18px; line-height: 1.7; transform: rotate(-1deg);">
Een opvallend tekstblok kan een speelse uitstraling geven.
</blockquote>5. Een blockquote met een gekleurde achtergrond
Sommige teksten verdienen gewoon een beetje extra ruimte.
De code:
<blockquote style="border: none; margin: 30px 0; padding: 30px; background: #e8f4f7; color: #34515a; font-size: 20px; line-height: 1.6; text-align: center;">
Sommige teksten verdienen gewoon een beetje extra ruimte.
</blockquote>6. Een blockquote met een kader
Een strak kader geeft een blockquote een rustige en klassieke uitstraling.
De code:
<blockquote style="border: 2px solid #777; margin: 30px 0; padding: 25px 30px; font-size: 18px; line-height: 1.6;">
Een strak kader geeft een blockquote een rustige en klassieke uitstraling.
</blockquote>7. Een blockquote met een opvallende cirkel
“
Geef een stukje tekst een eigen plek in je blogpost.
De code:
<blockquote style="border: none; margin: 35px 0; padding: 30px 30px 30px 85px; background: #f7f1f7; position: relative; font-size: 18px; line-height: 1.6;">
<span style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; border-radius: 50%; background: #c9a6c9; color: white; font-family: Georgia, serif; font-size: 30px; text-align: center; line-height: 45px;">“</span>
Geef een stukje tekst een eigen plek in je blogpost.
</blockquote>8. Een grote, minimalistische quote
“
Een enkele mooie zin kan genoeg zijn.
De code:
<blockquote style="border: none; margin: 40px 0; padding: 20px 10px; text-align: center; font-family: Georgia, serif; font-size: 26px; line-height: 1.5; color: #444;">
<span style="font-size: 65px; line-height: 30px;">“</span><br>
Een enkele mooie zin kan genoeg zijn.
</blockquote>Tot slot: een blockquote is meer dan een mooi tekstvakje
Een blockquote is een eenvoudige manier om een stukje tekst extra te laten opvallen in je blogpost. En je hoeft je daarbij zeker niet te beperken tot de standaardopmaak van je blog.
Met CSS kun je een blockquote bijvoorbeeld een andere achtergrondkleur, een rand, een schaduw of een groter lettertype geven. Zo kun je de vormgeving aanpassen aan de stijl van je blog.
Veel plezier ermee!
Hoe gebruik jij blockquotes op je blog?
