Start with a professional Blogger theme [Prime]

Every operating system out there is about equal… We all suck. (Microsoft senior vice president Brian Valentine describing the state of the art in OS security, 2003) Walking on water and developing software from a specification are easy if both are frozen. (Edward V Berard) 

Don’t worry if it doesn’t work right. 

If everything did, you’d be out of a job. (Mosher’s Law of Software Engineering) PHP is a minor evil perpetrated and created by incompetent amateurs, whereas Perl is a great and insidious evil perpetrated by skilled but perverted professionals. (Jon Ribbens)

Add a Professional Blogger theme in Blogger

Lets start by taking a Image by catalyststuff on Freepik.

Adding Javascript for Professional Theme

Search for /body and paste the following code above it.

<b:if cond='data:view.isPost'>
    <script>/*<![CDATA[*/ 
/* Reading Progress bar by TwistBlogg.com */
const readingProgress = (e, t) =>
{
  const o = document.querySelector(e),
    n = document.querySelector(t),
    a = () =>
    {
      const e = o.getBoundingClientRect(),
        t = window.innerHeight / 2;
      Math.round(n.max - n.value);
      e.top > t && (n.value = 0), e.top < t && (n.value = n.max), e
        .top <= t && e.bottom >= t && (n.value = n.max * Math.abs(e
          .top - t) / e.height), window.addEventListener("scroll",
          a)
    };
  window.addEventListener("scroll", a)
};
/* Custom settings for progress bar */
! function()
{
  const a = document.querySelector(".post-progress");
  a && readingProgress(".post-body", ".post-progress")
}();
/*]]>*/</script> 
  </b:if>

Calling Professional theme for Blogger

Now, look for position to set blogger theme. Search where post body starts and paste following code above it.

<b:if cond='data:view.isPost'><progress class='post-progress'/></b:if> 

Add CSS to style your theme

Last step is styling our progress bar. Add following CSS code to your stylesheet. Change background colors to match your theme. 

/* Post Progress Bar by TwistBlogg.com */
progress {
  vertical-align: baseline;
}
.post-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 8px;
  transition: opacity 0.15s ease-out 0.3s;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.post-progress:not([value]) {
  display: none;
}
.post-progress,
.post-progress[value]::-webkit-progress-bar {
  background-color: transparent;
}
.post-progress[value]::-webkit-progress-value {
  background-color: #d14984;
}
.post-progress[value]::-moz-progress-bar {
  background-color: #d14984;
}
.post-progress[value="1"] {
  opacity: 0;
}

How to understand the theme?

To our consent, .post-body contents to be out of a job. PHP is a minor evil perpetrated and created by incompetent amateurs.

Since, Perl is a great and insidious evil perpetrated by skilled but perverted professionals. (Jon Ribbens). By default, value=0 we set perl to display:none and for value not equal to zero or one, we set some styling and if value=1, we set opacity=0.

That is all. Simple, right? If debugging is the process of removing software bugs, then programming must be the process of putting them in. Happy Blogging ✊💪

What to read next? Here's a handpicked article for you 😀

Create an automatic Table of Content (TOC) in Blogger Blog