This Domain is for Sale! Contact for more details.

How to create an HTML sitemap page for blogger?

Are you looking for a tutorial on how to create an awesome HTML sitemap page or blogger table of contents page for your blog? After reading this post, you will be able to create your awesome blogger table of contents page or HTML sitemap page.This is very simple and very easy to follow. You will be able to create an HTML sitemap page that looks so beautiful.

Why we should put  a HTML sitemap page?

Sitemap or table of contents page could make our blog post well organized and easy to navigate with our visitors. This page is recommended to every website or blog as well. There are many codes to use in creating a sitemap out there, but I found this as the best codes to create an attractive sitemap page with no hustle editing the codes every time you add a new label.
Take a look at this live demo, Sitemap Demo
When you publish a post with a specific label, it automatically added to your sitemap with a red word “new” at the end of the title.

To start your own sitemap, just follow the simple steps below:

Step 1: Go to and log in to your account.
Step 2Select your blog site.
Step 3: Click template then edit HTML.
Step 4: Now, click on html codes then press “Control+F” then type

]]></b:skin> in the search box.
Step 5: Copy the codes below and paste just before
]]></b:skin> in your template then click “Save Template”

Free Search Engine Submission


<!-- site map page code of -->
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
<!-- end of site map code of -->

Step 6: Go to “pages” and click “new page”.

Step 7: Put a title of your sitemap page, click “HTML” then copy – paste the code below to your html page:


<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="" type="text/javascript"></script>
<script src=";alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="" type="text/javascript">


Step 8: Refer to the screenshot above,edit the underlined url and replace with your site url.
Step 9: Click publish button and you’re done.
Congratulations! You just created your awesome sitemap.
“I am not the owner for this sitemap code,Im just sharing it because i like the way he/she design , so nice and awesome. credits to the creator of this sitemap code”. 


Leave a Comment

Your email address will not be published. Required fields are marked *

Your almost done! 70%

* Your personal information will be safely stored in our database. We do not share or sell this information to anyone.

you're almost done! 60%
[et_bloom_inline optin_id="optin_3"]