Assalamualaikum Warahmatullahi Wabarakatuh
Selamat Pagi sobat SerDa , di pagi hari kali ini saya akan membagikan tips dan trick Cara Membuat Teks Berjalan atau Running Text di Blog . Langsung saja ini dia caranya :
Kita bisa menambahkan latarbelakang dengan warna lain, contohnya seperti berikut:
Teks berjalan dengan latar biru Kodenya:
Kita juga bisa mengganti dengan warna teks lainnya, contohnya seperti berikut:
Teks putih berjalan dengan latar biru
Kodenya:
Jika ingin warna teks yang lain ganti nilai color dengan nama warna lainnya. Untuk ukuran hurufnya bisa ganti nilai font-size, misal 40px, 15px, dll.
Jika ingin berapa kali saja teks berjalan ditampilkan (misalnya hanya 10 kali), kita bisa tambahkan loop, seperti berikut:
Teks berjalan hanya ditampilkan 10 kali Jika ingin lebih banyak, berikan nilai loop dengan nilai yang lebih besar. Atur kecepatan pergerakan teksnya juga bisa, tambahkan scrollamount, seperti berikut:
Teks berjalan dengan kecepatan Semakin besar nilai yang diberikan untuk scrollamount, akan semakin cepat pergerakannya.
Sekarang bagaimana agar teks berjalan dari atas ke bawah, tambahkan direction="down" ke marquee, seperti berikut:
Teks berjalan ke bawah Jangan lupa tambahkan height-nya yah.
Ingin sebaliknya seperti di atas, ganti nilai direction ke up, hingga jadi direction="up". Kita bisa tambahkan behavior ke marquee, tiga nilai yang boleh di berikan untuk behavior=["scroll" | "slide" | "alternate"].
Contoh scroll:
Teks berjalan... dengan scroll Contoh slide:
Teks berjalan... dengan slide Contoh alternate:
Teks berjalan... dengan alternate
Selain untuk blog, gunanya bisa juga untuk mengajarkan anak kita belajar membaca running text. Semoga ada manfaat.
Demikian yang dapat saya sampaikan , semoga bermanfaat .
Wassalamualaikum Warahmatullahi Wabarakatuh
Kita bisa menambahkan latarbelakang dengan warna lain, contohnya seperti berikut:
Teks berjalan dengan latar biru Kodenya:
<marquee bgcolor="blue">Teks berjalan dengan latar biru</marquee>
Jika ingin dengan warna latarbelakang yang berbeda, ganti nilai bgcolor dengan nama warna lainnya, misal black, white, green, orange, pink, dll.
Kita juga bisa mengganti dengan warna teks lainnya, contohnya seperti berikut:
Teks putih berjalan dengan latar biru
Kodenya:
<marquee bgcolor="blue" style="color:white;font-size:20px;">Teks putih berjalan dengan latar biru</marquee>
Jika ingin warna teks yang lain ganti nilai color dengan nama warna lainnya. Untuk ukuran hurufnya bisa ganti nilai font-size, misal 40px, 15px, dll.
Jika ingin berapa kali saja teks berjalan ditampilkan (misalnya hanya 10 kali), kita bisa tambahkan loop, seperti berikut:
<marquee loop="10">Teks berjalan hanya ditampilkan 10 kali</marquee>Tampilan:
Teks berjalan hanya ditampilkan 10 kali Jika ingin lebih banyak, berikan nilai loop dengan nilai yang lebih besar. Atur kecepatan pergerakan teksnya juga bisa, tambahkan scrollamount, seperti berikut:
<marquee scrollamount="200">Teks berjalan dengan kecepatan</marquee>Tampilan:
Teks berjalan dengan kecepatan Semakin besar nilai yang diberikan untuk scrollamount, akan semakin cepat pergerakannya.
Sekarang bagaimana agar teks berjalan dari atas ke bawah, tambahkan direction="down" ke marquee, seperti berikut:
<marquee direction="down" height="100">Teks berjalan ke bawah</marquee>Tampilan:
Teks berjalan ke bawah Jangan lupa tambahkan height-nya yah.
Ingin sebaliknya seperti di atas, ganti nilai direction ke up, hingga jadi direction="up". Kita bisa tambahkan behavior ke marquee, tiga nilai yang boleh di berikan untuk behavior=["scroll" | "slide" | "alternate"].
Contoh scroll:
<marquee behavior="scroll">Teks berjalan... dengan scroll</marquee>Tampilan:
Teks berjalan... dengan scroll Contoh slide:
<marquee behavior="slide">Teks berjalan... dengan slide</marquee>Tampilan:
Teks berjalan... dengan slide Contoh alternate:
<marquee behavior="alternate">Teks berjalan... dengan alternate</marquee>Tampilan:
Teks berjalan... dengan alternate
Selain untuk blog, gunanya bisa juga untuk mengajarkan anak kita belajar membaca running text. Semoga ada manfaat.
Demikian yang dapat saya sampaikan , semoga bermanfaat .
Wassalamualaikum Warahmatullahi Wabarakatuh
Makasih infonya...
BalasHapus