How To Create HTML Sitemap In Your Blog

Tuesday, September 27, 2011

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.

Capture

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

    Capture

  2. Now under page title Sitemap, click Edit –-> you will see the interface below.

    Capture

  3. Click button Edit HTML –-> copy the HTML code below –-> paste it into the white space of post editor like above –-> click PUBLISH PAGE.

     

  4. Now, click Design –-> click Edit HTML –-> press Capture

    Capture

  5. Inside the Find’s text box, type ]]></b:skin> –-> click Next –-> you will be redirected to the yellow highlighted code like below

    Capture

  6. Copy the CSS code below –-> paste it ABOVE code ]]></b:skin> –-> click button SAVE TEMPLATE.



  7. Open your blog and click its related blog button to see the result.



Source

  1. Table Of Contents Widget For Blogger

19 comments:

{ Anne Lee } at: September 27, 2011 at 12:19 PM said...

thanks for sharing. I just get to know it.

{ Aizat Chik Suliman } at: September 27, 2011 at 6:07 PM said...

kembali ke blog tuan, saya dah berjaya dengan mengambil dari posting asal punca masalah dari susunan code css x ikut turutan apepon nice tuan :)

{ Cikgu Badar } at: September 27, 2011 at 6:36 PM said...

nice post

{ Zainal Abidin } at: September 27, 2011 at 9:22 PM said...

salam aizat...

terima kasih atas komen tuan yang sgt berharga itu...saya akan cuba perbaiki penyampaian entri saya in the future...TQ so much...:)

{ Zainal Abidin } at: September 27, 2011 at 9:24 PM said...

salam cikgu bada....

terima kasih kerana melawat blog saya...:)

Anonymous at: September 28, 2011 at 2:03 AM said...

HTML site map is a version of HTML text outline bulleted site navigation. Help people navigate through your website or blog, especially when they are unable to find the site searching or browsing the menus on the site.

psd to wordpress

{ Zainal Abidin } at: September 28, 2011 at 8:08 AM said...

hello john....

yes you are right bro....also it is another type of sitemap which useful for search engine visisbility...it is XML sitemap...

If Allah will...I will create one entry about this...

TQ for visiting my blog...:)

{ Ifan Qomarudin } at: September 28, 2011 at 9:17 PM said...

.: TQ 4 ur kind of visit, nice greetings...^_^

{ Putra Pratama } at: September 29, 2011 at 4:32 PM said...

visit me too....and follow my blog...thank you.

{ Rafi } at: February 29, 2012 at 9:36 PM said...

i created a html sitemap in my blogger site

{ MUSLIM } at: April 8, 2012 at 9:18 PM said...

terimakasih karena ada tutor ni sekarang saya dah punya sitemap

Anonymous at: April 12, 2012 at 5:24 AM said...

This is an out of date and tedious process...

Just use this free online tool to generate HTML/XML code for your website sitemap, then edit it a bit (if you want) then copy paste it to your new page (in HTML edit mode) which you may give it title Site Map. Save. Publish. Done.

http://www.sitemapdoc.com/Default.aspx

{ Zainal Abidin } at: April 14, 2012 at 5:00 PM said...

tq anonymous (April 12, 2012)

this is what I want when building this blog...KNOWLEDGE EXCHANGE...

your information is really appreciated...TQ bro..:)

{ FREE DOWNLOAD ALL SOFTWARE, Games } at: June 4, 2012 at 2:35 AM said...

nice information i will try
http://allsoftcrack.blogspot.com

{ Unjour Rajas } at: August 12, 2012 at 3:31 PM said...

This is not working:
Prove is here...
Sitemap tab at top

IDM Serial Number

Software Downloads

{ Zainal Abidin } at: August 12, 2012 at 9:47 PM said...

salam noman...

yes you are right...it is not working recently...

It prompt me and the readers a password when we want to view the html sitemap....

I will try to find the another way to builds my sitemap

{ onlinedr } at: September 22, 2012 at 7:43 PM said...

oo good information

{ kamig } at: October 1, 2012 at 2:42 PM said...

how to check that my site has or not...given one http://freetv478.blogspot.com/

{ Zainal Abidin } at: October 4, 2012 at 8:11 AM said...

hello kamig...

first of all you need to create the static page for you side...then you have to create a button that link to the static page you had created....

finally you can paste the codes above using the steps that I have mentioned

Post a Comment

Related Posts Plugin for WordPress, Blogger...