Pages

Thursday 27 November 2014

HTML?! // change scrollbar + back to top

To be honest: I think I'm quite goot at making/changing things with HTML. I received a lot of questions about it and thought "why not make a blogpost about it?". There gonna be a couple more html courses, so if you really want to know something, you can ask it down below in the comments!
In this first lesson I'm gonna tell you how you can change your scrollbar and add a back to top button.




SCROLLBAR
Go to blogger > template > customise > advanced > add CSS. Then add the next code:

::-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
}

  • You can change the width of your scrollbar with this. 12px is quite small, so you can make it bigger if you want to.
  • With this you can change the background colour of your scrollbar. You can find colour codes here.
  • Change how thin you want the small line to be.
  • Change the colour of the line.
  • Change the colour of the scrolling thing.
  • Change the colour the scrolling thing will get when you scroll over it. If you don't want it to change from colour, just do the same colour as the previous one.
  • If you want to redo all the changes, just delete the css text you just made.
  • Already made something with css before? You can start a new one right under your previous css.
BACK TO TOP
Go to blogger > template > edit HTML > Search (click on the html code an the ctrl+f) for


</body>

Then paste one of the codes from this website ABOVE it. Easy peasy, right?


If you have any questions, you van ask them below!

0 comments:

Post a Comment

Thanks for your comment! You made my day ♡