How to Add Navbar Scroll Indicator on Blogger Feb,2021

 How to Add Navbar Scroll Indicator on Blogger ?

What is Navbar On Blogger?

The blogger NavBar is a bar that appears at the top of each blogger post especially if the blog is made up of the default blogger templates except those using Dynamic Views NavBar is short for Navigation Bar. As the term implies, the Navbar helps bloggers as well as visitors perform various operations, such as accessing Other blogs hosted on blogger platform, Blogger Dashboard, Social share features as well as signing in/out in blogger and other Google Products.

What is Navbar Scroll Indicator on Blogger!

Showing reading time or a progress indicator on articles is a relatively new trend, now you can do that for your next project with this snippet. There are 2 variation one with JS and one in pure CSS. The initial version was designed by Derek Palladino and the pure CSS version was done by Nur Islam. When you scroll down the page you can see a progress bar just below the sticky navigation bar section. If you are looking for a scroll indicator in the sidebar check out this snippet.

Widget Implement Steps

Step 1- First you have to login to your blogger's dashboard.

Step 2- Now you will find a code in the box below. Select and copy this code.

<div class="scroll-line"/>

Step 3 - Add This In Navbar

Step 4 - Copy Below Code And Added in </body>

ggjhg

gh<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){

var wintop = $(window).scrollTop(), docheight = 

    $(document).height(), winheight = $(window).height();

 			var scrolled = (wintop/(docheight-winheight))*100;

  		$('.scroll-line').css('width', (scrolled + '%'));

});

//]]>

</script>

Step 5 - Copy The Code And Paste It in </Style>

.scroll-line{

  height: 2px;

  margin-bottom: -2px;

  background: blue;

  width: 0%;

}

That's All

From Admin:- Hopefully This posts Are Helpful For You . Please comment below and share it as much as possible.