How To Add Advanced Sitemap In Blogger

Sitemap shows all posts of a blog in one page. It is very important for a blog as it contains all post and visitors can find posts easily. Sitemap is categorized on the basis of labels/categories so it indexes all posts under a specific label which helps users to find what they are searching for. Since blogger doesn't have any built-in sitemap therefore it can be added in a blog only from other blogs. Sitemap is important for seo also because once your blog's sitemap is indexed by search engines, visitors could find it easily and reach posts which increases your blog traffic too and in other words it is a navigation page which makes your blog's navigation more clear. I have previously shared a simple sitemap for blogger which shows posts in a list form you can see it here.
This sitemap also works as the simple sitemap but it has a cool and stylish look! You can take a look at my blog's sitemap. Moreover you can set a 404 page error and redirect visitors to your sitemap so if a visitor could not find a post which he is looking for he could read another post or find the post in sitemap which he is searching for.

How to add stylish sitemap in blogger:

Follow below steps to add stylish sitemap in your blog.

(1). Go to blogger dashboard.

(2). Click on pages in the menu on left side.

(3). Create a new page by clicking on New page.

(4). Give a title to your page "Sitemap".

(5). Below title switch to Html and paste the below code into it.

<style type="text/css">

#abt-sitemap > a {display: none;}

.post-archive { width: 140%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 3px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #CCC; font-size: 14px; line-height: normal; outline: 3px double #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #3d85c6; color: #fff; text-decoration:none; }

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

<div class="content section" id="content">

<div class="widget Blog" id="Blog1">

<div class="blog-posts hfeed masonry">

<div class="date-outer">

<div class="date-posts">

<div class="post-outer">

<div class="post hentry">

<div class="post-header">

<div class="post-header-line-1">

</div>

<span style="display: none;">

<span class="post-author vcard">

</span>

</span>

            

</div>

<div class="post-body entry-content" id="post-body-8394154168444705692">

<div id="abt-sitemap">

<script src="//rawgit.com/101Helper/docs/master/stylish-sitemap.js" type="text/javascript"></script>

<script src="http://www.101helper.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

(6). Replace http://www.101helper.blogspot.com with your blog link.

(7). Publish the page and open it to see stylish sitemap of your blog.

Note: If you haven't labeled your posts then this sitemap won't work, so label your posts while writing a post otherwise you will see an empty sitemap or an empty page. 

Customization: 

To change background color of tabs when hovered by mouse replace background: #3d85c6 with desired color code.

If you have any question ask me in comments or contact me. Follow and subscribe to get latest updates in your inbox. Share this post with others and help 101Helper grow.

Search tags: Sitemap for blogger, adding sitemap in blogger, how to add sitemap to a page in blogger, Stylish sitemap for blogger, 101Helpe blogger tutorials.

Tweet