To add a Next Article Timer on a Blogger or WordPress site, you can follow these steps:

For Blogger:

1. Log in to your Blogger account and select your blog.
2. Click on the "Layout" option from the left-hand menu.
3. Click on "Add a Gadget" and select "HTML/JavaScript".
4. Paste the following code in the content section:

<script type="text/javascript">
var nextPageDelay = 15;
var countDownMsg = "Next article will be available in ";
var redirectAfterCountDown = true;
var redirectURL = "";
</script>
<script src="https://cdn.rawgit.com/garrett-eclipse/blogger-next-article-timer/v1.1/js/next-article-timer.min.js"></script>

5. Replace the "nextPageDelay" variable value with the delay time (in seconds) you want before the next article is shown.
6. You can customize the "countDownMsg" variable to show a custom message before the countdown.
7. If you want to redirect the user to another page after the countdown, set the "redirectAfterCountDown" variable to "true" and replace the "redirectURL" variable value with your desired URL.

For WordPress:

1. Log in to your WordPress dashboard and navigate to "Appearance" > "Editor".
2. Select the "header.php" file from the right-hand menu.
3. Paste the following code just before the closing </head> tag:

<script type="text/javascript">
var nextPageDelay = 15;
var countDownMsg = "Next article will be available in ";
var redirectAfterCountDown = true;
var redirectURL = "";
</script>
<script src="https://cdn.rawgit.com/garrett-eclipse/blogger-next-article-timer/v1.1/js/next-article-timer.min.js"></script>

4. Replace the "nextPageDelay" variable value with the delay time (in seconds) you want before the next article is shown.
5. You can customize the "countDownMsg" variable to show a custom message before the countdown.
6. If you want to redirect the user to another page after the countdown, set the "redirectAfterCountDown" variable to "true" and replace the "redirectURL" variable value with your desired URL.

You can add a next article timer with a wait time of 30 seconds before the link shows up on your Blogger or WordPress site by using a JavaScript code.

<script>
  var seconds = 30;
  var nextArticle = 'https://www.example.com/next-article.html';

  function countdown() {
    seconds--;
    if (seconds <= 0) {
      document.getElementById('next-article-link').innerHTML = '<a href="' + nextArticle + '">Next Article</a>';
      clearInterval(countdownTimer);
    }
  }

  var countdownTimer = setInterval('countdown()', 1000);
</script>

<p>Wait for <span id="countdown-timer">30</span> seconds before the next article link appears:</p>
<p id="next-article-link"></p>

Another code to do the same:

<div dir="ltr" style="text-align: left;"><center>
<span id="countdown">You have to wait 30 seconds.</span></center>
<div style="text-align: center;"><b>Generating Code...</b>
<a class="button" href="(your article link)" id="download_link" rel="noopener" style="display: none;" target="_blank">Next Post</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 35;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "wait bro to get code %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script></div>
</div>