Creating HTML Sitemap In Blogger Using Jquery Plugin

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.

Check out: How To Create/Add Sticky Navigation Menu Widget To Blogger

Adding an HTML Sitemap Page to Blogger

  1. Go to your blogger and navigate to the pages and click Create New Page and give it a title Sitemap
  2. 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.

Check out: How To Create a Static Landing Page in BlogSpot Blogs

/* 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.

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind