Create Fancy Sitemap Page for Blogger,Create xml and HTML Sitemap for Blogger

Dear Friends,Weclome to Learnmoretrick Blog. Today i will show you how to create fancy sitemap page for blogger and apply on your blog .If you are a professional blogger and new in bloging then you must have to create Sitemap page on your Blog,to know about What is SiteMap,its advantages  for SEO (Search Engine Optimization) and how to create it ,pease read this article in details.

What is Sitemap and its usages?

Sitemap is a medium ,by which any search engine Crwal your Content and submit to Search engine which may help to index your post on Google and can easily vissible in Google Search .So it is the part of Advance SEO setting on your Blogger and you must have to create it.

Sitemap for Blogger

In Blogger there are two types of  sitemap that we must be done on our blog namely .xml sitemap and HTML site map. where xml sitemap  should be create by online .xml generator and submit on google search console .onthe otherhand, HTML sitemap create manually on your blog page,on which we can see our all contents in a single page with its diffrent topic by which user also can read your articles with its categories.
Before Create Sitemap page on your Blog,you must submit your xml
Sitemap on Google search console /webmaster tool. After that you create your sitemap page on your Blog.If you create this page with some style then it is call stylish or Fancy Sitemap of your Blog .

How to create xml site map  for your Blog?

Xml Sitemap plays vital role to crawl your contents on google search console to index your all contents so you must create it if you want to show your content on google and want earning money faster.Before Create HTML site map you must create Xml site map for this folllow below Steps:

Watch video for how to create xml sitmap on blog /Advance SEO setting for Blog:

Step-1: Go to Google
Step-2: Type xml sitemap generator and search it and open .
or you can direct click here:
Step-3: Copy your Blog/Website main URL and paste 
Step-4: Click on generate
Step-5: Copy your sitemap codes then paste on your blogger settings
Step-6: Go to your Blogger dash board,Settings tab.
Step-7:Click Search perferences
Step-8: Click un custom robots.txt and ebable it
Step-9: Paste copied codes under robots.txt and save.
Step-10: Now open your Google search console  and select your blog under search property.
Step-10: Click on sitemaps (left side on webmaster tool/google search console)
Step-11: Click on add new sitemaps
Step-12: type yourblogURLhere/sitemap.xml
Step-13: click on submit.

How to create fancy HTML Sitemap page on your Blog?

Creating a HTML sitemap is not a tough job,But if you are new blogger and want to be professional on blogging then you must have an idea about it.I will show you you simple steps lets follow it and create your Sitemap.

Step-1: First login your Blogger with your Gmail account.
Step-2: Choose your blog from left top corner,where you want to add sitemap page.
Step-3:Now go to pages on your dashboard and select create new page.
Step-4: Give a page title Sitemap
Step-5: Paste below code (any one codes )under HTML section of your sitemap page.

Design-1:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">  
 .grid-sitemap {  
  overflow: hidden;  
  position: relative;  
  height: 565px;  
  margin: 20px 0 40px 0;  
 }  
 .grid-sitemap iframe {  
   display: block;  
   width: 100%;  
   height: 680px;  
   margin-top: -115px;  
   margin-left: -5px;  
 }  
 </style>  
 <br />
<div class="grid-sitemap">
<iframe src="https://learnmoretrick.blogspot.com/view/flipcard"></iframe>  
 </div>
</div>

Design-2:

<style type="text/css">
.tb-sitemap {
    background-color: #222;
    color: #ddd;
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
    font-size: 14px;
    font-weight: 410;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,.1);
}
.tb-sitemap .toc-header {
    color: #fff;
    font-family: inherit;
    font-weight: 410;
    font-size: 14px;
    background-color: #1A1B1E;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #5c5c5c;
    border-bottom: 1px solid #5c5c5c;
    transition: initial;
}
.tb-sitemap .toc-header:hover {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%);
}
.tb-sitemap .toc-header:before {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    float:right;
    top: 10px;
    right: 10px;
    border: 5px solid transparent;
    border-color: #aaa transparent transparent;
    transition: all .3s ease;
}
.tb-sitemap .toc-header.active {
    background: #1a1b1e;
    color: #fff;
}
.tb-sitemap .toc-header.active:before {
    border-color: #fff transparent transparent;
    top: 5px;
    -webkit-transform: rotateundefined-180deg);
    -moz-transform: rotateundefined-180deg);
    -ms-transform: rotateundefined-180deg);
    -o-transform: rotateundefined-180deg);
    transform: rotateundefined-180deg);
}
.tb-sitemap .loading {
    display: block;
    padding: 14px;
    text-decoration: blink;
}
.tb-sitemap ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}
.tb-sitemap li {
    counter-increment: step-counter;
    line-height: normal!important;
    margin: 0!important;
    padding: 7px 7px 7px 16px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    transition: initial;
}
.tb-sitemap li:first-child {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
.tb-sitemap li:nth-child(2n) {
    background: rgb(71,62,62);
    background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}
.tb-sitemap li:nth-child(2n+3) {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}

.tb-sitemap li::before {
    content: counter(step-counter)'.';
    margin-right: 5px;
}
.tb-sitemap a {
    color: #fff!important;
    text-decoration: none;
    font-size: 90%;
    transition: initial;
    font-weight:normal!important;
}
.tb-sitemap a:visited {
    color: #fff!important;
    transition: initial;
}
.tb-sitemap a:hover,.tb-sitemap a:visited:hover {
    color: #fff!important;
    text-decoration: underline!important;
    transition: initial;
}
</style>

<br />
<div class="tb-sitemap" id="tb-sitemap">
<span class="loading">Sitemap Loading..</span>
<script type="text/javascript">
var toc_config = {
 url: 'https://learnmoretrick.blogspot.com',
 containerId: 'tb-sitemap',
 showNew: 12,
 newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>',
 sortAlphabetically: {
  thePanel: true,
  theList: true
 },
 maxResults: 9999,
 slideSpeed: {
  down: 400,
  up: 400
 },
 slideEasing: {
  down: null,
  up: null
 },
 slideCallback: {
  down: function() {},
  up: function() {}
 },
 clickCallback: function() {},
 jsonCallback: '_toc',
 delayLoading: 0
};
</script>
<script src="https://docs.google.com/uc?export=download&id=1znP9zLmzL9rN_zkRHGD7JqYfl17e35Ko" type="text/javascript"></script>
</div>
</div>

Design-3:

<script type="text/javascript">

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}

function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}

function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}



function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>
' + temp1 + '</h4>
<div class="ct-columns">
');
        firsti = a;
        do {
            document.write("<p>
");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>
");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div>
</div>
");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

</script>

<script src="https://learnmoretrick.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=bloggersitemap" type="text/javascript"></script></div>

Note:Replace higlighted URL by your Blog URLYou can customize your text styles on highlighted area.

Design-4:

For this design You need extra some technique.First : Go to your blogger dashboard> Theme >Edit HTML>press CTRL+F for search box >Search ]]><:b/skin>Paste below code just above ]]><:b/skin> then save templete

Download 

Then use below code same as steps:

<div id="bp_toc">



</div>



<script
src='http://mybloggerlab.com/js/sitemap.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>

Step-6:Then click on compose mode
Step-7: Go to post settings before publish your page ,which is on right side of your page.
Step-8: Click on Options and check for Don't allow under readers comments.
Step-9: Now click on Publish tab to publish your sitemap.
Step-10:View your page ,you can see your sitemap.

Where to add sitemap page on your Blog?

After creating a sitemap you should embeded on your Blog ,for this you can show it on your main header menu ,where your Home,terms and conditions,Privacypolicy,Contact,About pages are already linked.To insert your sitemap on your header menu bar folow these steps:

Step-1: Go to your Blogger Dash board.
Step-2: Click on Layout 
Step-3: Search for Header menu Widget on your layout.
Step-: Open it and insert new page /title.
Step-5: Give a title name: Sitemap
Step-6: Open your Sitemap page and Copy its URL
step-7: Paste sitemap page URL under Link.
Step-8: Save this widget 
Step-9: Click on Save arrangment.
Step-10: View your Blog .

Hope you Guys have an idea to how to add fancy sitemap on your Blogger.For more tricks please fell free to comment and upto date with us.ThankYou!!

fff

Ste