24.Add Index Table of Content to your Blog Demo

24Add Index Table of Content to your Blog Demo

Step1:-Go to "Lay out">>"Add a Widget">>Click Html/Java script>>copy the following code and paste it ...Put Title of widget as "Index"

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #00FF00; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #000000;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb;

border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle;

text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>


<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>Index Page1</a> <a>Index Page2</a> <a>Index Page3</a> </div>
<div style="width: 350px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
1.<br>
2.<br>
3.<br>
4.<br>
5.<br>
6.<br>
7.<br>
8.<br>
9.<br>
10.<br>
Index Page 1 content goes here
</div>
</div>


<div class="Halaman">
<div class="Alas">
1.<br>
2.<br>
3.<br>
4.<br>
5.<br>
6.<br>
7.<br>
8.<br>
9.<br>
10.<br>
Index Page2 content goes here
</div>
</div>


<div class="Halaman">
<div class="Alas">
1.<br>
2.<br>
3.<br>
4.<br>
5.<br>
6.<br>
7.<br>
8.<br>
9.<br>
10.<br>
Index page3 content goes here
</div>


</div>

</div>
</div>

</form>

<script style="text/javascript" src="http://onlinejobnepal.com/images/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Step2:-Save widget
Configuring Index widget for your posts
Step3:-In the Index widget code you will see...1,2,3,4..... 10

Image1-Showing Index numbers to be replaced

These numbers are your index post numbers. Replace them with your Post title (If you give numbering to your posts then your work will be easy)
ex:-Replace 1. with 1.Blogger History
where as Blogger History is my first post in www.blogspotquiz.blogspot.com

Step4:-Select the Post Title >>Copy the Address of your post >> Click on Href link and add the link address>>Save

Image2-Adding Post Title to Index


Image3-Adding Href link to Post Title Text.

Now you can see your Post Title indexed in Index page 1...follow the same procedure to add Post links in Index Page2, 3.

Demo-Click on Below image To see Live Demo

Tags: Add Index widget to your Blog, Show your posts in Index widget, Add Index widget or TOC or Table of Content to your Blog