Create a Content-wise Sitemap for your Template / Theme

Brief

A customized sitemap not only enhances user navigation by presenting content in a clean, organized layout, but it also boosts SEO performance by ensuring all pages are easily discoverable by search engines. With features like tailored styling and responsive design, a sitemap adapts to various screen sizes, offering a seamless user experience while maintaining aesthetic appeal and improving website visibility.

Procedure

1. Go to Blogger Dashboard.
2. Click on Pages and create a page.
3. Open the HTML view.
4. Now, copy the below code and paste in it.

   <b:section class='Reading Process bar' id='Reading Process' showaddelement='false'>
   <b:widget id='HTML98' locked='true' title='Reading Progress Bar' type='HTML' version='2' visible='true'><b:widget-settings><b:widget-setting name='content'><![CDATA[<!--[ This is Progress Bar that appears at top showing the reading progress of a page ]-->]]>
   </b:widget-setting></b:widget-settings><b:includable id='main'><div class='pRs'> <div class='pBar pSt pAn' id='progBar'/></div>
   <script type='deferjs'> /*<![CDATA[*/ window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height=document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("progBar").style.width = scrolled + "%";} /*]]>*/</script>
   </b:includable></b:widget></b:section>

5. Save it.

It is brought to your kind attention that the CSS code provided above is applicable solely to the light mode implemented in a theme. Users may notice that the CSS does not completely display certain features of the Countdown Download Box when dark mode is activated. To effectively integrate the aforementioned code into dark mode, users are requested to add the necessary CSS to their website's dark mode stylesheet to address the issues that arise when enabling dark mode.