How To Add A Sitemap To Blogger With Post Title

Sitemap will help you to increase your website search visibility in most of the search engine e.g. Google, Bing, Yahoo and etc. Below discusses the simple way to add a sitemap in blogger with post title.

[... This post has been last updated on 28 th July 2015 ...] 

Adding a sitemap in blogger blogspost :

1. Go to Blogger Dashboard and Click Template
2. Click Edit HTML
3. Copy the CSS code below and place it before </head> tag

<style type="text/css">
#bp_toc {
    background: transparent;
    width: 100%;
    color: #999;
    margin-top: 10px;
    margin: 0 auto;
    padding: 0;
}
.toc-header-col1 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #e36564;
    width: 61%;
    transition: all 0.3s ease-in-out;
}
.toc-header-col2 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #e25756;
    width: 14%;
    transition: all 0.3s ease-in-out;
}
.toc-header-col3 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #e25756;
    width: 25%;
    transition: all 0.3s ease-in-out;
}
.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
    opacity: 0.9;
}
.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: 15px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-family: 'Viga';
    font-weight: 400;
    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;
    font-size: 92%;
    ;transition: all 0.3s ease-in-out;
}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
    background: #fdfdfd;
}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
    padding: 10px;
    font-size: 92%;
}
.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
    padding: 10px;
    font-size: 92%;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease-in-out;
}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover {
    color: #f56954;
}
span.toc-note {
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    background: #fff;
    color: #666;
}
#bp_toc table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: transparent;
}
#bp_toc tr:nth-child(even) {
    background: #fafafa;
}
#bp_toc tr:nth-child(odd) {
    background: #f5f5f5;
}
</style>

4. Now on Blogger Dashboard Click Pages
5. Click New page
6. Give the page name "Sitemap"
7. Click HTML
8. Copy the code below and place it there :

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://cdn.rawgit.com/Qposter/blogtoc/master/blogtoc.js" type="text/javascript"></script> 
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

9. Now publish it.

Don't Miss A Single Updates

✓Remember to check your email account to confirm your subscription.

Related Lessons