How To Create Stylish HTML Sitemap Page In Blogger?

Steps to add an HTML sitemap in Blogger

To add a stylish sitemap to your Blogger website you need to add an HTML code and create a page named sitemap.

• Step-1: Go to your Blogger Dashboard and open the Page section.
• Step-2: Create a new page and switch the Editor to HTML view.
• Step-3: Now copy the below code and paste it into it.
• Step-4: Now set the title as Sitemap and publish the page.

Now you have successfully created your stylish HTML sitemap on the Blogger website.

<h2>Welcome To Sitemap Of Imam Uddin; imamuddinwp</h2>
  <p>It's an HTML sitemap where you will get all the blog post by category, powered by Imam Uddin, imamuddinwp. Someone can easily navigate to the post. </p>
  <img alt="sitemap-html-sitemap-in-blogger-imamuddinwp" border="0" data-original-height="590" data-original-width="923" src="https://blogger.googleusercontent.com/img/a/AVvXsEja2CqLgXNbPC094eF4sNZmpyeui0Q7zAqzN39EQy4xmW5Meb2yvSgPnHc5ffFBjEy6w-GqoH2LTH_umcz_2QY0qh_OQn2O7zCMKNmHOeF_A-Y1rxeePm_ZrjtXmnS-tmnUMLi9zn9-BXwzJ5buBiocYT7gVcRFXiriE1gLLhC84KiVojpk7MlWoQqdxQ"/>

 <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-_9ORfH1qwXw/Xclr6MzOoQI/AAAAAAAABL0/UCdLuHsJfZwGMpPgwIRGR4-ayzrssW_cACLcBGAsYHQ/s1600/Simple%2BPitch%2BDeck%2BPresentation%25282%2529.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" data-original-height="444" data-original-width="1200" src="https://1.bp.blogspot.com/-_9ORfH1qwXw/Xclr6MzOoQI/AAAAAAAABL0/UCdLuHsJfZwGMpPgwIRGR4-ayzrssW_cACLcBGAsYHQ/s1600/Simple%2BPitch%2BDeck%2BPresentation%25282%2529.png" style="border: none;" title="Sitemap Arlina Code" /></a></div> <div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7} #bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px} #bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)} @media screen and (max-width:768px) { #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}} </style>

Stylish HTML Sitemap Page In Blogger Demo

Original Tutorial Is Here:
How To Create Stylish HTML Sitemap Page In Blogger?