Centreren • HTML Cursus #1

06:00

21 oktober 2016 ~ Hi allemaal, zelf had ik, toen ik begon met bloggen, een heleboel struggles waar ik niet van af kwam. Bij Blogger kun je bijvoorbeeld niet instellen dat je iets wilt centreren, daar heb je bepaalde CSS-codes voor. Die codes wil ik graag met jullie delen. Je lay-out is het visitekaartje van je blog en daarom help ik jullie graag verder met een paar dingetjes die je visite kaartje net iets mooiers maken. Let op, dit werkt alleen bij Blogger.


Blogtitel centreren
1. Log in op je Blogger account & selecteer in je menu sjabloon
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het eerste.
3. Selecteer in het menu Geavanceerd
4. Naast Geavanceerd verschijnt nog een menu, scrol helemaal naar beneden en klik op CSS toevoegen. Je ziet nu een groot wit vak.
5. Kopieer de code hieronder en plak 'm in het witte vak.

Header{text-align: center;}

6. Klik op Toepassen op blog en je titel is gecentreerd!

Blogpost titel centreren
1. Log in op Blogger & selecteer in je menu sjabloon.
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het tweede.
3. Zoek in de HTML van je blog onderstaande code (dat doe je door met je cursor in het vak te gaan staan en dan op CTRL+F te klikken) 

]]></b:skin>

4. Dan haal je deze code weg en zet je onderstaande code daarvoor in de plaats, je vervangt 'm dus.

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

]]></b:skin>


5. Dan klik je op Sjabloon opslaan en je blogpost titel is gecentreerd!

Datumkop centreren
1. Log in op Blogger & selecteer in je menu sjabloon.
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het eerste.
3. Selecteer in het menu Geavanceerd.
4. Naast Geavanceerd verschijnt nog een menu, scrol helemaal naar beneden en klik op CSS toevoegen. Je ziet nu een groot wit vak.
5. Kopieer de code hieronder en plak 'm in het witte vak.

.date-header {
text-align:center;
}

6. Klik op Toepassen op blog en je datumkop is gecentreerd!

Read more centreren
1. Log in op Blogger & selecteer in je menu sjabloon.
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het eerste.
3. Selecteer in het menu Geavanceerd.
4. Naast Geavanceerd verschijnt nog een menu, scrol helemaal naar beneden en klik op CSS toevoegen. Je ziet nu een groot wit vak..
5. Kopieer de code hieronder en plak 'm in het witte vak.

.jump-link {


text-align: center;


}
6. Klik op Toepassen op blog en je read more knop is gecentreerd!

Gagdet/widget titels in je sidebar centreren
1. Log in op Blogger & selecteer in je menu sjabloon.
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het eerste.
3. Selecteer in het menu Geavanceerd.
4. Naast Geavanceerd verschijnt nog een menu, scrol helemaal naar beneden en klik op CSS toevoegen. Je ziet nu een groot wit vak.
5. Kopieer de code hieronder en plak 'm in het witte vak

.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2 {text-align: center;}

6. Klik op Toepassen op blog en de gagdet/widget titels zijn gecentreerd!

Gagdet/widget tekst in je sidebar centreren
1. Log in op Blogger & selecteer in je menu sjabloon.
2. Dan kom je bij Live op blog, je kan nu kiezen uit twee dingen; Aanpassen of HTML bewerken. Klik op het eerste.
3. Selecteer in het menu Geavanceerd.
4. Naast Geavanceerd verschijnt nog een menu, scrol helemaal naar beneden en klik op CSS toevoegen. Je ziet nu een groot wit vak.
5. Kopieer de code hieronder en plak 'm in het witte vak.

.main-inner .column-left-inner, .main-inner .column-right-inner {text-align: center;}

6. Klik op Toepassen op blog en je gagdet/widget tekst is gecentreerd!

Zo, dat was een hoop tekst. Hopelijk hebben jullie hier wat aan gehad! Als je nog vragen hebt kun je altijd een reactie achterlaten of mij mailen (styleteen.y@gmail.com). Ik zal proberen het zo goed mogelijk uit te leggen en zo snel mogelijk te beantwoorden. Ik vind het zelf altijd heerlijk om met m'n lay-out bezig te zijn en verbetering te zien. Er komt binnenkort een tweede cursus online. Lijkt jullie dat wat? Liefs, Yael

You Might Also Like

23 comments

  1. Leuk aritikel! Duidelijk vertelt, mijn complimenten. Xx

    BeantwoordenVerwijderen
  2. Ik had alles gecentreerd, maar ik houd nu alles recht hihi! Wel erg handig dit!

    BeantwoordenVerwijderen
  3. Wat een handig artikel! Leuke bloglayout trouwens. Liefs,

    BeantwoordenVerwijderen
    Reacties
    1. Heel erg bedankt! Ben er zelf ook hartstikke blij mee :)

      Verwijderen
  4. Super duidelijke uitleg. Ik ben helaas actief op Weebly en niet op Blogger. Dus ik zit nog steeds soms met die codes dat ik denk: Hmm, hoe nu verder! Want op internet valt er niet veel te vinden over weebly .. fijn! Liefs, Chantal!

    BeantwoordenVerwijderen
    Reacties
    1. Lastig! Weebly is idd minder bekend. Als je echt vastloopt kun je altijd nog overwegen om over te stappen naar Blogger/Wordpress. Bedankt van je reactie! x

      Verwijderen
  5. Wat handig dat je dit deelt en zo handig uitlegt!

    BeantwoordenVerwijderen
  6. Zelf heb ik wordpress dus ik kan hier niet zo veel mee. Gelukkig heb ik een hele handige vriend haha. Wel handig dat je dit deelt want toen ik blogger had heb ik hier ook naar gezocht en hielp heel goed.

    BeantwoordenVerwijderen
    Reacties
    1. Fijn dat je zo'n handige vriend hebt! Bedankt voor je reactie x

      Verwijderen
  7. Altijd handig dit soort artikels! Bedankt voor het delen ^^

    BeantwoordenVerwijderen
    Reacties
    1. Geen probleem! Er komt nog een vervolg aan :) x

      Verwijderen
  8. Mij lijkt het gaaf al je een cursus geeft van hoe jij nou je layout zo mooi hebt gekregen want het ziet er super prof uit en dan van mij is echt lelijk dus zou d'r graag wat aan willen veranderen maar weermt niet hoe Xx

    BeantwoordenVerwijderen

Superlief als je een reactie achterlaat, dat maakt me blij ღ

Popular Posts

Read it!

Jij bent uniek ♡

Ik denk dat bijna iedereen die mijn blog leest Instagram heeft. Een vraag: wat voor foto's post jij op Instagram? Die mooie waar je lac...

Recent Posts