Beautiful Sitemap or Table of Content For Blogger

Beautiful Sitemap or Table of Content For Blogger

blogger sitemap

A Blog site become popular by their unique content. And if your site has more unique content then your Blog will be more popular. On the other hand, visitors love to see huge content in a site thus they get everything from one site. So Blogger should cover all types of topic thus visitors don't leave your site after landing within 1 or 2 minutes. There are many site those are designed horribly. Because site is not user friendly. And to make a site user friendly, your site must contain easy navigation and search options. But Blog visitors don't often like to search the content because some users hasn't any up-to-date idea about latest release. So in this case if they visit entire Blog site then they will  get an idea about the content. But this is not possible for all users. So to solve this issue Sitemap or Table of Content works like magic. because a visitor can see all content on any Blog at a time and they can search their preferred content.

Generally a Sitemap or Table of Content display the total number of posts in a site thus visitors can easily navigate to desired content. There are many Blog visitors those who don't like to view every post part by part and they feel interest by reading the Content headlines only. So Sitemap or Table of Content widget is ideal for those kinds of readers. In addition this sitemap has several benefits. Such as follows-

  • Visitors can see all posts at a glance.
  • Visitors can Easily navigate in any post.
  • Not any extra loading time required.
  • Your site will looks like professional
table of content

In this article I am going to share a beautiful Sitemap or Table of Content which is really professional. And it will load instantly. However don't worry about loading time because it will load instantly. Generally ideal place for sitemap is Blogger page. For this reason, I will show you about adding Sitemap or Table of Content in a Blogger page. So to add this Sitemap or Table of Content widget please follow the below steps-

Step 1 Sign in to your Blogger account and go to Dashboard

Step 2 From the Dashboard, click New page from Pages tab.

Step 3 After that now switch Compose view to HTML view and paste the below code.

HTML view

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.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:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
<script src='' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>


  • To adjust the page height please alter max-height:1200px with greater or lesser pixel number.
  • To change the table header and border color please change background:#008CDB;. you can get the color code from our Color Picker.
Step 4 And now simply click on Publish button from top right corner. 

Now check your Sitemap or Table of Content page and see this will show all the post's headline, Post date and label of your Blog. 
vaggelis says: 4/08/2015

Perhaps the best widget, is there any way to add some indication as loading ;

thank you

BloggerSpice says: ADMIN 4/09/2015

Hi Evaggelou, Most of the sitemap widget take longer time to load. I just tried to make it faster so didn't used any loading effect. If you use then widget will be slower to load. Thanks

চাঁদপুর প্রতিদিন says: 4/10/2015

রাব্বী ভাই এটা অসাধারন একটা পোস্ট। কিন্তু ভাই আমার এটা সমস্যা হয়েছে। তাই আপনার বুঝার সুবিধার জন্য লিংকটা শেয়ার করলাম। আশা করি সমাধান দিবেন।

Unknown says: 4/13/2015

better one is here
nd Thanks for your beautiful article
Add Stylish Table of Content or Sitemap in Bloggers Blog (7 Types)

BloggerSpice says: ADMIN 4/17/2015

Ki problem vai bujhlam na? Ami to dekhlam shobkico thik ace?

BloggerSpice says: ADMIN 4/17/2015

Thanks Aziz for dropping your feedback.

Unknown says: 4/19/2015

@evaggelos evaggelou, to add some indication (loading)...


BloggerSpice says: ADMIN 4/19/2015

Hi Maz, Nice Copy

Unknown says: 4/19/2015

Hi Mohammad. Thanks. Just a little customized, in french and with a loading fonction ;-)

BloggerSpice says: ADMIN 4/19/2015

Customization was pretty cool. Hopefully I will use that style in my next Sitemap widget. Thanks.

pratik says: 5/16/2015

Thanx Mohammad, helps a lot, how can i just pull out the number of Posts on blog by modifying this code please ?, thanx for the help

BloggerSpice says: ADMIN 5/17/2015

Hi Pratik..Thanks for your comment. You can show the table of content on your Blog homepage. After creating this table of content just follow the tutorial from below link to set the table of content as your Blog homepage.

Thank You.

Unknown says: 9/05/2016

just say thank you :)

BloggerSpice says: ADMIN 9/06/2016

Welcome Tuan Le Minh and Thank you so much for your feedback. :dn

NusaMebel says: 10/19/2016

Hi Mohammad Fazle,

Could you tell me where do you host the script src?
This one was been 404. Need your help here..

Many thanks.

BloggerSpice says: ADMIN 10/19/2016

Hello Halih Anggoro Mukti,
Due to stop hosting service from Google Drive this widget was stopped working. I just hosted file on RawGit and updated this widget script. Now it will work. Thanks for your comment. :up

NusaMebel says: 10/20/2016

Thanks Mohammad Fazle,

You've helped me. BTW, one more question, how to change the text
DISPLAYING ALL ' + postTitle.length + ' POSTS
to be a normal letter case (I mean there will be Upper and lower case).

I ask your permission to modify the language to be Indonesian and re-hosted the script just for a preventive act. :sp

Many thanks.

BloggerSpice says: ADMIN 10/20/2016

Hi Galih Anggoro Mukti,
For changing the DISPLAYING ALL just locate below line and remove transform:uppercase;. now you can write text normally.

span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}

for changing the Post title column length you can adjust the below 3 code line. First line is for Post title column width 250px.

.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}

Thank you. :yeh

hekthatman says: 7/10/2017

Cool Sitemap For Blogger And Thank You

BloggerSpice says: ADMIN 7/12/2017

Thank you :up

Unknown says: 10/01/2017

Thanks for this tutorial admin i aldready applied it here .Nice design

BloggerSpice says: ADMIN 11/13/2017

Hi Pinoy Tut :)
Nice to see it. Thanks for using my widget.

KeniVinh says: 11/17/2017

Thanks you!!!

BloggerSpice says: ADMIN 11/17/2017

Welcome Bro :)

Anonymous 10/07/2018

Rabbi, Is there a way to customize the order of the labels listing in the "LABELS" column? e.g. I'd like to display them as: "CSS , Blogger Tricks", instead of the default "Blogger Tricks, CSS" - Is it possible?

Anonymous 10/07/2018

Rabbi, Is it possible to create multiple blog "PAGE"s each with different label filtered? e.g.- a page that only shows all blogs with "BLogger Tricks" label and another page that only shows all blogs with "CSS" label. The reason is bcoz I have too many blogs that instead of showing 200 of them all on the same site map, I'd like to create tabs that would give them shorter list in order to make it easier for users to navigate.

BloggerSpice says: ADMIN 10/09/2018

Hi There
Please try another sitemap widget through below URL.

Thank you :)

IngeCivirtual says: 10/29/2018

thank you!!!

Anonymous 11/03/2018

Bad news Rabbi. Have you seen this?

RawGit has reached the end of its useful life
October 8, 2018

RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served.

If you're currently using RawGit, please stop using it as soon as you can.

Anonymous 12/04/2018

Thank you so much for your great article , please visit my blog here

Contact Form


Email *

Message *