Saturday, September 29, 2012

Add Awesome Table Of Content / Site Map To Your Blogger

This is also great widget for you blog.Because Every table of content what categorize, showing
here with links.So, your visitors can check every post according to categories.Try to add it to your
blog. Its awesome You can check demo from below link.Earlier also i posted about same thing with different style.Look at it from here Hope you will like this.

Table+Of+Content+/+Site+Map
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.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'); 
}

7. Now click Pages on left side like below.


8. Now click blank image like below.
9. Paste below code in HTML area

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

</script> 
<script src="http://www.bloggertrix.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>
Replace Bloggertrix with your site name.

10. Now click publish.

You can add this link to menu bar.
You are done...

13 comments:

  1. Thanks for this great post..
    Very COOL man..
    Keep it up...

    www.MoreBlogTools.com

    More Blog Tools

    ReplyDelete
  2. Your tips are remarkable. I regularly read your blog and its very helpful.

    ReplyDelete
  3. not working in my blog
    exatly followed the procedure.

    when i am clicking the sitemap (post title) the page is simply reloads and nothing happened

    ReplyDelete
  4. is there anyway to choose manually which labels i can show in this wigdet?

    thanks

    ReplyDelete
    Replies
    1. In here you cannot do it.
      Do Configure Labels on labels widget.

      Delete
  5. hi i love design but i have some problem.
    i follow the procedure but total structer is showing it will not hiding
    URL: http://programming-ram.blogspot.in/p/blog-page_7.html

    ReplyDelete