How to Create a Grid View Sitemap Page for Blogger


Today in this tutorial we will create a Sitemap page for your Blogger blog that shows Grid images of your Blogger posts.

This grid view Sitemap widget is a responsive widget and it will extract your featured images and will display and it will automatically sort your posts by Recent Posts, Date, Label, and Author.

So, before heading on to the tutorial, let me give a brief overview of Sitemap.

Click here for a Demo Sitemap Page


What is a Sitemap

A sitemap is basically a table of contents for your website or blog, or an index.
It will list all your web pages of your website, or the important ones so that people and search engine bots can easily navigate through all your pages.

Sitemaps are mainly created for two purposes, for users, and for search engines.


The user benefits from sitemap because they can go and if they can’t find a page of your site through the main navigation they can actually go and look at your sitemap and possibly find the information there.

If you have a large site, using sitemap can actually break down your site into smaller sections by categories or alphabetically, labels, authors, etc.

So, creating a sitemap for your site is very beneficial for your users in helping them to find information on your site.

Search Engine

Search engines can go and crawl your sitemap and find all the different pages of your site.

So, it will help your site get indexed and also for SEO purposes in order to help certain page rankings.

When a search engine bot, sometimes also called Spiders, visits your website and sees a style free website. So,

How to Create a Grid View Sitemap Page for Blogger

This widget code can be embed and used both for creating a new sitemap page or you can also add it to your blog sidebar.


Step 1. Login to your Blogger blog and select Pages and click on Add New in order to create a new page.


Step 2. Now give the page title for e.g. Sitemap and switch your page to HTML editor mode.

Step 3. Delete everything whatever is inside the HTML view then, copy and paste the below code inside your new sitemap page.

  <style type="text/css">  
 .grid-sitemap {  
  overflow: hidden;  
  position: relative;  
  height: 565px;  
  margin: 20px 0 40px 0;  
 .grid-sitemap iframe {  
   display: block;  
   width: 100%;  
   height: 680px;  
   margin-top: -115px;  
   margin-left: -5px;  
 <div class="grid-sitemap">  
  <iframe src="https://www.wonderkrish.com/view/flipcard"></iframe>  

Note: Do not forget to change my blog’s URL (https://www.wonderkrish.com) with yours.

Step 4. Finally, click on Publish and you are done.

Now, view your new sitemap page and click on different sections in order to see sort your sitemap with different categories. 


I hope you have added a new beautiful grid view sitemap page or may have embedded on your blog's sidebar successfully.

And, if you have found this tutorial helpful, then please do us a favor by sharing this post on social media sites.


  1. Thank you for sharing this info.keep posting new blogs related to digital marketing for us.

  2. Posts really helpful. But is there any thing wrong with my blog, Http://jidegabs.blogspot.com
    I will be waiting for your replie. Thanks

  3. i hv finally use it for my blogg thank you http://www.laboratoryinsider.com/p/sitemap.html

  4. how to bring result like shown below, in google search result.. can you elaborate please if you could. Thanks in Advance

    https://www.wonderkrish.com › WordPress Guides

  5. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future... SEO Stockholm

  6. Your posts are very easily explained. I tried it my post too.

  7. Thank you, now i have site map on my blog MySmartFolks