How to Create Sitemap page in Blogger?

How to Create Sitemap page in Blogger? is a common question for new bloggers. Blogger is a simple and user-friendly free blogging platform. a sitemap is most important to index your website or blogs in search engines like Google, Bing, and Yahoo. Today we are here to tell you How to Create Sitemap page in Blogger?

What is Sitemap?

sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to more intelligently crawl your site. 

Here is a step by step tutorial to How to Create Sitemap page in Blogger? in your blog like a pro. You should follow these steps carefully.

Read More: Urdu Jahan Premium Urdu Blogger Template

  • Login to your blogger
  • Go to Dashboard
  • Select Themes from menubar on left side
  • Then select Edit HTML
  • Now find the below code by ctrl+F


When you find this code, Just above the code paste the following code given below. You can also customize the code according to your desired. You can change font-family, font size, background colors and anything else.

/* Sitemap plugin By SAQI Studios */
#bp_toc {
    color: #666;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
span.toc-note {
    display: none;
#bp_toc tr:nth-child(2n) {
    background: #f5f5f5;
td.toc-entry-col1 a {
    font-weight: bold;
    font-size: 14px;
.toc-header-col3  {
.toc-header-col1 {
    padding: 10px;
    width: 250px;
.toc-header-col2 {
    padding: 10px;
    width: 75px;
.toc-header-col3 {
    padding: 10px;
    width: 125px;
.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: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
    text-decoration: none;
.toc-entry-col3 {
    padding: 5px;
    padding-left: 5px;
    font-size: 12px;
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
    color: #666;
    font-size: 13px;
    text-decoration: none
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
#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);
    min-width: 1em;
       min-height: 3em;
    float: left;
    border-right: 1px solid #fff;
    text-align: center;
    padding: 0px 11px 1px 6px;
    margin-right: 15px;
td.toc-entry-col2 {
    text-align: center;
 /* Sitemap Code end - */

After pasting the code, Now save your template. you are half done. Now next to create a sitemap page. Let’s start. Now follow the following steps carefully.

  • Go to Menubar
  • Select “Pages
  • Create “New Page
  • First, write “Page Title” “Sitemap” (Recommended)
  • Select the HTML option and paste the following code
<div id="bp_toc">
<script src="" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

After pasting the code click on “Publish” and you are done. Now click on view and you create your sitemap page.

If you want any change or help please give your feedback in the comments section. Thanks

Leave a Comment