For this tutorial I will going to show you how to create or make a blog page or post that refreshes by itself. You can also control the time when will the auto-refresh happen, you can set it to 5 seconds, 1 minute or whatever you like.

Auto-refresh is a process wherein a web page will refresh without any user intervention. You do not need to click the Reload or Refresh button that you will find in your internet browser.

The question is, why we want our page to auto-refresh? I will guess, maybe, you are making a "Live Blog" about a game. For example, a basketball game between the Golden State Warriors and the Milwaukee Bucks. You are using your live blog to write all the scores,live actions or play-by-play, and anything live about the game. With the help of your auto-refresh meta tag code, your users do not need to reload or refresh the page to see the new live updates, they will just wait for the page to refresh by itself.

For this tutorial, we are going to do two things:
a. We will make a blank Blogger template which is going to be our page that auto-refreshes.
b. And we'll add the code needed to make that page refresh by itself.


STEPS:

1. Open your Blogger account and create a New Blog.

2. Once, you have created a new blog, click Theme > Edit HTML.

3. Delete all the code that you will find inside the HTML of your theme.

4. After you deleted all the code, copy and paste the given code below inside your Blog's HTML.
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <meta content='3; url = https://auto-refresh-url.blogspot.com' http-equiv='refresh'/>
  <b:if cond='data:blog.isMobile'>
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
   <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
   /*
    body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
     padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
     $(body.background.override) margin: 0;
     padding: 0;
    }
 
  ]]></b:skin>
 </head>
 <body>
  <b:section class='main' id='main' showaddelement='yes'/>
   <center>This page will refresh every after 3 seconds...<br/> Want to know how to do this auto-refresh page in your own blogspot or domain? Read the tutorial <a href='https://www.sharingthat.xyz/2019/05/how-to-make-blog-page-that-auto-refresh.html'><b>here</b></a>.<br/><br />&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/LDSmlqot3sM&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;</center>
 </body>
</html>

CUSTOMIZE YOUR AUTO-REFRESH PAGE

<meta content='3; url = https://auto-refresh-url.blogspot.com' http-equiv='refresh'/>

Change the value 3 to any value that you want. 3 is equal to 3 seconds. That only means that 60 is equivalent to a minute.

Change the url with your own one.

In the "This page will refresh every after 3 seconds...", you can also modify this one with your own.

5. When done, Save your template. Test whether your code works. A live demo of this tutorial is found here.