How To Create HTML Sitemap In Your Blog

Sitemap is important for your blog. If you frequently update your blog’s entry, it is useful to put a sitemap in it. It will allow your visitor to review the contents inside your blog.



As I said in my previous post, they are 2 types of sitemap, which one is HTML sitemap and the another is XML sitemap.

Today, I will show you how to create the HTML sitemap. HTML sitemap is suitable to be made as “table of contents” of your blog and is readable to human eyes.



Disclaimer

Please be informed, this procedures had been done based on my blog template. I SHOULD NOT BE responsible if any harm happen to yours during following my procedures. Please backup your blog template before doing any modification on it.



Before The Procedures

Please note, you do not need to perform the following steps if your blog already has the static page and blog button.

1. Create the static page. Click here if you need the guide.
   
   
2. Create the blog button and link it to your static page. Click here for the guide.

The Procedures

Now, I assume you had created your own blog’s button and static page. Both of them had been linked to each other. To create the HTML sitemap for your blog, please follow the steps below.

1. Sign in to your blogger dashboard –-> click Edit Posts –-> click Edit Pages ––> you will see the interface below. 
   
   
   
   
2. Now under page title Sitemap, click Edit –-> you will see the interface below.
   
   
   
   
3. Click button Edit HTML –-> copy the HTML code below –-> paste it into the white space of post editor like above –-> click PUBLISH PAGE.
   
   <div id="bp_toc">Loading Sitemap. Please wait....</div> <script src="http://blogergadgets.googlecode.com/svn/trunk/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript" start-index="501"></script> 
   
   
4. Now, click Design –-> click Edit HTML –-> press
   
   
   
   
5. Inside the Find’s text box, type ]]></b:skin> –-> click Next –-> you will be redirected to the yellow highlighted code like below. 
   
   
   
   
6. Copy the CSS code below –-> paste it ABOVE code ]]></b:skin> –-> click button SAVE TEMPLATE.
   
   #bp_toc { border: 2.5px solid #B00C0C; background: #ffffff; padding: 5px; width:650px; margin-top:10px; font-family:Trebuchet MS; font-size:17px; } .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:350px; } .toc-header-col2 { width:75px; text-align=center; } .toc-header-col3 { width:225px; } .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:80%; text-decoration:none; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%; }
   
   
7. Open your blog and click its related blog button to see the result.

Source

1. Table Of Contents Widget For Blogger