Add Webkit Override Scrollbar into your Blogger Template

Add Webkit Override Scrollbar into your Blogger Template

8
data:blog.title
blogger scroll bar

Hi in this tutorial I am going to share with you a trick that how we can colorize our blogger template scrollbar with the help of Webkit and it is also known as webkit scrollbar. But the limitation of this scrollbar is that it only work on Google Chrome. But Firefox has an add-ons to show colorize scrollbar but that you can see only and others are not. Maybe Firefox will improve their browser in near future for compatibility. But now we can use it to add some extra spice on our blogger templates. I am pretty sure most of the blogger use Google Chrome like me. So if you want you can use it.  


Live Demo




Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on 
Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> and save your template


/* Webkit Override Scrollbar by www.bloggerspice.com*/
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#fff;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(4,189,250,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(4,189,250,0.4);
}
/* Webkit Override Scrollbar by www.bloggerspice.com*/


Customization 


  • Change 4,189,250 with RGB color code. You can find color code from Photoshop software. 
Add Webkit Override Scrollbar into your Blogger Template
4 Stars stars - "Add Webkit Override Scrollbar into your Blogger Template " Hi in this tutorial I am going to share with you a trick that how we can colorize our blogger ...

Nice one man. clean and easy.

thanks bro but it only works on Google Chrome browser.

Sir I Want A black Menu For Footer

you can use a menu with wrapping effect with multiple color it is better than black..However simply change your footer background black then your menu will be super shining..Just visit below link.

http://www.bloggerspice.com/2013/01/css-multicolored-menu-with-wrapping.html

it works on safari too :)

thanks a lot :)

how to change color

Aslam I have mentioned in tutorial that you have to use RGB color. To get the color code you can use Photoshop software. or you can get color code from this link http://www.bloggerspice.com/p/color.html but you must use first color picker tool.

o oh ! , ok tanx bro .

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *