Skip to main content

How To Customize Scrollbar In Blogger

Hey H&T users, In the previous I showed you How To Add Multi Tab Widget In Blogger. It was Viewed much. Today I will show How To Change Scrollbar Style In Blogger. Isn't it cool to have different scrollbar for your site. This is very cool scrollbar with customization options. This is popularly known webkit-scrollbar. In this post I will make you learn to extensively customize the Scrollbar style in Blogger Without taking much time let's start the tutorial about customizing scrollbar in Blogger.

Change Scrollbar Style In Blogger

So you want to change scrollbar style in Blogger. It is quite very simple to change scrollbar style in Blogger. You only need to add a small HTML code in your Template. Don't Worry it will not erupt your template. Just follow the instruction carefully and you will be able to change your Blogspot blogs' scrollbar style.

First of all Backup your template. If you don't know how to backup your template then follow the steps given below:
  • Go to Blogger Home.
  • Then go to Dashboard.
  • After that click on Template.
  • Click on Backup/Restore Template (It is written at top right corner).
  • Than Download the Template.
  • Done.
We can now start the tutorial about changing scrollbar style in Blogger.
  • Go to Blogger Home.
  • Go to Dashboard.
  • Now Click on Template.
  • Than you have to click on Edit Html.
  • Now Search for ']]><'. ( You can search for it by pressing Ctrl+F).
  • After you find the code (]]><). Paste the Code given below just above "]]><".
/* Webkit override Scrollbar with CSS3 */
::-webkit-scrollbar {
width: 10px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px #C0C0C0;
background:#C0C0C0;
}
::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 20px #C0C0C0;
background:#C0C0C0;
}
::-webkit-scrollbar-thumb {
background: #292832;
-webkit-box-shadow: inset 0 0 6px #FFFFFF;
}
::-webkit-scrollbar-thumb:hover {
background: #000000;
-webkit-box-shadow: inset 0 0 6px #FFFFFF;
}
::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 0 0 20px #292832;
background:#808080;
}
body, .body-fauxcolumn-outer {
background-color:#ffffff !important;
}
#HTML13{
background:none!important;
border:none !important;
}
  • Save Template.
  • Done. You just created custom webkit scrollbar for Blogger Blog.
Further Customization

  • You can change the value written in red color. By changing the value scrollbar colour will also be changed. You can change the color of background or scrollbar colour.
  • By changing the colour in red you can change the background colour of scrollbar. Use HTML colour codes in place of this.
  • Altering the color in blue you can change change scrollbar shadow color. Use HTML color codes in place of this colour.
  • Scrollbar thumb means the stick or cursor which scrolls from top bottom while scrolling the page.
  • Scrollbar track is the background or track on which Scrollbar thumb scrolls.
  • You can also change the color to change on hover and on pressing.
  • Changing the digits or numbers in Green and Purple will change the width and height of the scrollbar respectively.
  • By default the webkit scrollbar have same color and background as mine. Feel free to change it according to your need.
Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Get Unlimited Ammo and Health in IGI 2

After many days I am sharing a cool and interesting trick for game lovers. Do you enjoy playing IGI2? Of course you like this game. But many of you may be facing verious difficult situations in completing this game. It's because the missions are really tough and you can't complete whole IGI 2 without using it's cheat codes. There are many hacking tricks for IGI available in the Internet but most of them don't work. And this is the reason I am sharing these cheat codes to you. After reading this post you will be able to play this game without losing any health and ammo. We'll use a lite application to achieve the immortality and infinite number of ammo in this game. You will have to download the software from the link that I will provide you a little later in this post. Let's first know what this software will do. It will allow you to keep your health unlimited in IGI game. And if the health will not decrease then you will never die in the game IGI. You wil...
10 comments
Read more

Enhancing Productivity with Virtual Desktops in Windows 11

In the fast-paced digital age, multitasking has become an essential skill for maximizing productivity. With the release of Windows 11, Microsoft introduces an enhanced Virtual Desktop feature that empowers users to organize their workspace, manage tasks efficiently, and seamlessly switch between different contexts without the clutter. In this article, we'll delve into the world of Virtual Desktops in Windows 11 and explore how this powerful tool can elevate your productivity to new heights. Task View  The Power of Virtual Desktops Virtual Desktops in Windows 11 provide users with a dynamic way to manage their open applications and tasks. Think of them as separate workspaces, each with its own set of open apps, files, and windows. This allows you to group related activities together, effectively creating a focused environment for different projects, tasks, or workflows. Getting Started with Virtual Desktops Setting up and using Virtual Desktops in Windows 11 is a breeze: 1. Creating...
Post a Comment
Read more