Awesome Table of Content/Sitemap Responsive For Blogger 2016.

Here I am going to tell you that how you can add the advanced table of content or sitemap to your blogger blog. This sitemap works automatically, the only thing you have to do is just add the provided code where you want your sitemap to be appeared and that's all. The remaining work is automatic and all the posts of your blogger blog will be listed and arranged according to categories.



Features:

Below are the some extra features of this:
  • It automatically updates when you publish a post
  • It automatically tags your latest posts with a New! text 
  • Arranges all your posts under their given categories 
  • Has Beautiful layout and eye-catching colors combination.
  • As a whole looks beautiful.
  • Have great User experience.
  • 100% Responsive.(Mobile Friendly)

How to add this advance sitemap/table if content to blogger: 


 Ok, now I am going to show you how to install this advance sitemap to your blogger blog. The whole process is very simple and easy. It requires no coding. Just copy-paste.


Click Here

Follow Rules:

  • First of all open your blogger dashboard.
  • Create a Page.
  • Switch to HTML Copy all the below code and paste this code there.


 

/* Tabbed Layout TOC by prio-soft */
<style>
#tabbed-toc {
  margin: 0 auto;
  background-color: #FFFFFF;
  border: 4px dashed rgb(48, 167, 229);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
  color: #333;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color: #434B50;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:rgba(110, 193, 255, 0.68);
  color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color: #6EC1FF;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
    width: 80%;
  float: right;
  background-color: white;
  border-left: 2px dotted #30A7E5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  color: #434B50;
  line-height: 40px;
  height: 35px;
  padding: 0 12px;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://prio-soft.blogspot.com//" title="Tabbed TOC">Prio-soft</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://prio-soft.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index undefineddefault: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails undefinedNot recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds undefinedoption => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="https://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Customization:

  • Now change the red color url with your blogger blog url.[http://prio-soft.blogspot.com/] 
  • Now click on the publish button and that's all Congrats! you have successfully installed this 
  • new advance and fancy sitemap for blogger.
Any type of information please Contact us.
Labels: ,

Post a Comment

[blogger][facebook][disqus]
Swicther!
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjkSsWvmjIpQ_ICXr5bGfT4RPhd5Vrxek-oaojrkvS3JiGv9vw6CubrWWVDfcVeVheD61_MlnQHrsEfAVH3JVIc_0zb-RwuasrPCJQBYPOaDaZ7LVdKorVE2kIhrh8sl-9a_s-R7ReQzX/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.