Hello Everyone, Today in this post I am going to share a tutorial on How To Create Sitemap Page in Blogger Website. The table of contents or Sitemap Page on a blog is a map or list of instructions that can be used by blog visitors to surf a website/blog. and be a guide to the location of each article or post on a website/blog.
Creating a cool sitemap or table of contents on a blog must have its own advantages, because a sitemap will make it easier for blog visitors to find articles on our blog. Creating a sitemap is highly recommended for those of you who want to improve your blog, by making this sitemap your blog will increase its presence on Google search engines, because the Google search engine will find it easier to get information on how often your blog updates articles and others.
There are many ways to create a sitemap that you can use, such as using CSS, or using pure HTML only, and some even use JavaScript to run effects such as accordian and more. In this article, you only need to add CSS and HTML to the template and also the blogger static page, an example of the result is as follows.
Benefits :-
- Make it easier for visitors to explore the contents of the website that we manage.
- Website visibility.
- Interact better with search engines.
- Increase visitors.
- Tidy up Authority.
How To Create Sitemap Page in Blogger :-
<!-- Sitemap page for blogger by theforyou.Com -->
<style type="text/css">
#theforyou{
width:99%;
margin:5px auto;
border:1px solid #05a0ff;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));
border:1px solid #37c2dd;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;
-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;
}
.labl a{color:#fff;
}
.labl:first-letter{text-transform:uppercase;
}
.new{color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));
}
.postname li{border-bottom: #ddd 1px dotted;
margin-right:5px
}
_/*This is optional - For full width Sitemap*/_
.sidebar, #bottom, #blog-pager, h2.post-title, .comments {
display: none !important;
}
#content { width: 100% !Important; }
@media only screen and (max-width: 1089px) and (min-width: 980px) { #content { width: 100% !Important; } } @media only screen and (max-width: 979px) and (min-width: 768px) { #content { width: 100% !Important; } } @media only screen and (max-width: 767px) and (min-width: 480px) { #content { width: 100% !Important; } } @media only screen and (max-width: 479px) { #content { width: 100% !Important; } }
</style>
<div id="theforyou">
<script src="https://gist.githubusercontent.com/CLASS12INHINDI/0ecb7b8b17fe2f0f4d7aa8c735a5f8e8/raw/12974e4910ae6cae8e254b2320acac57fc82ff70/sitemap.js" type="text/javascript"></script>
<script src="https://www.theforyou.online/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Now Published Your Page And See the Sitemap Results.
Conclusion
Well, thats a great tutorial on How To Create Sitemap Page in Blogger Website. If there are bugs or you don't understand, don't hesitate to ask through the comments column provided below this article. Maybe that's the first post from How to Create a Sitemap on Blogger , hopefully it's useful. Thank you.