This post is for every new blogger or any person new in the world of websites & blogging who is curious to know that how to create a HTML sitemap for his/her blog/website,.Here's a version of the HTML code to create sitemap for website/blogger blog & wordpress website/blog make the sitemap with added CSS styles more attractive:
 |
| How to create HTML Site-Map for website/Blogger/Wordpress( HTML Codes) |
HTML Code (Copy and paste below given codes on your website and change categories name and their links):-
<!DOCTYPE html>
<html>
<head>
<title>Blog Sitemap</title>
<style>
/* Main Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
}
/* Sitemap Styles */
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 10px;
}
ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
ul ul {
margin-left: 20px;
}
/* Hover Styles */
ul li a:hover {
color: #e53935;
}
</style>
</head>
<body>
<h1>Blog Sitemap</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li>
Categories
<ul>
<li><a href="category1.html">Category 1</a></li>
<li><a href="category2.html">Category 2</a></li>
<li><a href="category3.html">Category 3</a></li>
</ul>
</li>
<li>
Archive
<ul>
<li><a href="archive2022.html">2022</a></li>
<li><a href="archive2021.html">2021</a></li>
<li><a href="archive2020.html">2020</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<title>Blog Sitemap</title>
<style>
/* Main Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
}
/* Sitemap Styles */
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 10px;
}
ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
ul ul {
margin-left: 20px;
}
/* Hover Styles */
ul li a:hover {
color: #e53935;
}
</style>
</head>
<body>
<h1>Blog Sitemap</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li>
Categories
<ul>
<li><a href="category1.html">Category 1</a></li>
<li><a href="category2.html">Category 2</a></li>
<li><a href="category3.html">Category 3</a></li>
</ul>
</li>
<li>
Archive
<ul>
<li><a href="archive2022.html">2022</a></li>
<li><a href="archive2021.html">2021</a></li>
<li><a href="archive2020.html">2020</a></li>
</ul>
</li>
</ul>
</body>
</html>
In this version, the body has a light gray background color (#f2f2f2), and the h1 heading is centered and has a dark gray color (#333).
The sitemap items have a bold font weight and a default color of dark gray. When hovering over a link (<a> element), it changes to a vibrant red color (#e53935).
Additionally, some margin and padding adjustments have been made to improve the spacing between elements.
Feel free to customize the colors and adjust other styles as desired to match your blog's design.
The sitemap items have a bold font weight and a default color of dark gray. When hovering over a link (<a> element), it changes to a vibrant red color (#e53935).
Additionally, some margin and padding adjustments have been made to improve the spacing between elements.
Feel free to customize the colors and adjust other styles as desired to match your blog's design.
