As we know that blogger.com is one of the famous website, which allow people to create their own website on blogger.com and make money through Google AdSense after when Google AdSense is approved on your website. So there are some of the requirements of Google AdSense, HTML Sitemap Page also one of it. So in this article I am going to tell you that “How to Create HTML Sitemap Page on your Blogger Website”.
Before to create HTML sitemap page, let we study that what is HTML sitemap page?
What is HTML Sitemap Page?
It is a page where all the URL of our website are present as known as HTML Sitemap.
Usually we create this page for our website visitors to visit a proper page easily
+. And the another type of sitemap is XML Sitemap, which we create for search engine bots to crawled our website easily and rank our website on Google or any search engine.
Now let's go to study that how we can create HTML Sitemap on blogger website:
Also Read:
How to Create an HTML Sitemap on Blogger Website
To create HTML Sitemap, first we log in our blogger website and after that we can see "Pages" option in the admin panel of our website. So we click on it and after a few seconds we see another type of window as shown in the below picture.
As we can see "New Page" option in the above picture, so we have to click on new page. After clicking on new page we can see this type of window as mention in the below picture.
Creating Page Title
When we click on new page we see this type of window, now first we have to give title to our page. So the title name is of course "Sitemap".
Page Description
When we give title to our page and then we put description in the description box. For this we click in the top-right corner description and also we put the same name "Sitemap" in it.
Switch to HTML
Now we have to switch to HTML view, for this we need to click on the panicle ion which is present on the top-left side and also I underline in the below picture.
Blogger HTML Sitemap Page Code
<style type='text/css' scoped='scoped'>
#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1.5px solid #3ce502;border-top-left-radius: 25px;}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#00b31e;color:#fff;border-radius:25px;}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;padding:10px;}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:normal}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://www.technicalawais.site/';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#f00!important;color:#fff!importan;border-radius:25px;}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
When we switch to HTML view than there is some default code, so first we delete it. So when we delete the default code we paste the following code here and change my website URL by your website URL.Public Page
When you change the URL, then the page is ready to public. For publishing the page we click on the public button. Which is present to the top-right corner.
Now your HTML Sitemap page is ready click on the view icon and see your sitemap page.
How to Add Sitemap Page on the Website Top Navigation
If you want to add your Sitemap Page on your website top navigation, then click on "Layout" button which is present in your website admin panel. When you click on the find to navigation and then click on the panel icon and after that you see the following window.
Put "Sitemap" in the "Site Name" and copy the HTML Sitemap Page URL and paste it in the Site URL. Then your sitemap page will be shown in your website home page.
Conclusion
An HTML sitemap page is an essential tool for improving both user experience and search engine optimization on your Blogger website. By creating an organized and regularly updated sitemap, you make your content easily accessible to users and ensure better indexing by search engines. Follow the steps provided in this guide to create your own HTML sitemap page and enhance your website’s overall performance.
FAQ's
What is an HTML Sitemap Page, and why is it important for a website?
An HTML sitemap is a web page that lists all the key pages of a website, making navigation easier for users and search engines. It helps improve website visibility, crawlability, and user experience.
How does an HTML Sitemap improve SEO for Blogger websites?
An HTML sitemap helps search engines like Google index your Blogger site more effectively. By organizing your content in a structured format, it enhances crawlability and improves your site's ranking potential.
Can I create an HTML Sitemap Page on a Blogger website without coding skills?
Yes, you can! Blogger offers simple tools and plugins that make it easy to create an HTML sitemap without needing extensive coding knowledge.
What are the key elements to include in an HTML Sitemap for Blogger?
Include the main categories, subcategories, and individual blog posts in your sitemap. Ensure it is visually appealing and easy to navigate for both users and search engines.
Is it necessary to update an HTML Sitemap regularly?
Yes, updating your HTML sitemap is crucial to reflect new blog posts and changes in your site's structure. Regular updates ensure that users and search engines have access to the latest content.
0 Comments