ADD IMPRESSIVE TABLE OF CONTENTS (SITEMAP) WITH HOVER EFFECT

Today m gonna add a new table of contents with awesome hover effect.i've seen many blogs that have simple table of contents(sitemap).But if u want to improve ur ranks and pageview,so u must need this widget.when u post in content in ur blog,it will automatic add that content's title in the table.

DEMO HERE

To add this table in ur site just follow below steps...

Step 1 :- Go to your blogger account > Pages > New Page > Blank Page

Step 2 :- Name that page "Table Of Contents"

Step 3 :- Now switch to HTML MODE and paste below code on it.

<div dir="ltr" style="text-align: left;" trbidi="on">

<br /></div>

<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/sitemap.js" type='text/javascript'></script>

<script src="http://www.bloggerhacker.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<p style="display:none;"><a href="http://www.bloggerhacker.com/">MUKESH HACKER</a></p>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555; color: #fff; }

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } 

</style>

Step 5 :- Now change http://www.bloggerhacker.com with your own blog url.

Step 4 :- Now save your page it's all done!!!!!!!now see that awesome table of contents..

Related product you might see: