Wednesday, May 14, 2014

How To Add Customize Scroll Bar in Your Blogger Blog (Blogspot widget)


Nowadays Blogger blog (or blogspot) is the most popular blog designing platform provided by Blogger. Most of the blogger begins with the blogger blog for sharing and for many purpose by posting into their blog.

And all of us blogger wants to decorate our blog very beautifully, so visitors and people can be attracted. Many bloggers have seen many customized scroll bar in popular blog and wants to customize their blog with beautiful scrollbar,but dont know how to do? 

So, Today i am here to share Customizable Scrollbar script for the blogger. Hope this tip or customizable scrollbar you will like, And it is very quick and easy to customize the colors, size (width and height). This can be done by adding script (Which is given at the middle of the post) into the CSS code. 

Lets customize the Scroll bar.

  • First Go to Blogger Dashboard.
  • Now click on template >> Edit HTML.
  • Now search for this code ]]></b:skin> using ctrl+f button.
  • Now Copy the Below code and just paste above ]]></b:skin> .

/* startingphaseofc.blogspot.com scrollbar effect */ ::-webkit-scrollbar { width:8px; height:6px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); background:#eee; } ::-webkit-scrollbar-thumb { background: rgba(28,119,229,0.7); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(116,188,99,0.5);

  • Now click on save template and its done.

OR you also can do this with following method.

  • First go to Blogger dashboard.
  • And click on Template >> Customize button.
  • Now click on Advance >> Add CSS and you will see 'Add custom CSS' and box now just paste above code.
  • Now click on Apply to Blog Button and its done.

NOTE:

You can change the color by changing #eee and width and height by changing width:8px; height:6px; with your desired size.


9 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.




    Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training

    ReplyDelete
  2. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.
    full stack developer training in chennai

    ReplyDelete
  3. It has been simply incredibly generous with you to provide openly what exactly many individuals would’ve marketed for an eBook to end up making some cash for their end, primarily given that you could have tried it in the event you wanted.
    digital marketing training in annanagar

    ReplyDelete
  4. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Click here:
    python training in Bangalore
    Click here:
    python training in Bangalore

    ReplyDelete
  5. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.
    Blueprism training in Chennai

    Blueprism training in Bangalore

    Blueprism training in Pune

    ReplyDelete
  6. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune

    ReplyDelete
  7. Resources like the one you mentioned here will be very useful to me ! I will post a link to this page on my blog. I am sure my visitors will find that very useful

    java training in jayanagar | java training in electronic city

    java training in chennai | java training in USA

    ReplyDelete
  8. I likable the posts and offbeat format you've got here! I’d wish many thanks for sharing your expertise and also the time it took to post!!
    angularjs Training in chennai
    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    ReplyDelete
  9. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..
    python training in pune | python training institute in chennai | python training in Bangalore

    ReplyDelete