Lightning Scrollbars, Lightning Scrollbar for Tumblr

You're currently viewing the Lightning Scrollbars code and instruction page.

How to install this scrollbar.

Step 1. Select and copy the code for the scrollbar below from the code boxes.

Step 2. Now go to the "Customize your blog" in tumblr.

Step 3. Click the "Edit HTML" button or "Use Custom HTML button to the left.

Step 4. Now paste in the code you copied right before the </body> part at the bottom

Step 5. Click "Save" then "Close" in the top left corner and now your new scrollbar is installed!

Circles Scrollbar

 

<style>
	::-webkit-scrollbar {
	width: 20px;
	height: 7px;
	background-color:#ffffff;
	}
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment {display: block;}
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {display: none;}
	::-webkit-scrollbar-button:end:increment 
        {background-image:url(https://www.snazzyspace.com/images/arrowdown.png);
	background-repeat: no-repeat;background-position:center;
        -webkit-box-shadow: inset 0 0 16px rgba(214,214,214,0.9);}
</style>
<style>
	::-webkit-scrollbar-button:start:decrement 
	{background-image: url(https://www.snazzyspace.com/images/arrowup.png);
	background-repeat: no-repeat;background-position:center;
        -webkit-box-shadow: inset 0 0 16px rgba(214,214,214,0.9);}
	::-webkit-scrollbar-thumb {
	background-color:transparent;
        background:url(https://www.snazzyspace.com/defaultimages/00aeff_lightning.gif); 
        background-size: 400% auto;
	border-left:0px solid #E5E5E5;
	border-right:0px solid #E5E5E5;
	border-bottom:0px solid #E5E5E5;
	border-top:0px solid #E5E5E5;
	border-radius:0%;
	}
	#scrollbardolliecrave {
	width:96px;
	height:20px;
	position: fixed;    
	left: 0px;    
	bottom: 0px;
	}
	::-webkit-scrollbar-track {
        background:url(https://www.snazzyspace.com/images/track.png); 
	border-radius:0%;
	}
</style>