Membuat Tulisan Berjalan Atau Running Text

Cara Membuat Tulisan Berjalan Atau Running Text di WordPress. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin mempercantik tampilan website dengan animasi teks dengan hanya bermodal tag HTML. Yap.. Maka salah satu medote ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress. 

Dengan hanya bermodal tag HTML dengan sedikit sentuhan style CSS bisa membuat website lebih menarik. Selain itu untuk membuatnya juga sangat mudah sekali.

Sebelumnya kami haturkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Teks Berjalan Atau Running Text ini akan bermanfaat apabila ingin menampilkan informasi penting tentang web ataupun hal lainnya. Untuk membuatnya sangat mudah dan metode yang akan digunakan adalah tag HTML “<marquee></marquee>”. Yuk langsung aja dipraktekkan, kami beri kode html beserta hasilnya. Dengan catatan kami menggunakan tambahan CSS dari bootstrap.

Berikut Cara Membuat Tulisan Berjalan Atau Running Text

Membuat Tulisan Berjalan

1. Pertama adalah bentuk standar

<div class="px-2 bg-light "><marquee class="py-3">Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi</marquee></div>

Tampilannya bisa dilihat dibawah ini

2. Kedua dengan penambahan direction=”left”  yakni tulisan akan bergerak dari kanan ke kiri. Bisa diisi direction=”right” dan hasilnya tulisan akan bergerak dari kiri ke kanan

<div class="px-2 bg-light "><marquee class="py-3" direction="right">Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi</marquee></div>

Tampilannya bisa dilihat dibawah ini

3. Ketiga dengan tambahan onmouseover=”this.stop()” onmouseout=”this.start()”. Agar saat cursor diarahkan ke running text maka teks akan berhenti dan jika tidak diarahkan maka akan kembali bergerak.

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()">
        Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi
</marquee></div>

Tampilannya bisa dilihat dibawah ini

4. Keempat dengan menambahkan scrollamount=”20″ untuk mengatur kecepatan. Angka bisa diganti sesuai dengan kebutuhan semakin banyak semakin cepat.

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="20">
    Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi
    </marquee></div>

Tampilannya bisa dilihat dibawah ini

5. Kelima dengan penambahan atribut behavior

5a. behavior=”alternate”. 

Animasi teks akan berjalan bolak-balik

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" behavior="alternate">
    Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi
    </marquee></div>

Tampilannya bisa dilihat dibawah ini

5b. behavior=”slide”

Teks berjalan akan berhenti jika sudah mentok.

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" behavior="slide">
    Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi
    </marquee></div>

Tampilannya bisa dilihat dibawah ini

5c. behavior=”scroll”

Seperti halnya teks berjalan normal.

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" behavior="scroll">
    Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami teknologi.visitklaten.com - Sharing Teknologi - Berbagi Ilmu Tentang Teknologi
    </marquee></div>

Tampilannya bisa dilihat dibawah ini

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.

Info Tambahan

Sekedar info semoga berminat, jika ingin mengiklankan usahanya khususnya wilayah klaten bisa memasang iklan di https://www.visitklaten.com/pasang-iklan/ . Kelebihannya apabila diketikan kata kunci dan ditambah dengan kata “klaten” maka biasanya kesempatan muncul di halaman pertama google akan semakin besar. Selain itu yang tak kalah menarik ada diskonnya….

Tersedia juga iklan dalam bentuk banner. Apabila ingin beriklan di web inipun juga bisa, silakan Chat WA saja.