How to make beautiful sitemap for a blogger website?

A Sitemap is a way to organize all websites. Sitemap helps to show all of your blog's data that identifies URLs by a search engine.

A Sitemap is a way to organize all websites. Sitemap helps to show all of your blog's data that identifies URLs by a search engine.

In this article, I will provide you with the best and designing HTML, CSS and JS sitemap code that helps to make your website professional.


beautiful sitemap for a blogger website


Step of Adding Sitemap

  • Go to Blogger dashboard
  • Click on create page
  • Click on HTML view
  • Paste this code


<h2 style="text-align: left;"><span style="font-family: helvetica; font-size: large;">&nbsp;Sitemap For Nepali
        Graphics</span></h2>

<div class="separator" style="clear: both; text-align: center;"><br /></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 {
        displaynone
    }

    #bp_toc {
        color#000;
        margin0 auto;
        max-height800px;
        overflow-yauto;
    }

    span.toc-note {
        margin0 auto 25px auto;
        text-aligncenter;
        line-heightnormal;
        displaytable;
        positionrelative;
        overflowhidden;
        font-size14px;
        padding10px 20px;
        background#007bff;
        background-imagelinear-gradient(50deg#ff4169#8b41f6);
        background-size100%;
        color#fff;
        border-radius99em;
        font-weight500;
        transitionall .3s
    }

    span.toc-note:hover {
        background-size200%
    }

    .toc-header-col1 {
        padding10px;
        background-color#f5f5f5;
        width250px
    }

    .toc-header-col2 {
        padding10px;
        background-color#f5f5f5;
        width75px
    }

    .toc-header-col3 {
        padding10px;
        background-color#fff;
        width125px
    }

    #bp_toc td.toc-header-col1,
    #bp_toc td.toc-header-col2,
    #bp_toc td.toc-header-col3 {
        border1px solid rgba(0000.05);
        background#fff
    }

    #bp_toc td.toc-header-col1 {}

    #bp_toc td.toc-header-col2 {}

    #bp_toc td.toc-header-col3 {}

    .post td {
        backgroundtransparent
    }

    #bp_toc td.toc-entry-col1,
    #bp_toc td.toc-entry-col2,
    #bp_toc td.toc-entry-col3 {
        border1px solid rgba(0000.05)
    }

    #bp_toc td a {
        backgroundtransparent;
        color#222;
        floatnone;
        border-radius0;
        padding0;
        font-size100%;
        displayinitial;
        box-shadownone
    }

    #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-size13px;
        text-decorationnone;
        color#aaa;
        font-weight500;
        letter-spacing0.5px
    }

    .toc-header-col1 a:hover,
    .toc-header-col2 a:hover,
    .toc-header-col3 a:hover {
        text-decorationnone
    }

    .toc-entry-col1,
    .toc-entry-col2,
    .toc-entry-col3 {
        padding10px 5px;
        font-size90%
    }

    .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 {
        width100%;
        margin0 auto;
        counter-reset: rowNumber
    }

    .toc-entry-col1 {
        counter-increment: rowNumber
    }

    #bp_toc table tr td.toc-entry-col1:first-child::before {
        contentcounter(rowNumber);
        displayinline-block;
        min-width38px;
        margin-right.7em;
        background#fc5c65;
        color#fff;
        border-radius99em;
        font-weight500;
        text-aligncenter;
        font-size12px;
        padding0;
        line-height1.7
    }

    #bp_toc td.toc-entry-col1 {
        white-spacenowrap;
        overflowhidden;
        text-overflowellipsis;
        max-width400px
    }

    #bp_toc::-webkit-scrollbar {
        -webkit-appearancenone;
        width4px;
        height5px
    }

    #bp_toc::-webkit-scrollbar-thumb {
        background-colorrgba(000.15);
        border-radius10px
    }

    #bp_toc::-webkit-scrollbar-track {
        background-colortransparent
    }

    #bp_toc::-webkit-scrollbar-thumb:hover {
        background-colorrgba(000.25)
    }

    @media screen and (max-width:768px) {
        #bp_toc td.toc-entry-col1 {
            white-spacenormal;
            overflowvisible;
            text-overflowinitial;
            max-width100%
        }

        #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 {
            displaynone
        }
    }
</style>