HTML-cursus #3: Scrollbar en back to top

dinsdag 11 februari 2014 |




Hoi allemaal! De HTML-cursus van vandaag is kort maar krachtig. Ik ga jullie uitleggen hoe je je scrollbar verandert (de bar rechts in je blog, die met je meescrollt) en hoe je een knop kunt instellen waardoor je automatisch teruggaat naar de bovenkant van je blog. Op mijn blog zie je beiden. Het kan zijn dat de scrollbar niet werkt door de browser die je gebruikt, maar op Google Chrome werkt het zeker weten. Lees snel verder voor de tutorials!

De scrollbar van je blog aanpassen doe je zo!
Ga naar Blogger > Sjabloon > Aanpassen > Geavanceerd > CSS toevoegen en voeg de volgende code toe:

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}

De 'width: 12px' kun je nog aanpassen naar de breedte die jij wilt. Wil je een kleine scrollbar, dan kies je een lager getal en wil je een bredere, dan ga je voor (ongeveer) 16px. Kijk maar wat jij de goede breedte vindt! Ook kun je kleuren van je scrollbar aanpassen, en welke kleur je scrollbar heeft als je er met de muis overheen gaat (hover). Find out! Deze code is redelijk simpel, dus je hebt zo door hoe je ermee kunt spelen. 

Een scroll to the top button toevoegen doe je zo!
Ga naar Blogger > Sjabloon > HTML bewerken. Zoek deze lijn op (CTRL + F): 

</body>

Plak er één van de codes op deze site boven. Dat is de meest makkelijke manier die ik heb gebruikt. De codes staan er al naast de pijlen. Simpel toch? Er staan zeker wat mooie tussen om te gebruiken. Wil je voor een moeilijkere versie gaan met een eigen ontworpen pijl? Deze tutorial is wat moeilijker, maar kun je ook gebruiken. 
Succes! Werken ze bij jou? Laat het me weten in een reactie! Liefs, Luna.

25 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Yay! Geweldig ik heb het snel even toegepast! Bedankt. En misschien voor als je een volgende html cursus maakt, hoe maak je zo dat pijltje rechts voor naar het volgende artikel te gaan (denk ik)
    Liefs

    BeantwoordenVerwijderen
  2. Weer een leuke tutorial Luna! Erg leuk hoe je het op deze manier uitlegt! xxx

    BeantwoordenVerwijderen
  3. Oh wat super!! Ik heb die pijl toegevoegd en ben er super blij mee! Ontzettend bedankt:)

    http://www.fashion-hooked.blogspot.com

    BeantwoordenVerwijderen
  4. Oh held, geweldig! Dit zocht ik al zo mega lang en nu heb jij het gewoon op je blog staan :D Heel blij ermee! Superbedankt! Ik wil ook inderdaad graag weten hoe jij je ouder - nieuwer berichten in het midden hebt gedaan zoals Eline al zei, misschien leuk voor de volgende HTML-cursus, hihi :D
    liefs

    BeantwoordenVerwijderen
  5. ik heb al een css staan, moet deze er dan gewoon onder?

    BeantwoordenVerwijderen
  6. Wauw! het is gelukt. En ik ben totaal geen held met HTML. Bedankt :)
    Groetjes Senna

    BeantwoordenVerwijderen
  7. Wauw! Ik ben superblij dat je HTML-cursussen op je blog zet, een aantal van de dingen heb ik al toegepast op mijn blog! x

    BeantwoordenVerwijderen
  8. Weer heel erg bedankt, Luna!! Ik hou echt van deze HTML- cursussen...!!

    BeantwoordenVerwijderen
  9. Yesssss eindelijk een tutorial over die scrollbar! Ik was er zo benieuwd naar maar kreeg het echt nergens gevonden. Thanks voor sharing! En ik vind je html tutorials altijd superfijn en leuk om te lezen, ik leer er altijd wel wat van. Vooral mee doorgaan dus :) Liefs, Sharon

    BeantwoordenVerwijderen
  10. Handig zeg! Goed om te weten.

    BeantwoordenVerwijderen
  11. Wat leuk, heb het allebei meteen gedaan :) <3<3

    BeantwoordenVerwijderen
  12. Net even die laatste gedaan, handig! :)

    BeantwoordenVerwijderen
  13. Yes het is gelukt! Dankjewel Luna!
    Liefs, Amina

    BeantwoordenVerwijderen
  14. hi ik vind je cursussen heel gaaf, maar ik kan de lijn CTRL+F ik ben ook pas net begonnen met mijn blog en waarschijnlijk klinkt dit heel dom, maar ik wilde het toch even vragen:)
    als je nog een cursus maakt zou ik het heel leuk vinden over je instagram diavoorstelling onderaan en het lees verder tekentje

    xx meike

    BeantwoordenVerwijderen
  15. Ja maak een artikel over hoe je met zo'n pijltje naar een volgend artikel gaat! Of over hoe je die foto's onderaan zet ♥

    BeantwoordenVerwijderen
  16. Beste Luna,

    Geen enkel HTML code lukt op het mijn blog. Alle codes die ik zoek bestaan gewoon niet? Moet ik zelf een blog helemaal zelf ontwerpen voordat het lukt? Ik heb nu gewoon een standaard sjabloon wat aangepast maar alle HTML tutorial lukken niet. De codes die ik moet verwijderen staan er gewoon niet in.
    Kan je me helpen

    BeantwoordenVerwijderen
    Reacties
    1. Dat is vreemd, kun je mij een linkje van je blog geven?

      Verwijderen
    2. Helaas heb ik hier ook last van , alles geprobeerd niks kon ik vinden...

      Liefs, beautysmoothiex.blogspot.com

      Verwijderen
  17. Hallo Luna,

    Ik vind het een heel goed idee om dit op je blog te zetten. Ik heb alleen een probleem. Ik heb echt nog nooit ook maar iets met html gedaan en ik kan nu dus niet (CTRL+F) niet vinden. Ik hoop dat je me kan helpen.

    BeantwoordenVerwijderen
  18. Heey, het is gelukt!!
    Heel erg bedankt :)

    Xx Julia

    BeantwoordenVerwijderen
  19. Deze reactie is verwijderd door de auteur.

    BeantwoordenVerwijderen
  20. Super, dankjewel! <3
    Liefs Josie

    BeantwoordenVerwijderen
  21. Hoi, ik vind jou tips heel erg handig, maar ik kan de code's helaas niet vinden, heb je misschien tips?
    Liefs Willemijn

    BeantwoordenVerwijderen