How To Insert Attractive "Table of Contents Page" Sitemap in Blogger

Advertisements

It's very important for a publisher To insert Sitemap (Table of Contents) in his blog  to make it look more professional. Basically Sitemap (Table of contents) is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.

We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you  publish a new post on your blog it will automatically added  to your Table of Contents Page so it really saves lot of time.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS). 

This widget is designed and optimized with CSS so it looks really attractive and has some Jquery which do attract your eyes.So let us start our fingers rolling over the tutorial.

But first I know you would love to see the preview of the widget,so first see the widget which we are going to apply on our blog




Features:

  • The sitemap (Table of Contents) updates automatically when you publish a post
  • It will automatically tag your latest posts as NEW in sitemap (Table of Contents)
  • All of you posts will be well arranged under there given categories (Labels) 
  • Has a fresh and new look with drop down feature

Adding a Table Of Content in Blogger:


To insert an Attractive Table Of Contents (Sitemap) in Blogger Follow these Steps
  • Go To Blogger >> Template >> Edit HTML >> Proceed 
  • Now search For  ]]></b:skin> in Your Template with (CTRL+F)
  • when you find  ]]></b:skin> just above it  place the following code


/*--------MyBloggerLab 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'); 
}

  • Now save the template by pressing Save Template button 
  • Now we will create a new page for our Table of contents Remember:we will create a new page not post.To create a new page go to Blogger >> Pages >> New Page >> Blank Page 
  • Now Give title to your page i.e "XYZ Table Of Contents" and now under EDIT HTML tab (button) paste the following code



<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">

</script> 
<script src="http://www.mybloggerlab.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script> 
<script type="text/javascript">
var accToc=true; 
</script> 
<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>

Now after pasting the code above look for http://www.mybloggerlab.com and replace it with your blog URL and Publish the page now go and view your Amazing Table of Contents with Drop down style.

I Hope you would like this Table Of Contents (TOC) Widget,This widget is totally unique the reason currently we are the only one who has the working version of the Abufarhan Table of contents widget with MyBloggerTricks CSS styling so if you feel any difficulties feel free to ask till then peace, blessings and happy TOC creating
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

45 comments

April 19, 2012 at 6:08 PM

Hello thanks for sharing this, I tried this in my test blog (demonkoikoi.blogspot.com) and it is working fine for me.Tanks Again

Editorial Team MOD
April 20, 2012 at 12:10 AM

@Parigyan Tamuly
Its our Pleasure That You Liked it Pal,Thanks

April 24, 2012 at 7:02 AM

http://geekyparigyan.blogspot.in/p/table-of-contents.html I have added i really like the "new" text!!

Editorial Team MOD
April 24, 2012 at 7:34 AM

@Parigyan Tamuly

Yeh Brother the "NEW" Text is just amazing it updates automatically. When ever you will post updates these Text Automatically Transfers To Your New Post From Old Posts. Thanks For Liking Pal

May 1, 2012 at 3:01 AM

http://itech24-7.blogspot.com/p/sitemap.html


See The Above Url..It Is Looking Like That What To Do..Please Reply As Soon As Possible

Editorial Team MOD
May 1, 2012 at 9:32 AM

@Ramakrishna Ch
Hey Bro, Don't worry The template you are using is not well formed this is the reason why the Page is not opening. Follow the Same Steps but Don't Create a Page instead of Creating a Page Publish a Post...I repeat Again Insert your Sitemap in a Post Not in a Page. And it will work Perfectly. Peace and Blessings.

May 1, 2012 at 9:36 AM

Really great.
Is it possible to add "expand all" button in this site map page?

May 1, 2012 at 9:39 AM

@Syed Faizan Ali... Thank You For The Solution....Can The Template Be Changed...So That I Can Add Other Pages Too...Thanks in advance if you find a solution for my problem

Editorial Team MOD
May 1, 2012 at 9:43 AM

@Dr.Depak Muniraj
Yes Brother, We can do that but it will take time. If you want it quickly then just remove the JavaScript coding and it will expand every Category automatically in the Sitemap But by doing this the categories will remain expendable. Peace and Blessing.

Editorial Team MOD
May 1, 2012 at 9:45 AM

@Ramakrishna Ch
Yeah why not If you want to Change a Template then Download any template from http://btemplates.com/ Then Go To Blogger.com >> Your Blog >> Template >> Backup/Restore (This Button will be on Right Side Under your Blogger Display Name) >> Now Select Choose File >> Upload Your Template >> Save >> and Done.Peace and Blessing Buddy

May 1, 2012 at 9:47 AM

sorry!...i mean not to change the template...any code to display the page properly

Editorial Team MOD
May 1, 2012 at 9:55 AM

@Ramakrishna Ch
Oh alright Brother it is complicated but not impossible, You can give admin access to me so I can help you further in this issue.

Editorial Team MOD
May 1, 2012 at 9:58 AM

@Ramakrishna Ch
As currently i Don't know what is the issue in the template. Peace Pal

May 1, 2012 at 9:59 AM

i can grant you will you do it for me now.....i want your emal id...mail me it ti chnani42@gmail.com

Editorial Team MOD
May 1, 2012 at 10:00 AM

@Ramakrishna Ch
Email Sent Brother, Yes why not i said previously MBL (MyBloggerLab) is yours we are here to assist you every time :).

May 16, 2012 at 3:17 AM

YTou must read this article before adding toc or sitemap widget on blogger :

http://www.netinfozblog.in/2012/05/is-sitemap-widgets-for-blogger-good.html

This article is about its advantages and disadvantages.

June 2, 2012 at 12:38 AM

Salaam brother can you tell how to hide certain labels in sitemap http://subulussallaam.blogspot.in/p/site-map.html

Editorial Team MOD
June 2, 2012 at 12:49 PM

@Subul us Sallaam
Hey Pal, Sorry Brother But Currently In This BETA of Sitemap this function is not added. But Soon in latest version we will try to remove some bugs and will add more stunning features. till then Stay tuned. Peace Buddy

June 3, 2012 at 1:44 AM

Im Indonesian Blogger. this is great, i have it succesfully visit the beautifull blog created by me http://blogger-totabuan.blogspot.com

Anonymous
June 4, 2012 at 12:11 PM

Hello, I have about 4000 post with label, 1 post 1 label. Can this show all ? :(

Anonymous
June 5, 2012 at 3:47 AM

Thanks for sharing about sitemap tools. But bing webmaster do not accept my sitemap

July 6, 2012 at 8:38 PM

Great Dude Thanks A Lot :)

July 14, 2012 at 2:50 AM

thank you so much... this works perfectly on my blog... i need a little favor!!! can we just sort the desired lables in table of contents??? look at my blog's table of contents.. it kind of messy... i just need to show the desired lables in contents page??? is that possible??? http://www.galaxyyoung.in/p/table-of-content.html

Editorial Team MOD
July 14, 2012 at 4:09 AM

@Em Ji Madhu
For that You have To Do it Manually If you want to List only Certain Labels. You have To Do Everything from Scratch and it will not update automatically you have to do on your own then. Soon we will release that Manual Site map Stay tuned

August 19, 2012 at 3:25 AM

I test to
http://basecinema.net/
thanks alot

September 4, 2012 at 3:04 AM

thanks bro
http://digiunive.blogspot.com/

September 16, 2012 at 10:04 PM

hi bro, how can i put the table of content and the details in the same page?

Editorial Team MOD
September 17, 2012 at 12:33 AM

First Write Your Details and Then Paste the Above Coding. By doing this both things will appear on same page. Peace

September 28, 2012 at 7:53 PM

hi Ali,

My sitemap page showup when i use google chrome, but it didn't show up when i use firefox or IE. Already clear cache and cookies. Could you please help ? My blog is www.abangdownload.com

Any help would be appreciate

October 10, 2012 at 3:10 AM

solved, thanks for the widget

www.abangdownload.com

October 10, 2012 at 8:04 PM

after adding code that page tabs are not appearing

Editorial Team MOD
October 11, 2012 at 12:30 AM

What kind of error you are actually face. Please provide details. Peace

October 14, 2012 at 4:03 AM

Thank you!

It is working on my blog @ http://discoverbooktravel.blogspot.com !

October 20, 2012 at 12:27 PM

I am getting a TOC page, but it is blank. I do have a question. On the step that says to paste the code with the script, it doesn't say whether to paste it before, after, or replacing the existing code. Might that be my problem?

Editorial Team MOD
October 20, 2012 at 1:21 PM

Thanks for Commenting, You can Paste the Script any where you like in the Blogger Post Editor (HTML TAB). Hope that helps. Peace

February 18, 2013 at 5:19 AM

Thanks a lot it worked absolutely well.
I implemented it on my blog sajeelit.blogspot.com

February 18, 2013 at 5:45 AM

At the start it worked properly but now it has messed up with my template.
Now i cannot upload my previous template.

Tim
April 2, 2013 at 6:19 PM

Thanks mate, worked really well. Would it be possible though to display the posts under each heading in chronological order? (i.e. the order with which they were posted)

thanks heaps,

http://onandoffthegringotrail.blogspot.com.au/p/blog-page.html

Editorial Team MOD
April 3, 2013 at 8:41 AM

Unfortunately, it is not possible with the current setting.

April 3, 2013 at 1:33 PM

Hi I've been loooking around on Google when i came across your site. The sitemap works fine and looks very profesional,thanks for sharing.

Tim
April 4, 2013 at 7:00 PM

Would it be possible to go into the .js scripts and change them?

Editorial Team MOD
April 6, 2013 at 2:03 AM

Yep, you can try your luck!

March 8, 2014 at 3:57 AM

thanks allot for this amazing post i have been looking for this and finally i got it...
http://ansmachine.blogspot.com/p/sitemap.html take a look of my sitemap

December 13, 2014 at 12:52 AM

http://jobs-bowl.blogspot.in/p/sitemap.html

yes it is very helpful

July 28, 2016 at 9:47 AM

I have alot of pages, and only one post. This only shows posts. How do I get pages too?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.