Hello friend aaj me aapko 5 best scrollbar css style for blog website ke bare me batunga. Agar aap apne blog website ko beautiful design dena chahte hai.

Is post me aapko 5 best scrollbar css style design ke bare me batane wala hu. hamne apni previews article me Top 5 screen recorder software for pc ke bare me bataya tha ushe bhi read kare. To chaliye jante hai. how to customize blogger scrollbar

Perfect scorllbar for blog website

Actually hamre Blog website par jo reader athe hai. Wo sabse phale Blog desgin ko sabse phale dekte hai. Taki unhe blog article ko read karne me assni ho. yeah bat sayad apko bi pata hi hogi.

Jis blog ka design smoth aur attractive hota hai ushe reader Utna hi Like karenge. To athe hai apne topic par. How to customize scrollbar using css.

How To Customize Scrollbar Using Css On Blog Website

Blog website me scrollbar customize kaise kare ye bahut asan hai. Aap sirf step by step article ko follow kare.

How to Change scrollbar Using Css on Blog Website.


1. Sabse phale Apne Blogger dashboard me jaye ab.
2. Go to theme >>edit html per click kariye.
4. Now press Ctrl+f Are search box me ]]></b:skin> type kare.
5. ]]></b:skin> ke Uper code Niche diye gaye css code ko paste kar de.

Add css on blogger


Finally Uske bad aapke Blog website ka scrollbar customize ho jayega.

5 Best  Blog Website scrollbar design css:-


scrollbar design css
::-webkit-scrollbar{ width: 11px; } ::-webkit-scrollbar-track{ background: #c4c6c8; } ::-webkit-scrollbar-thumb{ background: #46c1ea; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover{ background: #007757; }
Scrollbar Customization

  1. Touch background color#c4c6c8
  2. horizontal background color #007757
  3. Ap apne choice se color ko change kar sakte hai.






Scorllbar Design 2.

scrollbar design css
::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 8px #00B141; } ::-webkit-scrollbar-thumb { background: yellowgreen; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover { background: green; } ::-webkit-scrollbar-thumb:active { background: #000000; }
Scrollbar Customization

    agar aap scrollbar ka color change karna chahte hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chose kar sakte hai. color code is parkar ka hai for example #000000 something




    Scorllbar design 3.
    scrollbar design css
    ::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f)); background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); } ::-webkit-scrollbar-thumb:hover { background: #008542; } ::-webkit-scrollbar-thumb:active { background: #004522; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }
    Scrollbar Customization

      Agar aap scorllbar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something

      Scorllbar Design 4.

      scrollbar design css
      /*-----Custom ScrollBar By Hackintricks4u.blogspot.com---*/ ::-webkit-scrollbar{width:12px;height:8px} ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#ffffff} ::-webkit-scrollbar-thumb{background: rgba(43,22,22,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)} ::-webkit-scrollbar-thumb:window-inactive{background:rgba(43,22,22,0.4)}
      Scrollbar Customization

        Agar aap scorllbar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something




        Scorllbar Design 5.

        scrollbar design css
        ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: #ecf400; background: #BA8B02; background: -webkit-linear-gradient(to right, #181818, #BA8B02); background: linear-gradient(to right, #181818, #BA8B02); } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-thumb:active { background: #000000; }
        Scrollbar Customization

          Agar aap scorllbar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something


          I hope apko blog website ke liye  best best scrollbar css style for blog website article acha laga hoga to is post ko social media per jarur share kare.

          Agar apko best scrollbar css style for blog website me add karne me khoi problem ho to hame comment karke bataye.

          Are agar aap Hamare article ke notification apne Email per chate hai to hame newsletter duwara subscribe Kare. Taki apko notification milte rhe.


          Read also