December 24, 2018

How to Add Scrollbar Percentage Value in Blogger Blog?

Maybe you've seen this percentage function on other blogs while scrolling through.

Actually the percentage of scrollbars is not any important feature for a blog. But there is nothing wrong to try, and even then it depends on taste of web designer.


How to Add Scrollbar Percentage Value in Blogger Blog?

Adding this percentage not only adds a decoration to the blog but visitors will be able to see what percentage of pages one has scrolled, if it reaches the bottom of the page the percentage value will naturally be 100%.


How to Add Scrollbar Percentage Value in Blogger Blog?

It is quite easy, please follow the following simple steps:

1. Open Blogger Dashboard, head over to Themes. Click on Edit HTML.

2. Save the code below right above ]]></b:skin>or</style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

3. Paste the code before </head>

<div id='scroll'></div>



4. Paste the code below right above  </body>

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Then save the template and see the results.

If the steps you are doing are not wrong, then your blog should have a percentage beside the scrollbar.

It's easy, isn't it? Good luck. See y'all soon.

0 Comments

Post a Comment

Avoid Spammy Comments