Cara Menciptakan Goresan Pena Berjalan Di Blog
 |
| Contoh Tulisan Berjalan |
Minggu kemudian ada sobat saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita dibawahnya (footer) sanggup dikasih teks berjalan menyerupai kayak di berita-berita yang ada di TV ’ spontan pribadi saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.
Dengan wajah lugu sobat saya nanya lagi, ‘ emang gimana cara menciptakan goresan pena berjalan di blog ? ’ nah, daripada saya jelasin cara menciptakan goresan pena berjalan tersebut pribadi lewat mulut, agak ribet juga, untuk itu saya tulis di blog ini, itung-itung nambah jumlah postingan blog.
Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, bahwasanya saya juga sedikit galau kenapa teks berjalan disebut Marquee padahal kalau diartikan kedalam bahasa indonesia, Marquee berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.
Dah, dari tadi ngoceh mulu, kini kita masuk pada Cara Membuat Tulisan Berjalan (Marquee) di Blog.
Contoh Tulisan Berjalan / Marquee Standar
Untuk menciptakan Tulisan Berjalan menyerupai diatas, kita membutuhkan isyarat html menyerupai dibawah ini :
<marquee>Contoh Teks Yang Dikenai Marquee</marquee>
Si <marquee> inilah yang nantinya akan menciptakan seluruh Tulisan atau Teks yang diapit isyarat tersebut sanggup bergerak.
Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa embel-embel pengaruh apapun pada isyarat html. Kita pun sanggup memvariasikan isyarat <marquee> diatas dengan JavaScript atau HTML yang lain, supaya lebih terang kita masuk pola saja.
Cara Menambahkan Warna Background di Tulisan Berjalan
Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam isyarat marquee-nya, dibawah ini ialah pola kalau kita ingin memberi warna abu-abu pada Marquee Text.
<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu</marquee>
Maka hasil dari isyarat HTML diatasa akan nampak menyerupai ini.
Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga sanggup mengganti warna dari Teks diatas, supaya kontras dengan backgroundnya.
Cara Mengganti Warna Tulisan Berjalan
Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih supaya teks tersebut gampang untuk terbaca.
Kode yang kita pakai ialah menyerupai ini :
<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih</marquee>
Dan Hasilnya akan nampak menyerupai dibawah ini :
Cara Membuat Tulisan Berjalan Setengah Layar
Selain mengganti warna dan juga background kita juga sanggup menciptakan Tulisan Berjalan tersebut hanya tampil dari tengah, tidak full dari kanan ke kiri.
Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya kalau lebar selector Div hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).
Contoh penerapan dalam isyarat HTML :
<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>
Kode HTML diatas akan menciptakan goresan pena 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya menyerupai pola dibawah ini :
Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.
Diatas kita hanya memakai HTML dan CSS bukan, nah kini kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.
Cara Membuat Tulisan Berjalan Dengan Jeda
Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita sanggup menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan isyarat berikut.
<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>
500 disini maksudnya ialah 0,5 Detik bukan 500 Detik. Kaprikornus isyarat diatas kalau dijalankan akan menciptakan Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.
Contohnya menyerupai dibawah ini :
Cara Mengatur Kecepatan Tulisan Berjalan
Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun kalau Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda sanggup dengan gampang mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"
Contoh penerapan dalam HTML :
<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10</marquee>
Dan isyarat tersebut akan menghasilkan pengaruh menyerupai ini :
Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang terang kalau Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.
Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan
Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan ialah mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).
Kode HTML embel-embel yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.
Contoh penggabungan :
<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>
Dan alhasil akan menjadi menyerupai ini :
Cara Membuat Tulisan Berjalan Memantul
Agar Tulisan Berjalan tersebut sanggup memantul, kita cukup menambahkan behavior="alternate".
Contoh penambahan ke dalam HTML :
<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>
Hasilnya sesudah kita terapkan :
Cara Membuat Tulisan Berjalan Dari Bawah ke Atas
Sebenarnya isyarat untuk menciptakan Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"
Contoh penerspan :
<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>
Dan Hasilnya :
Kata "up" juga sanggup Anda ganti dengan down (untuk memberi pengaruh goresan pena berjalan dari atas ke bawah).
Cara Membuat Tulisan Berjalan Berhenti Ketika Disentuh Oleh Kursor Mouse
Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada isyarat JavaScript (JS) untuk memecahkan persoalan tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" isyarat JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.
Contoh Penggabungan JavaScript diatas dengan isyarat HTML Marquee :
<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>
Dan hasil dari kerja sama JavaScript dan HTML diatas ialah menyerupai dibawah ini :
| Cara Memasang Kode Marquee di Dalam Artikel | Cara Memasang Kode Marquee di Dalam Widget |
|---|---|
| 1. Masuk ke dalam Text Editor, kemudian pilih Mode HTML 2. Copy dan Paste isyarat Marquee Anda disini 3. Beralihlah ke Mode Compose (jika berhasil text 4. akan berjalan) 4. Untuk memastikan isyarat berjalan tepat klik pada Pratinjau | 1. Masuk ke dalam hidangan Tata Letak kemudian Klik Tambahkan Gadget 2. Pilih opsi HTML/JavaScript 3. Copy dan Paste isyarat Marquee pada textare yang sudah disediakan 4. Klik Simpan dan silahkan dilihat hasilnya |
Sebenarnya masih banyak variasi-variasi yang sanggup kita lakukan dengan <marquee> ini. Kalau sempat nanti niscaya artikel cara menciptakan goresan pena berjalan ini nantinya akan saya Update, jadi jangan sungkan-sungkan untuk membookmark halaman ini untuk mendapat update.an terbaru perihal cara menciptakan goresan pena berjalan, hhe.
Akhir kata saya ucapkan terimaksih banyak telah bersedia membaca artikel cara menciptakan goresan pena berjalan ini.
Komentar
Posting Komentar