Create Site Map Page Grid View on Blogger

Create Site Map Page Grid View on Blogger


      The main function of a Sitemap is to show all your content to your viewers. There are basically two types of sitemaps.

One sitemap is used by search bots which is invisible to your visitors and the second is physical which displays all the content on your site which helps visitors to find the content on your blog. The more attractive your sitemap is, the more likely it is that people will find content from it. You've seen sitemaps displaying content in a list that isn't very appealing, but now I'm going to show you how you can make your sitemap more interesting by making grid views it look like a photo gallery.

How Create Site Map Grid View Like a photo Gallery ?

Here are the steps:

Step 1. Go to your blogger admin dashboard.

Step 2. Select "Page" menu and then select "New Page".

Step 3. On the page editor select view mode on top left corner, and then select "HTML View"

Step 4. Copy code below and paste to the your editor.

<style type="text/css"> 



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="/view/flipcard"></iframe>  


Step 5. Save the page and preview your page.

The method above takes advantage of the flip view from blogger to be displayed on our page.

You can adjust the frame height with a large number of articles on your blog. by changing the "height" value on .grid-sitemap iframe  class.

"margin-top: -115px; " this works to hide the default header so that it does not appear to be visible in the frame. You can experiment further by changing or adding css code on the page.

Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.

"Look for someone who is willing to accept your situation, your family and your job. In fact, happiness is about being together and being grateful." 

Featured Post

How to fix CLS issue in your blog or web ?

  Fixing CLS issues is a big deal. That's because most of your competitors won't fix CLS problems and as a result won't rank wel...