Cara Membuat Tulisan Berjalan Atau Running Text di WordPress. 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.
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 - 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 - 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 - 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 - 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 - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami - 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 - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami - 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 - Berbagi Ilmu Tentang Teknologi ## Selamat datang di website kami - 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 tulis di kolom komentar.
Comments
Post a Comment