How to Create an HTML Sitemap Page in Blogger

How to Create an HTML Sitemap Page in Blogger

How to Add Sitemap Page to Blogger Using HTML Codes

In this post, you will be told to create HTML Sitemap Page for blog or site and add it to blog. Sitemap consists of two types:

XML Sitemap
HTML Sitemap

You can make an XML Sitemap of a small file in which all the content of our blog or site is in XML format. XML Sitemap helps to index all the content of our blog in Google Search Engine.

The HTML Sitemap contains a list of all the posts published on our blog. It takes place in HTML format. Therefore, the list of posts in it can be read. It does not index our blogger post in the search engine but with the help of this, you can increase the pageviews of your blog or site. Because in HTML sitemap, all the published post of the blog is shown on one page in one place.

For this, you have to create an HTML sitemap page in the blog and then add the link of this page to the menu bar of the blog. Visitors will also open this link, they will see the entire post of your blog in a page.

In this post, the sitemap page I am talking about is very attractive and 100% it will work in your blog. In this, all posts will show in categories or label in a page. This will make it easy for visitors to navigate all the posts in your blog. They can easily search for posts they like and need.

Now I start telling you How to create an HTML sitemap page for blogger blog?

Step 1

First of all login to your blogger account and go to the blogger dashboard.

Click on Pages >> All.
Click on the new page.

Step 2

Now page editor will open

Page name in Title area
You can write anything according to yourself, such as Sitemap, All Post, Archive etc.
On HTML, click on HTML mode.
Copy and paste the code below into the body section of the page.
In the page, setting Don't allow, Show HTML Literally, tick in the checkbox under Use <br> tag and click on Done.
Click on Publish.

HTML Sitemap Code

<div id = “tabbed-toc”> <span class = “loading”>
Loading, please wait for a moment…</span>
</div>
<br />
<script type = “text/javascript”>
var tabbedTOC = {
blogUrl: “https://www.thugsofbd.com“, // Enter your 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, // Default thumbnail size
noThumb: “”, // 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. `false` to open in samewindow
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 by changing the number
newText: ” – <em style=’color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;’>New!</em>” // HTML/CSS for
//the “New!” text
};
</script>
<script src=”http://yourjavascript.com/51107864021/tabbed-toc-defaults.js” type=”text/javascript”>
</script>
<style>/*Sitemap */
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;float: right !important;
background-color: #F5F5F5;
border-left: 5px solid#FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0;
bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
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: #DBDBDB;
font-size: 10px;
}
#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:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}</style>

In the Customize Code

Code, instead of https://www.thugsofbd.com, you write the URL of your blog. If you use free BlogSpot domain name, then the URL of your blog will be something like this: http://YourBlogName.blogspot.com | If you use a custom domain name, the URL will be something like this: http://www.YourBlogName.com |

hopefully you have liked this post. If you face any problem in creating Blogger HTML Sitemap page, comment me.

THÔNG TIN THANH TOÁN & DỊCH VỤ:

Tên tài khoản: Nguyễn Anh Tuấn
Số tài khoản: 0501000058467
Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
Hỗ trợ cài đặt: fb.com/kequaduongvodanh
Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form