Widgets

Posted by : Bloggerwits Thursday, January 8, 2015

Table of Content
As you have seen, some blogger have added Table of Content on their site and when you are going to read an article you will see that. It gives a unique layout for the post, if you want to display your article in a better way, all you need to add Table of Content code on your sites. Many visitors see table of content before reading your article, therefore better to add interesting and helpful content on the list. Adding this widget on your blog is easy, all you need to add a code on your blog and save it. You can use this step-by-step tutorial to insert code on your blog.

How to Add Table of Content on your Blog?

Step 0- Always Backup your Template
Step 1- Select your blog and click on "Templates" and "Edit HTML"
Step 2- Click inside the code area and press "CTRL + F" for search box, and search
 ]]></b:skin>
Step 3- Paste code "Above"   ]]></b:skin> Tag
/*--------MBT 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'); 
}
Step 4- "Save Template"
Step 5 - Now create a new page, make sure you are creating a new page not a new post.
Step 6- Give a name for that page like" Table Of Contents" etc.

Step 7- Now edit HTML of that page and paste the code below.
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script> 
<script src="http://www.bloggerwits.net/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://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
Just replace http://www.bloggerwits.net with your blog URL and Save.
If you want to change colors and modes just change blue color codes. That's it. 

Leave a Reply

Popular Post

Copyright © 2014 Bloggerwits