Countdown

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan mengenai menyambut Lebaran . Ikutin terus yo langsung saja.

Tahapannya :


1.Buka blogger edit tema cari </head> masukkan kode CSS dibawah ini

<style type="text/css" scoped="scoped">

#lebaran{background:#333;color:#37B185;font-family:Oswald, Arial, Sans-serif;font-size:18px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}

      .teks {color:white}

    </style>


2.  Cari kode <body> atau sebelum </body> masukan kode dibawah ini

<div id="lebaran">

    <span id="countdown">133

    <span class="teks">hari</span>23

    <span class="teks">jam</span>45 

    <span class="teks">menit</span> 40 

    <span class="teks">detik menuju Hari Raya Idul Fitri</span>1443 H / 2022 M</span>

    </div>


3. Cari footer masukan kode dibawah ini

<script type="text/javascript">

    //<![CDATA[

    // set the date we're counting down to

    var target_date = new Date("May 2, 2022").getTime();

    // variables for time units

    var days, hours, minutes, seconds;

    // get tag element

    var countdown = document.getElementById("countdown");

    // update the tag with id "countdown" every 1 second

    setInterval(function () {

        // find the amount of "seconds" between now and target

        var current_date = new Date().getTime();

        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations

        days = parseInt(seconds_left / 86400);

        seconds_left = seconds_left % 86400;

   

        hours = parseInt(seconds_left / 3600);

        seconds_left = seconds_left % 3600;

      

        minutes = parseInt(seconds_left / 60);

        seconds = parseInt(seconds_left % 60);

   

        // format countdown string + set tag value

      countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "

      + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju Hari Raya Idul Fitri</span> 1443 H / 2022 M";

    }, 1000);

    //]]>

    </script>