Advance Sitemap or Table Of Content For Blogger Site

Advance Sitemap or Table Of Content For Blogger Site

4
data:blog.title
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.
Advance Sitemap or Table Of Content For Blogger Site
4 Stars stars - "Advance Sitemap or Table Of Content For Blogger Site" Table of content is most popular widget in website or blog. While a visitors visit their Blog...

Post a Comment

Bhai amr template ai site show korse a nah template hose a 3D Mag Blogger Template apnr ai khan tikh a download deowa

Apni JavaScript Code For Sitemap aaitar nice arekta code add kore dekhte paren..Hopefully kaj hobe-


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

karon jquery cara onek somoy aai widget support kore na.

Thank you.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *