Can I add a code block to my site header?

Hello, quick question for you folks to see if something is possible. I'm trying to add this code block to my site header:

    <div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

It currently appears in the footer of my site, https://outside365.blog , and looks like this:

 I would like to put it here on web:

And either next to or below my logo on Mobile:

Does anyone know if this is possible and how I could do it? Thanks for any help you can provide!

40 minutes ago, mtbgreg said:

Hello, quick question for you folks to see if something is possible. I'm trying to add this code block to my site header:

    <div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

It currently appears in the footer of my site, https://outside365.blog, and looks like this:

 I would like to put it here on web:

And either next to or below my logo on Mobile:

 

Does anyone know if this is possible and how I could do it? Thanks for any help you can provide!

I can not access your URL now. Can you check it again?

The suitable solution is using the javascript code to move this element into the header

9 hours ago, Beyondspace said:

I can not access your URL now. Can you check it again?

The suitable solution is using the javascript code to move this element into the header

The correct url is: https://www.outside365.blog/

Part of the code injection for the counter is indeed in the footer section, but how would I then move the code block to display the counter into the header? Like how do I choose to show the counter in that particular location? 

To make the counter work, I put this code injection in the header:

<style>
        .countup {
            text-align: center;
            margin-bottom: 20px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        .countup .pitiyacountup {
            display: inline-block;
            padding: 10px;
            background: #151515;
            margin: 0;
            color: white;
            min-width: 2.6rem;
            margin-left: 13px;
            border-radius: 10px 0 0 10px;
        }

        .countup span[class*="timeRef"] {
            border-radius: 0 10px 10px 0;
            margin-left: 0;
            background: #C8A47E;
            color: black;
        }
    </style>

And then I put this code injection in the footer:

<script>
        /*
        Count Up from Date and Time
        Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html
        */
        window.onload = function () {
            var g = document.getElementById('countuptimer');
            g.setAttribute("class", "countup");
            var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span>';
            g.insertAdjacentHTML('afterbegin', e);
            var t = g.dataset.countup;
            countUpFromTime(t, 'countuptimer');
        };
        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            days = Math.floor(timeDifference / (secondsInADay) * 1);
            hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var idEl = document.getElementById(id);
            idEl.getElementsByClassName('days')[0].innerHTML = days;
            idEl.getElementsByClassName('hours')[0].innerHTML = hours;
            idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
            idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

            clearTimeout(countUpFromTime.interval);
            countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
        }
    </script>
 

And then this code in a code block to display the timer:

<div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

59 minutes ago, mtbgreg said:

The correct url is: https://www.outside365.blog/

Part of the code injection for the counter is indeed in the footer section, but how would I then move the code block to display the counter into the header? Like how do I choose to show the counter in that particular location? 

To make the counter work, I put this code injection in the header:

<style>
        .countup {
            text-align: center;
            margin-bottom: 20px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        .countup .pitiyacountup {
            display: inline-block;
            padding: 10px;
            background: #151515;
            margin: 0;
            color: white;
            min-width: 2.6rem;
            margin-left: 13px;
            border-radius: 10px 0 0 10px;
        }

        .countup span[class*="timeRef"] {
            border-radius: 0 10px 10px 0;
            margin-left: 0;
            background: #C8A47E;
            color: black;
        }
    </style>

 

 

And then I put this code injection in the footer:

<script>
        /*
        Count Up from Date and Time
        Author: @thepitiya / https://wwww.pitiya.com/website-count-up-timer-widgets.html
        */
        window.onload = function () {
            var g = document.getElementById('countuptimer');
            g.setAttribute("class", "countup");
            var e = '<span class="pitiyacountup days">00</span><span class="pitiyacountup timeRefDays">days</span>';
            g.insertAdjacentHTML('afterbegin', e);
            var t = g.dataset.countup;
            countUpFromTime(t, 'countuptimer');
        };
        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            days = Math.floor(timeDifference / (secondsInADay) * 1);
            hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var idEl = document.getElementById(id);
            idEl.getElementsByClassName('days')[0].innerHTML = days;
            idEl.getElementsByClassName('hours')[0].innerHTML = hours;
            idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
            idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

            clearTimeout(countUpFromTime.interval);
            countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
        }
    </script>
 

And then this code in a code block to display the timer:

<div id="countuptimer" data-countup="July 27, 2018 12:00:00"></div>

You can try the following

<script>
  windonw.onload = function(){
    const timeEl = document.querySelector('#countuptimer');
    const timeElMobile = timeEl.cloneNode(true);
    if (timeEl && timeElMobile) {
      const headerRight = document.querySelector('.header-actions-action.header-actions-action--social');
      const headerLogo = document.querySelector('.header-display-mobile .header-title-logo a');
      console.log(timeElMobile);
      headerRight.insertAdjacentElement('afterbegin',timeEl);
      headerLogo.insertAdjacentElement('beforeend',timeElMobile)
    }
  }
</script>
<style>
  #countuptimer {
    margin-bottom: 0;

  }
  .header-actions-action.header-actions-action--social {
    align-items: center;
  }

  .header-display-mobile .header-title-logo a {
    display: flex;
  }

  .header-display-mobile #countuptimer {
    display: flex;
    box-sizing: border-box;
    width: 110px;
  }
  .header-display-mobile .countup .pitiyacountup {
    font-size: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: unset;
  }
</style>

Support me by pressing 👍  or marking as solution if this useful for you

Hello Beyondspace,

I tried using that code, but I couldn't get it to work. But let me ask a few follow up questions:

1. Where should I paste that code in to make it work properly?

2. Do I need to remove any of the other code that I've already added?

Thanks for your help!

On 4/5/2023 at 6:22 AM, mtbgreg said:

Hello Beyondspace,

I tried using that code, but I couldn't get it to work. But let me ask a few follow up questions:

1. Where should I paste that code in to make it work properly?

2. Do I need to remove any of the other code that I've already added?

Thanks for your help!

Add to Settings > Advanced > Code Injection > Footer

No need to remove any current codes

On 4/7/2023 at 7:57 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

No need to remove any current codes

Hi Tuanphan, thanks for the follow up! I followed those instructions, and it still doesn't appear to be to be working. See https://outside365.blog , and screenshot attached.

On 4/10/2023 at 10:35 PM, mtbgreg said:

Hi Tuanphan, thanks for the follow up! I followed those instructions, and it still doesn't appear to be to be working. See https://outside365.blog , and screenshot attached.

Change windonw to window

13 hours ago, tuanphan said:

Change windonw to window

Thanks for catching that! But now, the counter isn't showing up anywhere 🤔 

Thanks for all of the replies, I really appreciate it! 🙏