Are
you trying to create an HTML Sitemap page for your blogger blog? HTML Sitemap
are different from XML Sitemap that you submit to search engines to improve
your crawling rate or get a quick indexing of your new posts. HTML Sitemaps,
shows an prepared list of your published posts, just like a table of content.
Blogging
experts says, a google sitemap page is one of the most important pages on every blog.
It helps to increase the user engagement on our blog and makes it more user
friendly.
By
using the html script sitemap page, visitors of your blog can easily navigate through the
all of your published post under different groups they are interested in.
After
all your blog's page-views increase and bounce rate decrease. Good for SEO :)
I
personally use the sitemap page on my own blog for a long time, so I can say it
is one of the most visited pages on my blog. When visitors find out the content
on your blog more useful, they search for more content like this on your blog
and if a sitemap page is available on your blog.
XML Sitemaps vs HTML
Sitemaps
An
XML sitemap created with the help of an XML markup language and are especially
intended for search engines. You can create and submit your site's XML sitemap
in webmaster tools, which will not only improve your site's crawling rate but
also quick indexation of your site.
On
the other hand, HTML sitemaps are created with plain Hyperlink Text Markup Language
and are especially intended for your website visitors. It is usually used to
list all the post or pages that are published on your site.
Creator of this HTML Sitemap
codes:
The
code I am going to share is issued by +Taufik Nurrohman. He is an Indonesian
and he has done so much for blogger platform users by releasing the amazing
scripts for free. We owe to him.
Most
of the template designers who are selling blogger templates on ThemeForest.com
use his scripts to add amazing functionalities and awesome features to their
templates.
Demo
Screenshot of Sitemap Page We Are Going To Add
How to create HTML sitemap
page in Blogger.
Step-1:
Login
to your blogger account and go to the Dashboard.
Step-2:
Select
Pages from the left Navigation bar and click on New Page.
Step-3:
Give
page title “Sitemap” without quote and hit the Publish menu button. This
process will create your blog static site map HTML page with the exact sitemap
URL like –
http://YourBlogName.blogspot.com/p/sitemap.html
Step-4:
From
the opened window, click on the name of that sitemap page so that page editor
will open again. Now, you may change the title again Ex:All Posts at a Glance.
Step-5:
Now,
go to the HTML mode of that page and paste the following codes. You may also
write something on this page for your users before publishing it.
<div id="tabbed-toc">
<span class="loading">Loading,
please wait…...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://blogsnucleus.blogspot.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
same 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 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: #0384ff;
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 #0384ff;
-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>
Customize: -
1)
To change the message which appears before the sitemap is loaded, change this
"Loading, please wait
..." line to your own.
2)
Replace my blog URL with your blog URL by replacing http://blogsnucleus.blogspot.com/ and those
who are using the custom domain name, change your country specific extension to
.com at the end of the URL.
For
example, change http://yourblog.blogspot.in to http://yourblog.blogspot.com
where .in is a country specific TLDN for Indian users, got it?
3)
Color scheme is BLUR and you may like to change it to your blog's color scheme.
To change the yellow color just replace this #0384ff color code to your own which appears two times in
the CSS code above.
Finally,
publish your Site Map page and Enjoy!
Recommended:
Add Blogger Contact Form to Any Static Page. link this HTML sitemap page to every page of
your blog i.e. either at the end of each blog posts or in header/footer or
sidebar etc.
Share This!
If you find this useful,
we would appreciate a link from your website or a mention on your social
network. Thanks!
<a
href="https://blogsnucleus.blogspot.com" title="Blogger Blog
Tips and Tricks"> Blogger Blog Tips and Tricks </a>
The
above HTML code will produce the following link:
Blogger Blog Tips and Tricks
