Subscribe via RSS Feed

Custom scrollbar for blogger

I’ve seen many custom made scrollbar across blogger. Nowadays webkit browser especially google Chrome has the flexibility clause to add custom scrollbar in website.

If your blog is running on wordpress, the same thing is to add extra css on style.css. We’re going to achieve the slick effect on blogger for this tutorial.

Custom scrollbar for blogger

First go to dashboard > design> edit html > tick expand widget

then using CTRL+F,search for :

]]></b:skin>

add this code on the top of it :

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

Here’s our final result

custom scrollbar blogger

You can change the color to any color you like. basically inside the code is just like adding a custom block to the side to replace the default scrollbar. The border-radius clause define how much radius the rectangle is going to be, if you want the scrollbar to remain their 4 corner, remove that line of code.

I pretty like when the background of the scrollbar same with the background of the blog because it look like the scrollbar no longer a part of the browser but a part of the blog layout..

Custom scrollbar for blogger, cool?

Incoming search terms:

  • blogger scrollbar
  • blog scrollbar

Category: blogspot tutorials