Hi Guys!
In This article I'll explain how to make your own sitemap generator tool and add it to your Blogger website using Html CSS and JavaScript.
Every website needs a sitemap to be indexed by Google, which explains why there are many searches each month. The Create Sitemap Generator is something that a lot of people want, but most places don't have it.
So, now I'll provide you all the information you need about it in this article.
Preview of Tool
Table of Contents:
- What is Sitemap?
- How to Create Sitemap using HTML CSS JavaScript.
- How to Create Sitemap Generator Blogger Tool Website.
- How to Add Sitemap Generator Tool in Blogger.
- How to Generate Sitemap for Blogger.
What is Sitemap?
A sitemap is a straightforward XML file that contains a list of the site's URLs. Webmasters can include more information about a website, such as the date it was last updated and how it connects to other URLs inside the website, by using a sitemap.
How to Create Sitemap Using HTML CSS and JavaScript?
If you are a web developer, open a code editor. If not, scroll down to the end of the article where you will find the sitemap generator script.
For Web Developers.
First of all Open VS Code and Create Three Files with the extension of .html , .css , .js .
HTML CODE:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <meta http-equiv="refresh" content="30"> <!-- fontawesome --> <script src="https://kit.fontawesome.com/655c589984.js" crossorigin="anonymous"></script> <!-- Style Css --> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <h3 translate="no">BSiteMap</h3> <ul> <li>Support Us</li> <li><a href="https://twitter.com/aliscodes"><i class="fa-brands fa-twitter"></i></a></li> </ul> </nav> <main> <h1>BSiteMap - Blogger Site Map Generator</h1> <!-- <p class="hchild">Generate XML SiteMaps For Blogger</p> --> <div class="adsSection"><div class="ads"><P>Responsive Ads Here...</P></div></div> <input type="url" id="url" placeholder="Enter Your Blog Url"> <input type="submit" id="Submit"> <div id="copy">Copy</div> <div id="generatedSitemap">Your SiteMap Here.....</div> </main> <footer> <p>Made With ❤ By Ali Sufian</p> </footer> <script src="./app.js"></script> </body> </html>
CSS CODE:
Add the Following CSS Code to style.css
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Baloo Bhai 2', cursive;
}
nav {
display: flex;
background-color: rgb(20, 40, 55);
color: aliceblue;
padding: 5px;
}
nav h3 {
font-size: 2rem;
margin-left: 2vw;
}
.hchild{
font-size: 1rem;
}
nav ul {
display: flex;
margin-left: 71vw;
}
nav ul li {
list-style-type: none;
/* padding-left: 3vw; */
margin-right: 3vw;
font-size: 1.2rem;
padding-top: 1.9vh;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
nav ul li a{
text-decoration: none;
color: white;
}
nav ul li:hover {
border-bottom: 5px solid white;
}
main {
/* width: 80%; */
height: 90vh;
/* background-color: aqua; */
text-align: center;
padding-top: 2vh;
}
main h1 {
font-size: 2.8rem;
margin-top: 2vh;
}
main input {
width: 50%;
outline: none;
border: none;
padding: 0.7rem;
font-size: 1rem;
margin-bottom: 2px;
}
#url {
width: 50%;
outline: none;
border: none;
padding: 0.7rem;
font-size: 1rem;
margin-bottom: 2px;
border: 2px solid rgb(168, 168, 168);
/* border-radius: 5px; */
margin-top: 4vh;
}
#Submit{
background-color: rgb(20, 40, 55);
color: white;
width: 10%;
cursor: pointer;
}
#generatedSitemap{
width: 50%;
height: auto;
background-color: rgb(20, 40, 55);
color: white;
margin-left: 24vw;
padding: 10px;
text-align: center;
margin-top: 2vh;
border-radius: 8px;
}
#copy{
max-width: 59px;
text-align: center;
border-radius: 7px;
position: relative;
top: 9%;
left: 69%;
cursor: pointer;
padding: 3px;
color: white;
background-color: rgb(20, 40, 55);
border: 1px solid white;
}
footer p {
text-align: center;
margin-top: -3%;
font-size: 1rem;
}
.adsSection{
display: flex;
justify-content: center;
align-items: center;
}
.ads{
width: 80%;
height: 10vh;
background-color: rgb(202, 202, 202);
margin-top: 1vh;
border: 1px solid rgb(149, 149, 149);
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
nav {
padding: 2px;
}
nav h3 {
font-size: 2rem;
margin-left: 1vw;
}
.hchild{
font-size: 1 rem;
}
nav ul {
display: flex;
margin-left: 37vw;
}
main h1 {
font-size: 2rem;
margin-top: 2vh;
}
main input {
width: 40%;
}
#url {
width: 49%;
}
#Submit{
color: white;
width: 14%;
}
#generatedSitemap{
width: 80%;
height: auto;
background-color: rgb(20, 40, 55);
color: white;
margin-left: 10vw;
padding: 10px;
text-align: center;
margin-top: -1vh;
border-radius: 8px;
}
#copy{
max-width: 59px;
text-align: center;
border-radius: 7px;
position: relative;
top: 6%;
left: 77%;
cursor: pointer;
padding: 2px;
color: white;
background-color: rgb(20, 40, 55);
border: 1px solid white;
}
footer p {
text-align: center;
margin-top: -4%;
font-size: 1rem;
}
}
JavaScript Code:
Add the Below JavaScript Code To app.js File.
let Submit= document.getElementById('Submit').addEventListener('click', ()=>{
let url = document.getElementById('url').value
let generatedSitemap = document.getElementById('generatedSitemap')
let html = `User-agent: Mediapartners-Google<br/>
Disallow:<br/>
<br/>
User-agent: *<br/>
Disallow: /search<br/>
Allow: /<br/>
Sitemap: ${url}`
generatedSitemap.innerHTML= html
})
// copy button
let copy = document.getElementById('copy')
copy.addEventListener('click',()=>{
copy.innerHTML="Copied!"
window.getSelection().removeAllRanges()
const range = document.createRange()
range.selectNode(generatedSitemap)
window.getSelection().addRange(range)
document.execCommand('copy')
window.getSelection().removeAllRanges()
})
How to Create Sitemap Generator Blogger Tool Website.
For Bloggers Copy the following Code.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="refresh" content="30">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/655c589984.js" crossorigin="anonymous"></script>
<!-- Style Css -->
<link rel="stylesheet" href="style.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Baloo Bhai 2', cursive;
}
nav {
display: flex;
background-color: rgb(20, 40, 55);
color: aliceblue;
padding: 5px;
}
nav h3 {
font-size: 2rem;
margin-left: 2vw;
}
.hchild{
font-size: 1rem;
}
nav ul {
display: flex;
margin-left: 71vw;
}
nav ul li {
list-style-type: none;
/* padding-left: 3vw; */
margin-right: 3vw;
font-size: 1.2rem;
padding-top: 1.9vh;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
nav ul li a{
text-decoration: none;
color: white;
}
nav ul li:hover {
border-bottom: 5px solid white;
}
main {
/* width: 80%; */
height: 90vh;
/* background-color: aqua; */
text-align: center;
padding-top: 2vh;
}
main h1 {
font-size: 2.8rem;
margin-top: 2vh;
}
main input {
width: 50%;
outline: none;
border: none;
padding: 0.7rem;
font-size: 1rem;
margin-bottom: 2px;
}
#url {
width: 50%;
outline: none;
border: none;
padding: 0.7rem;
font-size: 1rem;
margin-bottom: 2px;
border: 2px solid rgb(168, 168, 168);
/* border-radius: 5px; */
margin-top: 15vh;
}
#Submit{
background-color: rgb(20, 40, 55);
color: white;
width: 10%;
cursor: pointer;
}
#generatedSitemap{
width: 50%;
height: auto;
background-color: rgb(20, 40, 55);
color: white;
margin-left: 24vw;
padding: 10px;
text-align: center;
margin-top: 2vh;
border-radius: 8px;
}
#copy{
max-width: 59px;
text-align: center;
border-radius: 7px;
position: relative;
top: 9%;
left: 69%;
cursor: pointer;
padding: 3px;
color: white;
background-color: rgb(20, 40, 55);
border: 1px solid white;
}
footer p {
text-align: center;
margin-top: -3%;
font-size: 1rem;
}
</style>
<body>
<nav>
<h3 translate="no">BSiteMap</h3>
<ul>
<li>How To Use</li>
<li><a href="https://twitter.com/aliscodes"><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</nav>
<main>
<h1>BSiteMap - Blogger Site Map Generator</h1>
<p class="hchild">Generate XML SiteMaps For Blogger</p>
<input type="url" id="url" placeholder="Enter Your Blog Url">
<input type="submit" id="Submit">
<div id="copy">Copy</div>
<div id="generatedSitemap">Your SiteMap Here.....</div>
</main>
<footer>
<p>Made With ❤ By Ali Sufian</p>
</footer>
<script>
let Submit= document.getElementById('Submit').addEventListener('click', ()=>{
let url = document.getElementById('url').value
let generatedSitemap = document.getElementById('generatedSitemap')
let html = `User-agent: Mediapartners-Google<br/>
Disallow:<br/>
<br/>
User-agent: *<br/>
Disallow: /search<br/>
Allow: /<br/>
Sitemap: ${url}`
generatedSitemap.innerHTML= html
})
// copy button
let copy = document.getElementById('copy')
copy.addEventListener('click',()=>{
copy.innerHTML="Copied!"
window.getSelection().removeAllRanges()
const range = document.createRange()
range.selectNode(generatedSitemap)
window.getSelection().addRange(range)
document.execCommand('copy')
window.getSelection().removeAllRanges()
})
</script>
</body>
</html>
How to Add Sitemap Generator Tool in Blogger
To Add Sitemap Generator tool in blogger first of all open blogger dashboard > Themes > Click on switch to first classical themes. > Edit HTML > Remove the Current Code > Now Paste the above Code You Copied. Click on Save Theme.
Note!
The above theme of Code Looks Like This. (No Ads Section)
If You Want this Template With Ads Section DM (Message) me on Instagram. and Also Remember it will Cost $5.
My Instagram Profile: @alis.code
Preview of Sitemap Generator Theme with Ads Section.
In $5 I will Provide You the above theme (with Responsive Ad Section) and Also Complete Setup your Blog to Make Your Blog Ready FOR AdSense Approval.
Click Here to Contact With Me on Instagram.
I will Also Provide 24/7 Support.
Thank You For Reading Article If You Like this article Sitemap Generator tool Script then Subscribe My YouTube Channel I will Share Amazing Content On It.
Tags:
Coding Script