How to Create a Free Html Sitemap Page For Blogger?

By
Advertisement
Sitemap is a list of all the internal links of your blog. Default blogger sitemap is provided by feed burner, which is also a new feed provider. Many bloggers have already added sitemap for Better SEO, as it provides internal linking of all your blog posts. In the blogging platforms like wordpress there are several plugins for adding a sitemap for blog, but it is still not available on blogger platform. But if you want to add a sitemap page on blog, you can do so with a simple Html coding.
How to Create a Free Html Sitemap Page For Blogger 2014?



Let's Get Started:

1. Log in to your blogger blog. 
2. Navigate to Pages>New Page .
How to Create a Free Html Sitemap Page For Blogger 2014?
3. Enter the Page Title as Sitemap. And Paste the following code in the main body.


<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>


<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.e-trickszone.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<div style="clear: both; text-align: center;">
<a href="http://e-trickszone.blogspot.com/2014/04/how-to-create-free-html-sitemap-page-for-blogger-blog.html" target="blank"><span style="color: black; font-family: Georgia, Times New Roman, serif;"><i>Get This Widget For Your Blog</i></span></a></div>
</div>
</div>
>

Replace http://www.e-trickszone.blogspot.com With your blog's URL.

4. Publish the page.
Now your sitemap page is ready enjoy it.

Check the E-trickszone sitemap page here at:

http://e-trickszone.blogspot.com/p/sitemap.html




3 comments:

  1. hi, thanks for the script above. It works great!
    However, i have 1 problem... Im able to see the Sitemap from my dropdown list on Mobile version on my Android. But when i change to Web version. Though the sitemap word appear on my page, it cannot be clicked to access.
    Any idea why?

    ReplyDelete
    Replies
    1. Try installing the codes again. I hope the code works on mobile version as well.

      Delete
  2. Hi,
    It works great on both mobile and and web version now.

    I just realised something today. The sitemap doesnt show all my posts.
    For example, i got total of 171 book reviews. It only show me 144 book reviews.

    Could u please advise? Thanks!

    ReplyDelete

Please leave your valuable feedback here. Don't spam, stay safe...

Alexa Rank

Copyright

DMCA.com
MyFreeCopyright.com Registered & Protected