Advance Sitemap or Table Of Content For Blogger Site

Advance Sitemap or Table Of Content For Blogger Site
Blogger sitemap

Table of content is most popular widget in website or blog. While a visitors visit their Blog then they might want to see the all posts at a glance. So there Sitemap widget is work effectively for this kinds of Website or Blog readers. However I have share before a beautiful and simple table of content and today I am going to share another beautiful advance Sitemap or Table of content widget for Blogger site. This widget will add an easy navigation system between your Blog sitemap and content. 


However advance sitemap or table of content widget will give a professional touch in your Blogger site.  

Feature of this Table of Content-
  • Visitors can see all Latest posts at a glance.
  • Posts will display as 2 column with number of comments.
  • Readers can view posts by specific label.
  • Posts by label can be expend by using Load More (infinity loop) option.
  • Visitors can Easily navigate in any post.
  • Reader's can search posts by keywords.
  • Not any extra loading time required.
  • Your site will get professional touch.
The installation procession is quite easy. Just follow the below steps-

Step 1 Sign in to your Blogger account and go to Dashboard

Step 2 From the Dashboard, click New page from Pages tab.

Step 3 After that now switch Compose view to HTML view and paste the all below code CSS+HTML+JavaScript at a time.


  • CSS Code For Sitemap

<style>
/* CSS Sitemap  by http://www.bloggerspice.com */
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}
#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}
#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}
#feedContainer .toc-title:hover {color:#404040;}
#feedContainer .news-text {font-size:11px;display:none;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}
#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;}
</style>


  • HTML Code For Sitemap

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="resultDesc"></header><br /><br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>


  • JavaScript Code For Sitemap

<script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/advance%20sitemap%2BBloggerSpice.js" type="text/javascript"></script>

Step 4 And now simply click on Publish button from top right corner. 

sitemap demo

Now check your Sitemap or Table of Content page. Your Sitemap will be look like above image. I hope this will love your Blog visitors. For any further query feel free to write me.
Go Up