728x90 Ad Space

Tuesday 14 January 2014

How To Add Custom Scrollbar Widget In Blogger



On : 1/14/2014


Want To Customize The Look Of Your Scrollbar? Yes This Is Possible. In The Technology, There Is Nothing Impossible. Scrollbar Appears On The Right Side Of The Browser And It Allows The User To Scroll The Web Page Anywhere In The Browser. It Can Be Scrolled Up And Down With The Help Of Right Mouse Click Or Scrollbar Located In The Center Of The Two Buttons In Mouse. To Provide A User-Friendly Scrollbar, It Is Important To Have A Smooth Scrollbar. However, There Is Not Doubt To Say That Smooth Scrollbar Doesn't Lok Handsome. A Few Days Ago My Friend Told Me Is There Any Way To Customize The Scrollbar Of The Browser So I Am Today Describing This Tutorial For My Firend And All Of You!





What Is Webkit Scrollbar?

WEBKIT Means (Google Chrome). Webkit Is Compatible For Google Chrome Only. Mostly People Are Thinking That What Is The Webkit Scrollbar. It Is A Vertical And Horizontal Bar Which Normally Appears In The Shape Of Long Line And Located On The Right Side Of Your Browser And It Allows User To Scroll Up And Down, Right And Left. Mostly The Right And Left Scrollbar Is Available When The Page Has Too Much Of Width So The Right And Left Side Scrollbar Appears In The Bottom Of Your Browser.

Why To Customize The Scrollbar

There Is Not Doubt In Adding The Scrollbar, But It Allows Add A Beautiful And Elegant Look To Blog. For Example A Blog Is So Highly Professional Contents And Beacutifully Design Web Page, But The Scrollbar Is Doesn't Added In That Template, So It Can Not Look So Good And It Will Destroy The Look Of A Website.

How To Add Webkit Scrollbar

Here Is The CSS Code For Your Webkit Scrollbar. To Install It, Follow The Instructions Below Very Carefully. Don't Make Mistake In Copying And Pasting The Code.


Instructions

  • Go To Blogger.com >> Your Blog >> Template >> Edit HTML.
  • Now Search For Code ]]></b:skin>.
  • And Above The Code, Paste The Following Code:-
 ::-webkit-scrollbar {
height:12px;
width: 12px;
background: #FFFFFF;}
::-webkit-scrollbar-thumb {
background-color: #FDEEF4;
-moz-border-radius: 10px;
border-radius: 10px;
}


  • Now Replace The #FFFFFF With Your Colour. This Is The Background Means The Background Colour Of Your Scrollbar.
  • Now Replace The #FDEEF4 With Your Colour. This Is The Scrollbar Colour.
  • You Can Also Change The Width And Height Of Your Scrollbar By Editing The Lines Above.
  • Than Save Your Template.
  • All Done!.

Final Words!

So Friends, That Was All About  The Scrollbar.. Now See Your Site With Google Chrome And See The Beauty!. By Using CSS, We Can Customize Many Many Of The Things In Blog. This Was The First Widget Of This Blog. But Soon We Will Describe More Widgets With Detail. Feel Free To Ask Questions In Comments. Happy Blogging!.

No comments:

Helping You To Know The Knowledge Of Blogger Blogging Since 2014™.