How about my blogger people, in this SEOBlogAriel.Online entry I bring you a simple tutorial to add a Reading Progress Bar in Blogger.
Reading Progress BAR has the purpose of making the user who visits your website see when he scrolls down how far his reading progress is going within the Blog.
{getToc} $title={Table of Content}
How to install Reading Progress Bar on Blogger
What we are going to need to add the progressive reading bar to our blog is going to be:
- Login to Blogger
- Click on Themes
- Personalize
- Edit HTML
Once in the Blogger HTML template you will need:
Copy the style sheet
Insert the following CSS3 code between the <head> </head> tag in your Blogger template:
<link rel="stylesheet" id="t42-reading-progress-reading-progress-css" href="https://dl.dropboxusercontent.com/s/sqmp40ta7xkqx7k/reading-progress.min.css" type="text/css" media="all">
Copy the JavaScript
Add the JavaScript(JS) to the end of the Blogger template, before the </body> tag
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/xmswi4a725z670i/ScriptProgressBar.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/v0cfr3ubpb8ewdk/scrollProgress.min.js" id="t42-reading-progress-scrollProgress-js" defer=""></script>
Add the DIV in Blogger
The following DIV Code contains the style of the HTML reading progress bar. You can place it at the beginning of the <body> tag or even at the end before the </body> tag. Anywhere in the body of the template.
<div id="t42-reading-progress-wrapper" class="t42-style-rounded"><div id="t42-reading-progress" style="height: 10px; position: fixed; top: 0px; background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95) 100%); width: 0%;"></div></div>
Adjustments you can make to the Reading Progress Bar
Inside the Div you can adjust the following:
- Style : Choose the styles offered by the plugin: Default, Rounded, Plastic, Animated, Shine, Glow. Modify the bar animation in the class="t42-style-rounded" part of the class .
- Color : Change the color of the bar to your preference. From a fixed color or Gradient. You can modify it in the line of code: background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95) .
- Position : You can indicate whether the bar is displayed at the top or bottom of the page. You can modify it by putting in the following code top or bottom. position:fixed; top
- Heigh : Changes the size of the bar by placing a different value than the default. Modify the line of code: style="height: 10px
Download Reading Progress Bar HTML, JS and CSS
https://dl.dropboxusercontent.com/s/q9xvhg9kmkeutqr/Progress-BAR.rar
Reading Progress Bar Installation Guide
