Stylish Full Sitemap Blogger

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.web-development.cf/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 .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:.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:.5em;
}

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

Use Processor: CSS RESET and NEITHER

See result below:

Or visit this SITEMAP DEMO

This article be helpful ?. Please share this

Share this post