How to Create HTML sitemap page in bloggers | sitemap generator
How to Add a Stylish Sitemap for Blogger? You should make a stylish sitemap for bloggers which can help your website look more beautiful and attractive. For creating a stylish sitemap for bloggers you need to have creativity and knowledge. If you want to learn how to add a stylish sitemap for bloggers, just follow the topic below.
A sitemap page is one of the must have pages on every blog. It helps in a number of ways to increase the user engagement on our blog and makes it more user friendly. By using the sitemap page, visitors of our blog can easily navigate through the all of our published content under different categories they are interested in.
what is a sitemap?
A sitemap is essentially a map of links that allows visitors to quickly find the exact article they are looking for. It’s a navigation tool that helps readers navigate through your blog and find the information they need. Similar to the way an index works in a book or how an atlas works on Google Maps, the sitemap is an important piece of blogging infrastructure that improves your site’s usability.
sitemap is a file where you provide information about the pages, videos, and other files on your site. It helps Search Engines like Google, Bing, Yahoo to crawl your site efficiently and eventually indexing of pages done quickly. It tells the search engine about essential pages and files of your website and also provides valuable information about these files. For example, it helps in identifying information like the last update and how often the page is changed, and any alternate language versions of a page.
Types of sitemaps
- HTML Sitemaps
- XML Sitemaps
What is an HTML sitemap?
A sitemap is essentially a map of links that allows visitors to quickly find the exact article they are looking for. It’s a navigation tool that helps readers navigate through your blog and find the information they need. Similar to the way an index works in a book or how an atlas works on Google Maps, the sitemap is an important piece of blogging infrastructure that improves your site’s usability.
HTML sitemap
HTML Sitemap is a special page that contains links to all other pages on your website. This page is very important because it allows search engine spiders to know the internal structure of your pages. Because of this, it’s necessary to create one if you want your website to rank higher in search engines.
How to add sitemap in website
It’s best to create HTML sitemaps using a software program instead of manually creating them using notepad or any other text editor. This is because most software programs will help you generate the XML code correctly without missing any pages that are linked on your site.
Search Engines like Google and Bing use these Sitemaps to crawl and index URLs from a single page rather than going through every page on your website individually. This makes it easier for them to index every page on your website, giving you more control over which pages are being indexed for specific keywords.
Benefits Of HTML Sitemap
There are several benefits of an HTML sitemap. The first one is that they become an important search engine optimization tool. If you want to see your blog optimized from the search engines, sitemaps are one of the most important things you will need. You may feel that your blog is optimized well enough, but sitemaps can be used for further optimization. This is because search engines make use of them to crawl your website and index it.
Sitemaps can also be used to communicate with the various web spiders around the world who are constantly trying to crawl through every piece of information on the internet. These crawlers don’t know where to look for all the different links and pages in your website so they rely heavily on sitemaps when crawling through your site,
The other reason why you should consider using sitemaps is that they can make navigation easier for your readers and visitors. They provide an easy way for people to find what they want on your website without having to go through a lot of trouble.
How To Add HTML Sitemap To Blogger
To add a stylish sitemap to your Blogger website you need to add an HTML code and create a page named sitemap.
Step-1; Go to your Blogger Dashboard and open the Page section
Step-2: Create a new page and switch the Editor to HTML view
Step-3: Now copy the below code and paste it
Step-4: Now Set the Title as Sitemap and publish the page
Now you have successfully created your stylish HTML sitemap on the Blogger website.
1: How to Create HTML Sitemap
Step (a) :
Go to Blogger Dashboard Click on Page Section at Left Sidebar Menu after that tap on Create a New Page and copy the code that we provide below and paste it here in Page HTML Section, not in Compose Mode. After Pasting code Save and Publish Page. That’s done you have successfully created a Blogger HTML Site map page. Copy the link of page and Show at Bottom of Footer menu pages.
Sitemap : 1 See the demo of HTLM site map below screenshot
HTML Code Sitemap 1
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://3.bp.blogspot.com/-s3kuUoVBLD4/Xx1if5ogHbI/AAAAAAAAAUU/EshioquzFfYPf2n49rUhm0_kjdeSMUnFACLcBGAsYHQ/s1600/Sitemap%2BArlina%2BCode.png" title="Sitemap Arlina Code" /></a></div>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=99999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.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:#aaa;font-weight:500;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:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#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);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style>If you want to daily update Now Join Our Telegram Channel
All in one Download Link
Size : 1 MB
PASSWORD : bellyt
Step (b) :
Go to Blogger Dashboard Click on Page Section at Left Sidebar Menu after that tap on Create a New Page and copy the code that we provide below and paste it here in Page HTML Section, not in Compose Mode. After Pasting code Save and Publish Page.
Remember to Replace the blue Color Label with your Posts Label Correctly Lowercase and Uppercase letters should be the same (means the first letter is capital or not in Post Label check properly)
Also, remember to change the title in between h4 tags blue color text below. That’s done you have successfully created a Blogger HTML Site map page. Copy the link of page and Show at Bottom of Footer menu pages.
Sitemap : 2 See the demo of HTLM site map below screenshot
HTML Code Sitemap 2
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script></div>If you want to daily update Now Join Our Telegram Channel
All in one Download Link
Size : 1 MB
PASSWORD : bellyt
Here in this post, You will get a free download link to the Amma Jayalalitha Birthday Poster Design Templates Free Download. Just download the design according to size by just clicking on Download Button then you can get the RAR file. You have to extract the RAR file through the help of WinRAR Software for further use. After extracting you can get the design and you can use it. These Album Design PSD Templates are absolutely new and completely ready for creating Album Design.
I hope this website will be very useful to develop your skills and take your company on the path of growth. Also let me know in the comments the designs you need like this I will definitely upload.
Thank You…
how to add html sitemap page in blogger,simple way to create sitemap page for blogger,sitemap page for blogger,how to create sitemap for blogger,sitemap for blogger,how to create html sitemap page in blogger,html sitemap code for blogger,how to add html sitemap on blogger,how to create xml sitemap for blogger,blogger sitemap,blogger sitemap page,how to create html sitemap page on blogger,how to create html sitemap for website,sitemap
blogger SCO Keywords :
sitemap for blogger in google search console,
sitemap for blogger in tamil,
sitemap for blogger 2022,
sitemap for blogger malayalam,
sitemap for blogger telugu,
sitemap for blogger techno vedant,
sitemap for blogger could not fetch,
sitemap for blogger,
best sitemap for blogger,
sitemap for blogger kaise banaye,
sitemap for blogger custom domain,
create sitemap for blogger,
google news sitemap for blogger,
html sitemap for blogger,
sitemap for blogger in telugu,
sitemap for blogger tamil,
sitemap page for blogger techno vedant,
sitemap generator for blogger 2022
sitemap for blogger
sitemap for blogger custom domain
sitemap for blogger free
sitemap for blogger blog
html sitemap for blogger
sitemap page for blogger
sitemap generator for blogger ctrlq
sitemap widget for blogger
create sitemap for blogger
sitemap page for blogger blog
generate sitemap for blogger
sitemap generator for blogger
xml sitemap for blogger
create sitemap for blogger
blogger SCO Keywords :
professional blogger templates free download
professional blogger templates
professional blogger templates free
professional blog templates free download
premium free blogger templates
download premium blogger templates for free
free professional blogger templates
free premium blogger templates
professional blogger template
premium template for blogger
professional blogger templates free download
professional blogger templates
mobile friendly theme for blogger
new blogger theme
new blogger templates
new blogger themes
blogger templates free download html
blogger templates free download xml
blogger templates free download responsive
paid blogger templates free download
blogger technology templates free download
blogger urdu templates free download
blogger premium templates free download
education blogger templates free download
affiliate marketing blogger templates free download
best blogger templates free download
beautiful blogger templates free download
bootstrap blogger templates free download
best blog templates free download
blog bootstrap templates free download
best responsive blogger templates free download
themeforest blogger templates free download
premium blogger templates free download
free blogger templates without copyright download
free download blogger templates html code
ecommerce blogger templates free download
free blogger templates free download
fashion blog templates free download
website templates free download for blogger
seo friendly blogger templates free download
responsive templates free download for blogger
food templates free download for blogger
affiliate marketing website templates free download for blogger
urdu templates for blogger free download
free templates for blogspot
free download blogger templates
free download blogger theme
google blogger templates free download
gaming blogger templates free download
google blogger free templates
free google blogger theme download
google blogger themes free
blogs html templates free download
islamic blogger templates free download
job blogger templates free download
blogspot templates free download
blogspot templates free download html
free templates for blogger download
blogger music templates free download
blogger magazine templates free download
max seo blogger templates free download
blogger news templates free download
new blogger templates
blog template free download html
professional blogger templates free download
photography blogger templates free download
personal blogger templates free download
blogger shop templates free download
seo blogger templates free download
free download blogger templates with slider
tourism blogger templates free download
top 10 blogger templates free download
blogspot template free download
blogger video templates free download
video blogger template free download
blogger website templates free download
wordpress blogger templates free download
download free blogger templates without copyright
download blogger template free
download blogger theme
blogger templates free download xml 2019
newspaper x blogger template free download
palki 2 blogger template free download
blogspot theme free download
blogger templates download free
blogspot themes free download
newspaper 9 blogger theme free download
newspaper 9 blogger template free download
blogger templates free download html
blogspot templates free download html
best blogger templates free download
blogspot templates free download
blogger templates free download
google blogger templates free download
blogger templates
free blogger templates
new blogger themes free download
video blogger template free download
video blogger template free
video blogger templates
blog template free download html
blogger templates free full version
