Add A Custom Scrollbar 4 Blog (Tutorial)

Got this idea from a friend who told me that it is difficult to find a custom scrollbar tutorial. For me it was easier than that sparkles cursor animation thing because I guess I know what to search for this one (scrollbar) but not that one (sparkles? sparkle trail? cursor animation? cursor trail? what???)

Nevertheless this time I'm going to give a tutorial on how to add a custom scrollbar to your blog. Let's get rid of that boring scrollbar and add one that has the same theme colours of your blog. It's another easy thing to spice up your blog! ^.^ You'll have to dig into the html codes of your template this time, but it should be easy enough because it's just a copy and paste thing.

Okay, enough said. Here is the scrollbar code. Copy it first:


::-webkit-scrollbar {
height:12px;
width: 12px;
background: #F778A1;}
::-webkit-scrollbar-thumb {
background-color: #FDEEF4;
-moz-border-radius: 10px;
border-radius: 10px;
}


Step 1: Go to Blogger > Template. Click on "Edit HTML".

Steps 2 to 6 are displayed in a single printscreen picture below. 

Step 2: Tick the "Expand Widget Templates" Box.

Step 3: Press CTRL and F at the same time, opening the searchbox. Paste this in (aka search for this):

]]></b:skin>

Step 4: When you find it, paste the scrollbar code ABOVE the ]]></b:skin> code.

Step 4A: This step is optional. The code I gave you is a pink scrollbar.

• Change the height and width of the scrollbar at the blue part of the code, the bigger the number the bigger the scrollbar. 
• Change the colour of the moving part of the scrollbar at the green part of the code. Get the colour code HERE, if you don't know the code for the colour you want. 
• Change the colour of the background of the scrollbar at the purple part of the code.

Step 5: Save the template

Step 6: Close the window (it won't auto close) and you're done! View your blog!

P.S: Custom scrollbar generally works best on Google Chrome. Internet Explorer and Firefox will usually not display the custom scrollbar.

That's it! Easy right?
Happy designing! :)

Till then,