4.3.17

DIY: HTML/CSS voor blogger • lettertypes

HTML en CSS was tot een jaar en een half geleden voor mij ook totaal onbekend terrein. Ik vind het jammer dat ik het niet eerder had ontdekt, want het biedt zoveel mogelijkheden aan je blogger sjabloon.
Persoonlijk vind ik dat je weinig duidelijke Nederlandstalige tutorials op het internet vindt of je moet al heel lang zoeken. Hopelijk zal dit jullie wat meer helderheid brengen.

Vandaag gaan we het over lettertypes hebben.




Alvorens:

• Alles in het mint kan je zelf aanpassen/kiezen.
• Ik heb een voorbeeldblog aangemaakt, zodat je kan meevolgen.
• Sla altijd eerst je template op!

De lettertypes dat blogger je aanbiedt zijn behoorlijk beperkt. Google fonts is een online hulpmiddel dat je honderden lettertypes aanbiedt. Super tof en simpel te gebruiken.
Ik ga je hierbij helpen:

  1. Surf naar Google fonts
  2. Aan je rechterkant zie je categorieën waaruit je kan selecteren om te zoeken naar jouw favoriete lettertype.
  3. Ik vind bijvoorbeeld het lettertype Sansita en Playfair Display tof, ik wil deze gebruiken voor mijn blog.
  4. Klik op de 'plusjes'
  5. Onderaan je scherm verschijnt een venster met je lettertypes, klik hierop. 
  6. Ga naar je sjabloon en druk op HTML bewerken. De eerste code is heel belangrijk van google fonts. Dit moet er ongeveer zo uitzien:
    <linkhref="https://fonts.googleapis.com/css?family=Amiko|Playfair+Display" rel="stylesheet"/>
    (Op het einde van deze code moet je voor de '>', een '/' zetten.)
    Dit moet je voor je <head> code plaatsen (druk op Ctrl f om de code te vinden). Hier nog even stap 5 en 6 in afbeeldingen.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <link href='https://fonts.googleapis.com/css?family=Amiko|Playfair+Display' rel='stylesheet'/>
  <head>


Vooraleer het aanpassen

Ik zei dus al dat er verschillende mogelijkheden waren. Zo kan je bepaalde elementen toevoegen aan je code zodat bijvoorbeeld het lettertype enkel in hoofdletters verschijnt. Hier een aantal leuke opties:

• text-transform: uppercase; (Lettertype enkel in hoofdletters.)
• text-transform: lowercase; (Lettertype enkel in kleine letters, dus geen hoofdletters.)
• letter-spacing: 2px; (Afstand tussen de letters, in dit geval 2 pixels.)
• text-align: center; (De tekst staat gecentreerd.)
• text-align: justify; (De tekst staat uitgelijnd.)
• text-align: left; (De tekst staat links uitgelijnd.)
• text-align: right; (De tekst staat rechts uitgelijnd.)
• border-bottom: 1px solid; (Een lijntje onder je tekst, je kan solid veranderen door bijvoorbeeld dotted. Bottom kan je veranderen door left, right of top maar je kan ook enkel border laten staan als je wilt dat je tekst in een kader staat.)
• padding-bottom: 5px; (Afstand van onderkant tot lettertype, dit kan je ook weer veranderen door left, right of top. Als je wilt dat alles dezelfde afstand heeft dan laat je enkel padding staan met het aantal pixels.)
• font-family: 'Playfair Display', serif; (Het soort lettertype.)
• color: #eeeeee; (Kleur lettertype, in dit geval de kleur #eeeeee.)
• font-size: 13px; (Grootte lettertype, in dit geval zijn de letters 13 pixels groot.)
• background-color: #eeeeee; (Achtergrond van het lettertype, in dit geval de kleur #eeeeee.)

! Een code begint altijd met wat je wilt aanpassen, dan een { , hoe het moet veranderen (een ; na elk ding dat je wilt veranderen) en we eindigen de code met een }
Dit zal zo dadelijk duidelijk worden. ;)

Dit zijn enkele codes dat je kan gebruiken om het uiterlijk van de lettertypes aan te passen. Plak deze codes in je CSS (thema -> aanpassen -> geavanceerd -> CSS toevoegen) en pas ze aan naar je persoonlijke voorkeur.

Titel blogpost

h3.post-title, h3.entry-title {
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border-bottom: 1px solid;
padding-bottom: 5px; }

Datumkop

.date-header span {
font-family: 'Playfair Display', serif;}

Lettertype tekst in berichtpost

.post-body{
font-family: 'Amiko', sans-serif;
letter-spacing: 1px;}

Blogarchief

.BlogArchive #ArchiveList ul li{ 
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 2px;
}

Titels gadgets zijbalk

div.widget > h2,div.widget h2.title {
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 2px;}

Lees meer knop

.jump-link {
text-align:center;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;}



Hopelijk hebben jullie iets aan dit artikeltje. Als je nog vragen hebt, drop ze maar in de reacties. :)

10 opmerkingen :

  1. Je bent hier echt druk mee bezig geweest zeg! Wel heel tof en handig dat je dit even op een rijtje hebt gezet.

    BeantwoordenVerwijderen
  2. Ohh superhandig dit, ik ben zo slecht in html dingen dus je helpt me hier enorm mee, thanks!<3 X

    BeantwoordenVerwijderen
    Reacties
    1. Heel graag gedaan! Ben blij dat je er iets aan gehad hebt. :)

      Verwijderen
  3. Oooh, kei tof dat je dit doet klaartje, velen gaan hierbij zweren, haha! (Hoe cute is je nieuwe zijbalk foto op je blog, ooh.)

    BeantwoordenVerwijderen
  4. Echt handig dat je dit hebt uitgelegd! Ik heb 'm meteen opgeslagen op Bloglovin. Komen er meer van dit soort artikelen? :)

    BeantwoordenVerwijderen
    Reacties
    1. Leuk dat dit je zo helpt! Er zullen nog van dit soort artikels komen. ;)

      Verwijderen
  5. Fijn dat je het zo uitgebreid uitlegt! Er zijn inderdaad te weinig nederlandse artikels over te vinden.

    BeantwoordenVerwijderen