Haw to add sitemap in blogger website

sitemap is the most essential thing which every Blogger should add in his her blog. Its not just a page but helps a lot to reduce bounce rate immediately by providing direct navigation to label specific post. The sitemap Blogger we're going to add today shows a list of articles on the latest published order under each categories, This widget is based on ajax so it will load blazing fast and will not affect the performance of your blog. Lets move further and see How to Add Sitemap in Blogger .

Let's Start Step-1 ( Adding CSS ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to Templates Edit HTML
 and search for the ending

 tag and just above it paste the following code.

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ .mapasite { margin-bottom: 10px; background-color: #F8F8F8 } .mapasite.active .mapa { display: block } .mapasite .mapa { display: none } .mapasite h2 { background-color: #EEE; color: #000; font-size: 15px; padding: 10px 20px; border-radius: 2px; margin-bottom: 0; cursor: pointer; font-weight: 700 } .mapasite h2 .botao { font-size: 18px; line-height: 1.2em } .botao .fa-minus-circle { color: #f30 } .mapapost { overflow: hidden; margin-bottom: 20px; height: 70px; background-color: #FFF } .mapa { padding: 40px } .map-thumb { background-color: #F0F0F0; padding: 10px; display: block; width: 65px; height: 50px; float: left } .map-img { width: 65px; height: 50px; overflow: hidden; border-radius: 2px } .map-thumb a { width: 100%; height: 100%; display: block; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .map-thumb a:hover { -webkit-transform: scale(1.1) rotate(-1.5deg)!important; -moz-transform: scale(1.1) rotate(-1.5deg)!important; transform: scale(1.1) rotate(-1.5deg)!important; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .mapapost .wrp-titulo { padding-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.3em; padding-left: 25px; padding-right: 10px; display: block; overflow: hidden; margin-bottom: 5px } .mapapost .wrp-titulo a { } .mapapost .wrp-titulo a:hover { color: #f30; text-decoration: underline } .map-meta { display: block; float: left; overflow: hidden; padding-left: 25px; } .mapasite h2 .botao { float: right }

Step-2 ( Adding HTML Script ) 

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the

tag  and just above it paste the following HTML Coding.

Now Save your template and go to pages to add sitemap.

Download and copy code

Download

Step-3 ( Adding Sitemap In Pages ) - Most Important !!

Now this is the most essential part of the tutorial and you have to do it very carefully.Go to your blogger dashboard > Pages > Add New Page. 
On the new page content after adding the page title and hiding the comments using options, add the following code in the page content area.

 [sitemap]

For better understanding check the highlighted area in the below image.


Now click publish button and check the published page to see the newly added sitemap blogger. ;)

Conclusion

Congrats !! You have made it. now you have learned that How to Add Sitemap in Blogger. Visit your blog and check the awesome live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome  please stay tuned with Us. Goodbye !!