How to Create HTML Sitemap in Blogger Using Css3

How to Create HTML Sitemap Page in Blogger
A sitemap is a model of a website's content designed to help both users and search engines navigate the site. A site map can be a hierarchical list of published pages and posts on your blogger or website organized by topics on a single page. Here I will show you the step by step guide to creating HTML Sitemap page for your blogger.


Adding an HTML Sitemap Page to Blogger

  • Go to your blogger and navigate to the pages and click Create New Page and give it a title Sitemap
  • Now you will see a blank page. Switch to HTML and paste the below code then press Compose finally click Publish and you are done.
Follow the ScreenShot


<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.com/sitemap.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
</div>
Important: Do not make any change in the above code otherwise it will not work

Now Let's Design Your Sitemap With Css3

Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag or </style> tag and just above it paste the following code. You can also customize the below codes to match your style of template color scheme:
/* Sitemap plugin By Knigulper */#bp_toc { color: #666; margin: 0 auto; padding: 0; border: 1px solid #d2d2d2; float: left; width: 100%;}span.toc-note { display: none;}#bp_toc tr:nth-child(2n) { background: #f5f5f5;}td.toc-entry-col1 a { font-weight: bold; font-size: 14px;}.toc-header-col1,.toc-header-col2,.toc-header-col3 {background:#9E9E9E;}.toc-header-col1 { padding: 10px; width: 250px;}.toc-header-col2 { padding: 10px; width: 75px;}.toc-header-col3 { padding: 10px; width: 125px;}.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: #fff; 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 { padding: 5px; padding-left: 5px; font-size: 12px;}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a { color: #666; font-size: 13px; text-decoration: none}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover { text-decoration:underline;}#bp_toc table { width: 100%; margin: 0 auto; counter-reset: rowNumber;}.toc-entry-col1 { counter-increment: rowNumber;}#bp_toc table tr td.toc-entry-col1:first-child::before { content: counter(rowNumber); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px;}td.toc-entry-col2 { text-align: center;}
I hope you liked the tutorial.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind