Cara Membuat Running Text di Blog Template Plus UI 2.6

Cara Membuat Running Text di Blog Template Plus UI 2.6

Running Text

Bagaiman cara membuat running text berjalan di blog template Plus UI, sebagai berikut.

Tutorial

1. Masuk ke menu Dashboard Blogger

2. Pilih Tema

3. Edit HTML

Tahap I

Salin kode script di bawah ini, dan kemudian tempelkan di atas atau sebelum </body>

<script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>  

Tahap II

Salin kode script di bawah ini, dan kemudian tempelkan di atas atau sebelum ]]></b:skin>

.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}

Simpan

Kemudian salin kode html di bawah ini , dan letakkan di halaman, postingan, atau di widget.

<span class="text first-text">Belajar...</span>
<span class="text sec-text">Learn...</span>

Belajar...
Blogger