My First Ghost Widget
WordPress has plugins; Ghost has widgets - there is no widget library or store just code snippets to add.
When you buy through links on our site, we may earn a small commission at no additional cost to you. As an Amazon Affiliate I earn from qualifying purchases. I only recommend products and services that I think will help you on your Mompreneur journey and all opinions expressed here are our own. You can read my full disclaimer here.
Scroll Progress Widget
🆙
New Update - Scroll Progress Widget see it in action 👆🏼 progress bar at the top of the page 🎉
Inspired by the free code provided by Bright Themes, StackSoarBlog✏️ now has a very subtle, clean progress bar. Full code is below for reference.
Code Snippet
Site Footer Code Injection for Javascript
<script>
function getScrollPercent() {
const h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
return Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}
const progressBar = document.querySelector('[data-progress-bar]');
if (progressBar) {
progressBar.setAttribute('value', getScrollPercent());
window.addEventListener('scroll', () => {
progressBar.setAttribute('value', getScrollPercent());
});
}
</script>```Site Header Code Injection for Styles
[data-progress-bar] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:fixed;
top:0;
width:100%;
height:5px;
background-color:transparent;
z-index:1100;
}
[data-progress-bar]::-webkit-progress-bar { background: transparent; }
[data-progress-bar]::-moz-progress-bar { background: var(--ghost-accent-color); }
[data-progress-bar]::-webkit-progress-value { background: var(--ghost-accent-color); }
</style>```Original Resource
More explanation and the code snippets are included in the article on Bright Themes.
Scroll progress widget in Ghost
Learn how to install the Ghost CMS Scroll Progress widget for a better reading experience. Boost reader engagement on your Ghost CMS site with the Scroll Progress widget.
Bright Themes
