Stylish Full Sitemap Blogger
How to Create Full Sitemap Blogger Pink Table Style
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&max-results=9999&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
0 Response to "Stylish Full Sitemap Blogger"
Post a comment
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.