Cara Membuat Tulisan Berjalan / Running Text Di Blog
Saya yakin hampir semua dari kita pernah melihat goresan pena berjalan / running text. Biasanya media menyerupai televisi menggunakannya untuk memperlihatkan suatu isu tertentu.
Nah, di sini saya akan membahas perihal bagaimana cara membuat goresan pena berjalan di blog menggunakan instruksi html
Dengan instruksi html tersebut kita tidak hanya dapat membuat running text saja. Bahkan kita juga dapat membuat gambar berjalan.
Kita dapat membuat goresan pena tertentu berjalan dari kiri ke kanan, bawah ke atas, dan sebagainya menggunakan instruksi <marquee>.
Di sini saya akan menuliskan tutorial bagaimana cara membuat goresan pena / gambar berjalan di blogger.
Walaupun demikian, sebetulnya instruksi <marquee> tidak hanya dapat digunakan pada blogger saja ya.
Anggap saja tutorial yang saya tuliskan ini sebagai gambaran bila ingin menggunakannya di platform lain.
Oke, mari kita mulai....
Mana instruksi yang akan membuat goresan pena berjalannya mas?...
Sabar.... Nanti sahabat akan menemukannya di bawah.
Selain 2 cara di atas, kita juga dapat menyisipkan goresan pena berjalan pribadi pada template yang digunakan bila mau.
Oke... mari kita lanjut ke pembuatan kode.
Sebenarnya untuk membuat goresan pena berjalan kita hanya memerlukan 1 tag html, yaitu
Misalnya kita ingin membuat teks "
Maka kita dapat menulis teks tersebut terlebih dahulu gres mengurungnya dengan instruksi
Atau menulis instruksi
Hasil instruksi seharusnya jadi menyerupai ini
Itu instruksi yang paling sederhana yang secara default akan menampilkan goresan pena berjalan dari kanan ke kiri.
Kita dapat membuatnya berjalan dari kiri ke kanan dengan menambahkan sedikit atribut
Kita juga dapat membuat teks bergerak dari atas ke bawah atau sebaliknya.
Membuat teks bergerak dari bawah ke atas
Kode
Membuat teks bergerak dari atas ke bawah
Kode
Secara default instruksi <marquee> sudah memiliki nilai scrollamount 6 atau sama dengan
Apabila angka yang kita gunakan di bawah dari angka 6, maka goresan pena berjalan akan lebih lambat. Sebaliknya, kalau yang kita gunakan di atas dari 6, maka teks akan semakin cepat.
Cara penulisan menyerupai ini
Kalau dari kiri ke kanan menyerupai ini kodenya
Kalau ingin membuatnya bergerak dari bawah ke atas atau sebaliknya silakan ganti
Silakan tambahkan atribut lainnya menyerupai untuk mempercepat / lambat teks, membuatnya berjalan dari kiri, atas, atau bawah.
Maka kalau ditulis jadi menyerupai ini
Caranya sebetulnya sama saja dengan membuat goresan pena berjalan, bedanya cuma teks diganti dengan gambar.
Penulisan instruksi menyerupai ini
Kalau mau beberapa gambar juga bisa, menyerupai ini
Misalnya kita ingin objek yang jalan hilang setelah 3 kali lewat.
Maka kita dapat menulisnya menyerupai ini
Pada gambar penulisannya juga sama kok, cuma teks saja diganti dengan gambar, menyerupai ini :
Semoga bermanfaat.
Nah, di sini saya akan membahas perihal bagaimana cara membuat goresan pena berjalan di blog menggunakan instruksi html
<marquee>.Dengan instruksi html tersebut kita tidak hanya dapat membuat running text saja. Bahkan kita juga dapat membuat gambar berjalan.
Kita dapat membuat goresan pena tertentu berjalan dari kiri ke kanan, bawah ke atas, dan sebagainya menggunakan instruksi <marquee>.
Cara Membuat Tulisan Berjalan Di Blogger
Walaupun demikian, sebetulnya instruksi <marquee> tidak hanya dapat digunakan pada blogger saja ya.
Anggap saja tutorial yang saya tuliskan ini sebagai gambaran bila ingin menggunakannya di platform lain.
Oke, mari kita mulai....
Membuat Tulisan Berjalan Di Posting / Laman Blogger
Berikut langkah - langkah yang harus dilakukan :- Masuk ke dasbor blogger.
- Buat posting / laman baru.
- Tulis isi menyerupai biasanya hingga selesai.
- Ganti mode penulisan dari Compose menjadi HTML (gambar ada di bawah).
- Pasang instruksi html goresan pena berjalan pada posisi yang sahabat mau.
- Untuk meyakinkan apakah goresan pena sudah berjalan sesuai harapan silakan pratinjau dahulu.
- Kalau sudah berjalan dan posisinya sudah pas, silakan terbitkan.
- Selesai.
Sabar.... Nanti sahabat akan menemukannya di bawah.
Memasang Tulisan Berjalan Di Sidebar / Gadget
Kita juga dapat memasangnya pada gadget blogger. Berikut langkah-langkahnya :- Masuk ke blogger.
- Buka halaman Tata Letak.
- Klik Tambahkan Gadget Baru.
- Pilih gadget HTML/JavaScript.
- Masukkan goresan pena berjalan pada bab konten.
- Pastikan sahabat melihat goresan pena Rich Text (gambar ada di bawah)
- Simpan .... Selesai.
Oke... mari kita lanjut ke pembuatan kode.
Sebenarnya untuk membuat goresan pena berjalan kita hanya memerlukan 1 tag html, yaitu
<marquee> (pembuka) dan </marquee> (penutup).Misalnya kita ingin membuat teks "
Salamat Datang Di Blog Saya" menjadi berjalan.Maka kita dapat menulis teks tersebut terlebih dahulu gres mengurungnya dengan instruksi
<marquee> dan </marquee>.Atau menulis instruksi
<marquee> dan </marquee> dahulu gres menyisipkan teks di antara keduanya.Hasil instruksi seharusnya jadi menyerupai ini
<marquee>Salamat Datang Di Blog Saya</marquee> Itu instruksi yang paling sederhana yang secara default akan menampilkan goresan pena berjalan dari kanan ke kiri.
Kita dapat membuatnya berjalan dari kiri ke kanan dengan menambahkan sedikit atribut
direction="right" pada tag pembuka menyerupai ini <marquee direction="right">Salamat Datang Di Blog Saya</marquee> Kita juga dapat membuat teks bergerak dari atas ke bawah atau sebaliknya.
Membuat teks bergerak dari bawah ke atas
Kode
<marquee direction="up">Salamat Datang Di Blog Saya</marquee> Membuat teks bergerak dari atas ke bawah
Kode
<marquee direction="down">Salamat Datang Di Blog Saya</marquee> Apakah kecepatan teks berjalan dapat di atur?....
Bisa sob.... Yaitu dengan cara menambahkan atributscrollamount="nilai". Yang mana nilai dapat kita tulis dengan angka 1, 2, 3, dst...Secara default instruksi <marquee> sudah memiliki nilai scrollamount 6 atau sama dengan
scrollamount="6". Makara kita harus menggunakan angka 6 ke bawah atau ke atas.Apabila angka yang kita gunakan di bawah dari angka 6, maka goresan pena berjalan akan lebih lambat. Sebaliknya, kalau yang kita gunakan di atas dari 6, maka teks akan semakin cepat.
Cara penulisan menyerupai ini
<marquee scrollamount="9">Contoh Tulisan Berjalan</marquee> <marquee>Contoh Tulisan Berjalan</marquee> <marquee scrollamount="6">Contoh Tulisan Berjalan</marquee> <marquee scrollamount="3">Contoh Tulisan Berjalan</marquee> Kalau dari kiri ke kanan menyerupai ini kodenya
<marquee scrollamount="8" direction="right">Contoh Tulisan Berjalan</marquee> <marquee direction="right">Contoh Tulisan Berjalan</marquee> <marquee direction="right" scrollamount="2">Contoh Tulisan Berjalan</marquee> Kalau ingin membuatnya bergerak dari bawah ke atas atau sebaliknya silakan ganti
direction="right" jadi direction="up" atau direction="down".Membuat Tulisan Bergerak Bolak Balik
Untuk membuat teks berjalan tersebut jadi bolak balik / memantul / mondar mandir. Maka kita harus menambahkan atributbehavior="alternate" pada tag pembuka, menyerupai ini : <marquee behavior="alternate">Salamat Datang Di Blog Saya</marquee> Silakan tambahkan atribut lainnya menyerupai untuk mempercepat / lambat teks, membuatnya berjalan dari kiri, atas, atau bawah.
Membuat teks bergerak diagonal / zig zag
Kode yang digunakan <marquee direction="up" align="center" behavior="alternate"><marquee direction="right" behavior="alternate">Salamat Datang Di Blog Saya</marquee></marquee></marquee></marquee> Tulisan Berjalan Secara Berlawanan
Kode yang digunakan <marquee width="50%"><< Salamat Datang Di Blog Saya</marquee><marquee direction="right" width="50%">Salamat Datang Di Blog Saya >></marquee> Membuatnya berhenti berjalan saat kursor di arahkan ke teks berjalan
Untuk membuatnya berhenti saat kursor di arahkan ke tulisan, kita cukup menambahkan instruksionmouseover="this.stop()" onmouseout="this.start()" pada tag pembuka.Maka kalau ditulis jadi menyerupai ini
<marquee onmouseover="this.stop()" onmouseout="this.start()">Salamat Datang Di Blog Saya</marquee> Cara Memberi Warna Pada Teks Berjalan
Kita juga dapat mewarnai goresan pena berjalan tersebut dengan menambahkan style menyerupai ini <marquee style="background:#FF0000;color:#FFFFFF">Salamat Datang Di Blog Saya</marquee> background:#FF0000yaitu yang membuat latar menjadi merahcolor:#FFFFFFyang membuat goresan pena menjadi putih
Membuat Gambar Berjalan Menggunakan Kode Marquee
Selain teks, kita juga dapat menggunakan<marquee> untuk membuat gambar berjalan.Caranya sebetulnya sama saja dengan membuat goresan pena berjalan, bedanya cuma teks diganti dengan gambar.
Penulisan instruksi menyerupai ini
<marquee>Tulis instruksi gambar di sini</marquee> <marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggBph5FAspnFq_YJ0nH8b3Xuf6obniLJz76Bv8sAiC3tjuXJel96FWTNkXe6AkjsCcEOCrnpavCP5EmkqDQvHTUmwm9QcgGsPLJf7J3FnUnhBcVrYHHZ3G__3_4bSSg9jMRcG0y7522uyD/s1600/img1.png"/></marquee> Kalau mau beberapa gambar juga bisa, menyerupai ini
<marquee> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggBph5FAspnFq_YJ0nH8b3Xuf6obniLJz76Bv8sAiC3tjuXJel96FWTNkXe6AkjsCcEOCrnpavCP5EmkqDQvHTUmwm9QcgGsPLJf7J3FnUnhBcVrYHHZ3G__3_4bSSg9jMRcG0y7522uyD/s1600/img1.png"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBu5zctMr0398uOu_5A74WNXaIDDmx6g4eh_-AByJA3y_jyQhH3zzvgbO0y_xUGpNk8z2KJZLA0OvxBVshGuZlsLcGc1lEQHtZWI2vv2D8fUaQSLjx8WY6vx2_Nq3xGdT6I87Nxv3xiZC/s1600/img2.png"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBu5zctMr0398uOu_5A74WNXaIDDmx6g4eh_-AByJA3y_jyQhH3zzvgbO0y_xUGpNk8z2KJZLA0OvxBVshGuZlsLcGc1lEQHtZWI2vv2D8fUaQSLjx8WY6vx2_Nq3xGdT6I87Nxv3xiZC/s1600/img2.png"/> </marquee> Membuat objek berjalan hilang setelah beberapa kali lewat
Kita juga dapat membuat objek (teks / gambar) menghilang setelah beberapa kali jalan menggunakan atributloop="nilai". Bagian nilai tinggal diganti dengan angka yang kita mau.Misalnya kita ingin objek yang jalan hilang setelah 3 kali lewat.
Maka kita dapat menulisnya menyerupai ini
<marquee loop="3">Salamat Datang Di Blog Saya</marquee> Pada gambar penulisannya juga sama kok, cuma teks saja diganti dengan gambar, menyerupai ini :
<marquee loop="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggBph5FAspnFq_YJ0nH8b3Xuf6obniLJz76Bv8sAiC3tjuXJel96FWTNkXe6AkjsCcEOCrnpavCP5EmkqDQvHTUmwm9QcgGsPLJf7J3FnUnhBcVrYHHZ3G__3_4bSSg9jMRcG0y7522uyD/s1600/img1.png"/></marquee> Semoga bermanfaat.
Komentar
Posting Komentar