Sitemap (Table of Contents) is a page on your blog where all posts are arranged in accordance to their type, and it shows the links to all posts published on your blog so far. Sitemap (Table of Contents) is important for all bloggers to have on their blog. This make blog look professional, and it helps your blog visitors and readers to navigate through your blog post.
Here is a script that saves time and helps to update all new posts made on your blog to your sitemap (Table of Contents) page automatically. This script will display all posts made on your blog under their specified categories (Labels). This widget also comes with a CSS & Jquery to make it attractive.
Steps To Add Automatic Sitemap (Table of Contents) Generator
1. Add the CSS code below to your template. This can be done by going to Blogger >>> Template, use (CTRL+F) to search for ]]></b:skin> in your template and finally paste the CSS code below before ]]></b:skin> tag.
/*--------JustNaira TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
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');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
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');
} Save your Template after inserting the CSS
2. Create a Page: to create a new page, go to Blogger >>> Pages >>> New Page. Now give the page a title such as “Table of Contents” “Site Maps” or any title you wish. Click EDIT HTML button on the compose mode screen, now paste the code below in it.
<script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/Justnaira-tos-file.js"></script>
<script src="http://www.justnaira.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js" type="text/javascript"></script>Make sure you change http://www.justnaira.com to your own blog URL and then publish the page. Visit the page link to view your awesome blog sitemap (Table of Contents).
Sitemap (Table of Contents) Customization
The color of the category when in active mode is blue while when it is inactive it appears as dark gray.
So to change the active mode, simply change #9dc2e7 and #438cd2. Here is a color generator tool that will aid you to select the best color code that you love.
If you encounter any difficulties in the process of setting up your blog Sitemap, don’t hesitate to use the comment box below.
I tried implementing it in my blog , but not working. Is there any alternative way of adding the sitemap to Blogger? – http://www.africancupofnations.com/
@Victor, what’s the url to your sitemap?
Wow, it works great sir, thumbs up!!!
Olu, please I created the page, but my sitemap is just blank, and i have created two post to test it
Please what could be the cause. url is http://bestexamforum.blogspot.com/p/blog-page.html
@Odebright, follow the procedure.
Thank you very much…i just done it on my blog…God bless you
Thanks for this it working fine at Androidvillaz.com
It’s works!
Thank you so much.
wao thank you very much bro…..i always dont like the idea of editing my template before doing things like this bro, when i first i came to your site through google i closed the tab after going through the tutorial but i came back here when all the methods were not working for me but thankfully yours is working. God bless you for the tutorial, i have been looking for this for the past one month or so. thank you……..
@ Akpene Jacob, glad you found it useful.
This one works. I have not been able to activate the related posts widget till now. Please help. You can update me via my email [email protected]
@GreenBrain, not difficult to implement. Contact us for help.
HIII BRO I WOULD LIKE TO CUSTOMISE SITE MAP FOR ONLY FEW LABEL IS IT POSSIBLE
http://www.grabslife.com/p/blog-page_18.html
ABOVE URL SHOWS A PLENTY OF LABELS BUT I NEED ONLY FEW
@grabslife, That’s why it’s named site map. It generates all the link to all labels.
is their any way to show only for particular labels in a page
@grabslife, yes, there is a code to show post on selected labels.
thank you bro its helps me alot to sane my time
It is not working after inserting the codes.
@ITbomb, you must be missing something. Try again.
Thanks, this works fine and perfectly for me.
Hi there, Mine works but it’s not showing the COLOR MODE:
Please see it here!!!:)
http://tronicflow.blogspot.com/p/sitemap.html
I’m waiting for your answer….
@Justin, make sure the css codes are added correctly.
Thanks, that’s really good looking sitemap.
http://techstuff007.blogspot.in/p/sitemap.html
Its my sitemap table. well u can see from the link that all the blocks are active at once what to do..
Add:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>at the beginning of the second code.I followed the directions exactly, but I’m having a problem similar to the first commenter: the majority of the time, all the labels are expanded at once with all posts showing. Only about 1 out of 20 times that I refresh the page will it show the labels un-expanded like in your demo pic. I tried it in all browsers and am having the same problem in each one. Is there anything I am doing wrong?
Make sure you insert the CSS code in your blog template correctly.
Thanks for responding! I was certain that I inserted the css correctly, so I did a little more research and the short story is that I resolved my problem by adding:
above the code.
Glad you’re able to get it to work.
@Geo Nikola, change http://www.justnaira.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc in the code to your label url.
hi,s there anyway to show specific labels and not all the blog content?
@Silvia Masaracchio, Change max-results=1000 in the second code to 2000.
Hy and thank you for your amazing widget!!!
it works really good, but I still have a problem!! My blog has more than 1000 posts, and this widget shows just last 1000, can i improve that limit? Thank you anyway
Thank you so much, your instructions worked magnificently.
@Md Azeem, Search for font-size:12px; in the css code and then change its value from 12 to desired font size value.
How can i increase the font size here??
http://bhejamatpaka.blogspot.in/p/blog-page.html
Thanks..!
this is awesome , thanks a lot brother
i re-designed it http://www.ultimateprogrammingtutorials.blogspot.com/p/site-map.html
@Shubham Chaurasia, try and follow the process outlined duly.
@ Onosike Jerry E, glad you love it.
nice
hey the sitemap is not showing in my blog !
@Touchwood, I have checked your page and saw it. Just leave it like that.
I tried it several time. Please look at this – http://www.jumbofiles.in/p/sitemap.html
@Touchwood,try and follow the steps carefully because this tutorial was used to set the demo page.
Thank you soo much!! BUT, Not working as given in DEMO. All the posts are opened at once. Need Help!!