HTML-cursus #3: Scrollbar en back to top

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.