How to add Grid View sitemap in Blogger with thumbnail

Sitemap is one of the important aspect of your blog. It showcase all your post in one place. If your reader wants to search for any post/s then the sitemap is one of the best page to find.

In this tutorials, this is a simple way of adding Grid View sitemap in Blogger with thumbnail.

Live Demo

See Demo Page

BloggerizeTricks

The following simple steps on how we do it:

Step 1: Go to Blogger dashboard -> Pages and Click New Page

Step 2: Switch Editor to HMTL View

Step 3: Copy and Paste the following Code

 Script
<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;
}
</style>
<div class="grid-sitemap">
 <iframe src="https://bloggerizetricks.blogspot.com/view/flipcard"></iframe>
</div>

Customization: Change the URL in GREEN color of your own.

Step 4: Publish and Done!

See the result on your page. Enjoy Blogging!