Cara Membuat Running Text di Blog Template Plus UI 2.6

Tutorial membuat Widget Running Text di Blog Template Plus UI 2.6

Running Text di Blog Template Plus UI 2.6

Running Text

Running text adalah efek tulisan bergerak atau berjalan di halalaman blogger, flatform blog lainnya sebenarnya sangat mudah sekali, cukup dengan beberapa baris kode perintah saja maka tulisan berjalan bisa anda pasang di halaman blog anda baik di bagian header, footer, body sidebar atau di bagian lainnya yang anda inginkan pada halaman blog anda.

Running text atau tulisan berjalan dikenal sebagai marquee, karena untuk membuat tulisan berjalan pada halaman blog anda, perintahnya adalah menggunakan tag marquee atau berupa kode animasi, kode perintah ini merupakan salah satu perintah, untuk membuat tulisan menjadi bergerak sesuai dengan yang kita inginkan

Tutorial

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

Copy Paste Kode CSS & JS

1. Pertama Masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Langkah #1 cari kode ]]></b:skin>, setelah ketemu salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></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%}}

5. Langkah #2 cari kode </body>, kemudian 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>  

6. Terakhir - Pratinjau dan Simpan .

Copy Paste Kode HTML

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

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

---

Demo

Contoh demo tampilan running text di blog.

Belajar... Blogger

---

Demikian cara membuat Running Text di Blog Template Plus UI 2.6 , semoga bermanfaat.

Go to Link