DEV Community

Cover image for How To Create Stylish HTML Sitemap Page In Blogger?
Imam Uddin
Imam Uddin

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Stylish HTML Sitemap Page In Blogger Demo

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

Discussion (0)