Blogger lay-out aanpassen, HTML en CSS #1

28 november 2015


Je lay-out aanpassen in Blogger kan heel lastig zijn, maar d.m.v. een aantal juiste codes kan het ook heel gemakkelijk zijn. Omdat code nogal lastig kan zijn heb ik hier een aantal codes voor jullie op een rijtje gezet die je kan gebruiken om de kleine details (die je blog behoorlijk kunnen op leuken) om je blog te veranderen!

Je titel van je blogpost centreren (in het midden zetten)
Ga naar blogger-->sjabloon-->aanpassen-->geavanceerd-->CSS toevoegen. Als je daar bent plak je deze code daar neer en voila, je bent klaar!
 
.post-title {text-align:center;}

De datum van je blogpost centreren
Plak deze code in CSS en je datum is gecentreerd! (let op: doet hij het niet? dan komt dat waarschijnlijk doordat je hem onder je vorige code hebt gezet, druk dan een keer op back space, dan staat hij er namelijk direct naast!)
 
.date-header {text-align:center;}

Je widget titels centreren (titels in je side bar)
Gebruik deze code voor in je CSS:
 
.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1  {text-align: center;}

Je pagina's centreren (about, contact enz)
Vul deze code in in je CSS:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


Een 'back to top' button toevoegen
Nu duiken we even de HTML in!  Ga naar blogger-->sjabloon-->HTML bewerken en zoek naar deze code (typ CTRL+F in, zo kan je zoeken in de HTML :)

 </body>

Deze site heeft hele leuke scroll to top buttons. Naast de button zie je een code staan, kopieer die en plak die direct boven </body> er moet dus geen spatie tussen je code en de </body> want dan werkt het niet. Je plakt dus daar je code en je bent klaar!

Zo, dit was het dan! Laat me even weten in de reacties of het is gelukt bij jou en of je een 2e deel wilt zien!


6 opmerkingen

  1. Echt superhandig! Dit gaat me zo helpen<3 Ik ben hier echt slecht in maar ik denk dat het nu wel lukt. Xx één van je grootste fans

    BeantwoordenVerwijderen
  2. En je Layout is ook echt supermooi!

    BeantwoordenVerwijderen
  3. Hee, wil je ook een keer laten zien hoe je dat 'love Angela' onder je post zet?

    BeantwoordenVerwijderen
  4. Ik zal het uitleggen in mijn volgende HTML en CSS post, coming soon!

    BeantwoordenVerwijderen
  5. bij mij staat er sjabloon toegepast maar het pijltje of de naam staat niet in t midden??

    BeantwoordenVerwijderen
    Reacties
    1. Het kan zijn dat je de code onder een andere code hebt gezet, zorg er dan voor dat er nog een 'Enter' tussen staat, anders werkt hij niet! Ik hoop dat het nu wel lukt :)

      Verwijderen

Latest Instagrams

© Inspiregirll. Design by Fearne.