Skip to main content

Table of Contents For Bloggers

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). 

Go to new page, Make a new Page in Blogger with a suitable title
In the page editor, switch to HTML mode, and paste the following code into the Post Editor.

<div id="bp_toc">Loading Table of Contents. Please wait....</div>
<script src=http://bloggergadgets.googlecode.com/files/blogtoc_orig.js
type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>


Publish the Page and open it in your web browser.You will be able to see the Table of Contents, but it would be messed up
Then . Go to Template Designer. If you are using the new Blogger UI, then you can find the Template Designer at Template > Customize . If you are still using the old UI, then you can find it on the Layout tab.Now go to Advanced > Add CSS

And add following code
#bp_toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  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: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%;
}

Apply the changes to your Blog and check your TOC page once again
click here for thanks
 

Popular posts from this blog

General type of Washers

Free Email Providers List

Email has become an important part of our lives and is considered one of the major forms of communication. Earlier emails were used at a very small scale, only for conducting small transactions and information flow between an organization internally. With time, email became a major form of communication worldwide. Today, most of the business transactions and business communication is conducted through secured email services. Many email services evolved to provide free email solutions . This top ten list of best free email providers is to familiarize you with the best free email solutions available. So, if you are looking for a new email address, read this review.

Free English Movie Direct downloads Links

Wanna download all sorts of interesting movies from free movies download websites for your pc? The following will introduce various free movies download websites.