Cara Membuat Tulisan Berjalan di Website dan Blog

Pernahkah Anda melihat sebuah blog yang mana terdapat sebuah teks yang bisa berjalan? Ya itu biasa kita kenal dengan running text atau tulisan berjalan. Salah satu fungsinya yaitu dengan menyampaikan sebuah informasi dari sebuah web kepada pengunjung. Selain itu running text juga bisa mempercantik blog Anda.

Bagi Anda yang mempunyai blog dan ingin mempercantik tampilan dengan menggunakan running text tetapi Anda tidak tahu cara membuatnya, tenang saja dibawah ini kami akan membagikan cara membuat running text dengan sangat mudah.

Cara Membuat Tulisan Berjalan

yang pertama adalah yang paling sederhana yaitu tampilan ini berjalan secara default yang mana belum kita berikan efek apapun.

<div class="px-2 bg-light "><marquee class="py-3">Selamat datang di blog kami yiptechid.com - Informasi, Tips dan Tutorial Seputar Teknologi</marquee></div>

Maka tampilannya akan seperti ini

Selamat datang di blog kami yiptechid.com – Informasi, Tips dan Tutorial Seputar Teknologi

selanjutnya adalah dengan penambahan direction=”left” yakni tulisan akan bergerak dari kanan ke kiri dan penambahan warna pada teks denganmemberikan style=”color:green;” Bisa Anda isi direction=”right” dan hasilnya tulisan akan bergerak dari kiri ke kanan

<div class="px-2 bg-light "><marquee class="py-3" direction="right" style="color:green;">Selamat datang di blog kami yiptechid.com - Informasi, Tips dan Tutorial Seputar Teknologi</marquee></div>

Maka tampilannya akan seperti ini

Selamat datang di website kami teknologi.visitklaten.com – Sharing Teknologi – Berbagi Ilmu Tentang Teknologi

yang ketiga dengan tambahan bgcolor=”yellow” akan memberikan warna kuning pada background. Dan onmouseover=”this.stop()” onmouseout=”this.start()” agar ketika 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" bgcolor="yellow" direction="left" onmouseover="this.stop()" onmouseout="this.start()">
Selamat datang di blog kami yiptechid.com - Informasi, Tips dan Tutorial Seputar Teknologi</marquee></div>

Maka tampilannya akan seperti ini

Selamat datang di blog kami yiptechid.com – Informasi, Tips dan Tutorial Seputar Teknologi

selanjutnya adalah dengan penambahan atribut behavior=”alternate”. Maka efeknya adalah tulisan akan berjalan secara bolak balik

<div class="px-2 bg-light "><marquee class="py-3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" behavior="alternate" style="color:red;">
yiptechid.com - Informasi, Tips dan Tutorial Seputar Teknologi</marquee></div>

Maka tampilan seperti ini

yiptechid.com – Informasi, Tips dan Tutorial Seputar Teknologi

Kemudian yang terakhir adalah dengan memberikan direction=”down” akan memberikan efek running text berjalan secara vertikal atau keatas dan kebawah

<div class="px-2 bg-light "><marquee class="py-3" style="color:blue;" direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">yiptechid.com - Informasi, Tips dan Tutorial Seputar Teknologi</marquee></div>

Maka tampilannya akan seperti berikut

yiptechid.com – Informasi, Tips dan Tutorial Seputar Teknologi

Nah setelah Anda membuat script seperti itu, selanjutnya Anda harus memasangkannya pada struktur file di blog Anda yaitu script ini kita pasang pada file index.php milik Anda. Pasangkan pada bagian sesuai keinginan Anda, jika ingin memasangkan diatas header, maka tempelkan script tersebut diatas script header.

Itulah cara membuat tulisan berjalan di website dan blog yang dapat Anda coba untuk mempercantik halaman blog Anda. Semoga bermanfaat.

One thought on “Cara Membuat Tulisan Berjalan di Website dan Blog

  • 24 April 2021 pada 11:59 pm
    Permalink

    Yes, really. So happens. Let’s discuss this question. Here or in PM.

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *