Create Google similar Scroll bar inward blogger blog

0
13
If you lot await dorsum at Google spider web pages dorsum inwards mid 2011, they were unproblematic only similar a classic spider web page similar other pages but 2012 seems to survive a blueprint twelvemonth together with that’s why each together with every big fellowship painted their spider web pages alongside dynamic looks together with features. One of the extraordinary matter most Google is it’s scroll bars, they are only awesome together with anyone wants to implement it, this tutorial volition demo you lot how to create that.

Many websites used the same blueprint for scrollbar alongside dissimilar techniques, only about alongside JQuery or etc. Many blogger users likewise wanted to purpose the same blueprint for their weblog but they were helpless every bit most of the blogger users only convey basic noesis of spider web languages hence it was hard for them to brand such blueprint on their own.

Before
After

This tutorial volition learn you lot how to blueprint the scrollbars similar that inwards blogger.
Actually the play a trick on is really simple, the scrollbars are blueprint alongside novel CSS3 scrollbar selectors which entirely plant inwards webkit, unfortunately their’s currently no agency to give-up the ghost inwards locomote inwards not webkit browsers such every bit Firefox, Opera etc.

I convey of late published ‘Dream Blog V2‘ template inwards which i convey implemented the scrollbar design. So here’s the demo

Demo

The CSS

It is all CSS which create the designing on the scrollbar together with you lot don’t postulate to worry most heavy javascript codes, a unproblematic CSS code block tin create it. This is the CSS, you lot don’t postulate to brand whatsoever changes inwards this code but if you lot know what to create hence you lot tin alter coloring together with only about values to gibe your needs.

/* Webkit Scrollbar */ ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background: #FFFFFF; -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;    border: 1px company #D8D8D8; } ::-webkit-scrollbar-thumb { background: #646464; -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);   } ::-webkit-scrollbar-thumb:hover { background: #AAA; } ::-webkit-scrollbar-thumb:active { background: #888; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3); } 

Adding the CSS

Adding this CSS is easy, banking concern check this tutorial or follow these steps.
  • Go to Blogger Dashboard 
  • Select the Template tab
  • Click on Customize button
  • When you lot are inwards template designer, guide Advanced
  • And from the Advanced card guide Add CSS 
  • Paste the CSS at that topographic point together with hitting Apply to Blog. 

That’s it, immediately clear together with caches together with reload your weblog past times hitting CTRL+F5 together with you lot volition come across the Google similar scrollbars on your blog, immediately when your readers inquire you lot how you lot did it you lot tin say them most us 🙂

If you lot are facing whatsoever problems implementing the code hence you lot tin ship us your message past times dropping comments. 


Sumber http://www.stramaxon.com