How to Create Full Sitemap Blogger Pink Table Style

Read How to async defer CSS JS perfectly

Here the HTML

<div id="wrapper">
  <div id="bp_toc"></div>
  <script
    src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js"
    type="text/javascript"></script>
  <script
    src="https://www.webmanajemen.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc"
    type="text/javascript"></script>
</div>

Here The CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  background: #ecf0f1;
  font-family: "Open Sans";
  color: #444;
  line-height: normal;
}

#wrapper {
  margin: 30px auto;
  max-width: 600px;
}

a:link {
  color: #fc4f3f;
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited:hover {
  color: #fc4f3f;

  text-decoration: none;
}

a:visited,
a:link:hover {
  color: #444;
  text-decoration: none;
}

table {
  max-width: 100%;
  width: 100%;
  margin: 1.5em auto;
}

table td,
.post-body table caption {
  border: 1px solid #d9d9d9;
  text-align: left;
  vertical-align: top;
  padding: 10px;
}

table th {
  border: 1px solid #009abf;
  text-align: left;
  vertical-align: top;
  padding: 10px;
}

table.tr-caption-container {
  border: 1px solid #eee;
}

th {
  font-weight: 700;
}

table caption {
  border: none;
  font-style: italic;
}

td:hover {
  background: #fafafa;
}

#bp_toc {
  background: #ffaaa4;
  color: #666;
  margin: 0 auto;
  padding: 5px;
}

span.toc-note {
  display: block;
  text-align: center;
  color: #ffcfcc;
  font-family: "Open Sans";
  font-weight: 700;
  text-transform: uppercase;
  font-size: 30px;
  line-height: normal;
  margin: 0 auto;
  padding: 20px;
}

.toc-header-col1 {
  background-color: #f5f5f5;
  width: 250px;
  padding: 10px;
}

.toc-header-col2 {
  background-color: #f5f5f5;
  width: 75px;
  padding: 10px;
}

.toc-header-col3 {
  background-color: #f5f5f5;
  width: 125px;
  padding: 10px;
}

.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
  font-size: 13px;
  text-decoration: none;
  color: #aaa;
  font-family: "Open Sans";
  font-weight: 700;
  letter-spacing: 0.5px;
}

.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
  text-decoration: none;
}

.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
  background: #fdfdfd;
  font-size: 89%;
  padding: 5px;
}

.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
  color: #666;

  font-size: 13px;
}

.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
  color: #e76e66;
}

#bp_toc table {
  width: 100%;
  counter-reset: rowNumber;
  margin: 0 auto;
}

.toc-entry-col1 {
  counter-increment: rowNumber;
}

#bp_toc table tr td.toc-entry-col1:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;

  margin-right: 0.5em;
}

td.toc-entry-col2 {
  background: #fafafa;
}

Use Processor: CSS RESET and NEITHER

See result below:

Or visit this SITEMAP DEMO

See the pen on CodePen.

This article be helpful ?. Please share this