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

Subscribe to receive free email updates:

0 Response to "Stylish Full Sitemap Blogger"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.