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.
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.
Users
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; } </style> <div class="grid-sitemap"> <iframe src="https://about-tutor.blogspot.com//view/flipcard"></iframe> </div> 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.
Conclusion
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.
Comments
Post a Comment