Cara Membuat Efek Tulisan Berjalan di Dalam Postingan Blog - Ingin menampilkan sesuatu yang keren didalam postingan blog. Sesuatu yang bisa menarik perhatian pengunjung. Salah satu caranya adalah dengan Membuat Text berjalan/bergerak. Tentu dengan adanya text berjalan akan membuat pengunjung memperhatikan isi text tersebut. Anda bisa mengisi kata-kata penting bisa berupa perintah,anjuran,sapaan,ajakan,dsb.
Efek tulisan ini yaitu berupa efek ketika. Text akan muncul seperti diketik secara langsung. Diketik dan muncul dari kiri ke kanan. Anda bisa menambahkan kata sebanyak yang anda inginkan. Agar pengunjung lebih bisa melihat silakan anda letakkan ditempat yang mudah dilihat pengunjung. Anda bisa meletakkannya didalam postingan,disidebar/di header.
Di sini saya akan menuliskan tutorial bagaimana Cara Membuat Efek Tulisan Berjalan di Dalam Postingan Blog. Walaupun demikian, sebenarnya kode <marquee> tidak hanya dapat digunakan pada blogger saja ya.
Anggap saja tutorial yang saya tuliskan ini sebagai gambaran jika 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 seperti biasanya sampai selesai.
- Ganti mode penulisan dari Compose menjadi HTML (gambar ada di bawah).
- Pasang kode html tulisan berjalan pada posisi yang sobat mau.
- Untuk meyakinkan apakah tulisan sudah berjalan sesuai keinginan silakan pratinjau dahulu.
- Kalau sudah berjalan dan posisinya sudah pas, silakan terbitkan.
- Selesai.
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 tulisan berjalan pada bagian konten.
- Pastikan sobat melihat tulisan Rich Text (gambar ada di bawah)
- Simpan .... Selesai.
Selain 2 cara di atas, kita juga dapat menyisipkan tulisan berjalan langsung pada template yang digunakan jika mau.
Oke... mari kita lanjut ke pembuatan kode.
Sebenarnya untuk membuat tulisan berjalan kita hanya memerlukan 1 tag html, yaitu <marquee> (pembuka) dan </marquee> (penutup).
Misalnya kita ingin membuat teks "Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_" menjadi berjalan.
Maka kita dapat menulis teks tersebut terlebih dahulu baru mengurungnya dengan kode <marquee> dan </marquee>.
Atau menulis kode <marquee> dan </marquee> dahulu baru menyisipkan teks di antara keduanya.
Hasil kode seharusnya jadi seperti ini
<marquee>Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Dan hasil di blog akan terlihat seperti ini
Itu kode yang paling sederhana yang secara default akan menampilkan tulisan berjalan dari kanan ke kiri.
Kita dapat membuatnya berjalan dari kiri ke kanan dengan menambahkan sedikit atribut direction="right"pada tag pembuka seperti ini
<marquee direction="right">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Maka hasilnya akan menjadi seperti ini
Kita juga dapat membuat teks bergerak dari atas ke bawah atau sebaliknya.
Membuat teks bergerak dari bawah ke atas
Kode
<marquee direction="up">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasil
Membuat teks bergerak dari atas ke bawah
Kode
<marquee direction="down">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasil
Apakah kecepatan teks berjalan dapat di atur?....
Bisa sob.... Yaitu dengan cara menambahkan atribut scrollamount="nilai". Yang mana nilai dapat kita tulis dengan angka 1, 2, 3, dst...
Secara default kode <marquee> sudah memiliki nilai scrollamount 6 atau sama dengan scrollamount="6". Jadi kita harus menggunakan angka 6 ke bawah atau ke atas.
Apabila angka yang kita gunakan di bawah dari angka 6, maka tulisan berjalan akan lebih lambat. Sebaliknya, kalau yang kita gunakan di atas dari 6, maka teks akan semakin cepat.
Cara penulisan seperti 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>
Hasil
Kalau dari kiri ke kanan seperti 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>
Hasil
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 atribut behavior="alternate" pada tag pembuka, seperti ini :
<marquee behavior="alternate">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasil
Silakan tambahkan atribut lainnya seperti 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">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee></marquee></marquee></marquee>
Hasil
Tulisan Berjalan Secara Berlawanan
Kode yang digunakan
<marquee width="50%"><< Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee><marquee direction="right" width="50%">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_ >></marquee>
Hasil
Membuatnya berhenti berjalan ketika kursor di arahkan ke teks berjalan
Untuk membuatnya berhenti ketika kursor di arahkan ke tulisan, kita cukup menambahkan kode onmouseover="this.stop()" onmouseout="this.start()" pada tag pembuka.
Maka kalau ditulis jadi seperti ini
<marquee onmouseover="this.stop()" onmouseout="this.start()">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasil
Cara Memberi Warna Pada Teks Berjalan
Kita juga dapat mewarnai tulisan berjalan tersebut dengan menambahkan style seperti ini
<marquee style="background:#FF0000;color:#FFFFFF">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasil
background:#FF0000 adalah yang membuat latar menjadi merah
color:#FFFFFF yang membuat tulisan menjadi putih
Untuk mengubah warna silakan ganti kode warna #FF0000 dan #FFFFFF dengan warna lainnya.
Membuat Gambar Berjalan Menggunakan Kode Marquee
Selain teks, kita juga dapat menggunakan <marquee> untuk membuat gambar berjalan.
Caranya sebenarnya sama saja dengan membuat tulisan berjalan, bedanya cuma teks diganti dengan gambar.
Penulisan kode seperti ini
<marquee>Tulis kode gambar di sini</marquee>
Contoh nyata :
<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iAb6dgaQhgOZ7qQJ5Ob4LrQETYclfpKGPikLON9PPClW83_AdUt9TzZDmUc0Mnu9H2XFq8lv-8Cnh_bLa3Osl0RgES3Cv1L1pxf-ivBUatUafys5yz20NzIDI2AWbuuZ9idlF3RiGZb0/s1600/img1.png"/></marquee>
Hasil
Kalau mau beberapa gambar juga bisa, seperti ini
<marquee> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iAb6dgaQhgOZ7qQJ5Ob4LrQETYclfpKGPikLON9PPClW83_AdUt9TzZDmUc0Mnu9H2XFq8lv-8Cnh_bLa3Osl0RgES3Cv1L1pxf-ivBUatUafys5yz20NzIDI2AWbuuZ9idlF3RiGZb0/s1600/img1.png"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6fbTzoE1t7QF5WQC6C_3iuU1BngcsXHdeiZaRxzQr8FQ34F-E6z6tQRg5yNE6NGQ22L40kebkNpyX_LiSc0waXFamd308Qu2MQmD2wOXTZ6Ah3a0bBlYWB8NfiFJPNgkJ2KwBHYPLKfn/s1600/img2.png"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6fbTzoE1t7QF5WQC6C_3iuU1BngcsXHdeiZaRxzQr8FQ34F-E6z6tQRg5yNE6NGQ22L40kebkNpyX_LiSc0waXFamd308Qu2MQmD2wOXTZ6Ah3a0bBlYWB8NfiFJPNgkJ2KwBHYPLKfn/s1600/img2.png"/> </marquee>
Hasil
Membuat objek berjalan hilang setelah beberapa kali lewat
Kita juga dapat membuat objek (teks / gambar) menghilang setelah beberapa kali jalan menggunakan atribut loop="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 seperti ini
<marquee loop="3">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>
Hasilnya seperti ini
Pada gambar penulisannya juga sama kok, cuma teks saja diganti dengan gambar, seperti ini :
<marquee loop="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iAb6dgaQhgOZ7qQJ5Ob4LrQETYclfpKGPikLON9PPClW83_AdUt9TzZDmUc0Mnu9H2XFq8lv-8Cnh_bLa3Osl0RgES3Cv1L1pxf-ivBUatUafys5yz20NzIDI2AWbuuZ9idlF3RiGZb0/s1600/img1.png"/></marquee>
NOTE : Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_ sesuai keinginan kalian.
Tinggal simpan untuk widget dan publikasikan untuk postingan. Ok jika sudah beres cukup sekian artikel yang bisa saya bagikan kepada kalian semua. Semoga bisa membantu dan bermanfaat....
Terima Kasih atas kunjungannya....
Regards,
Mr Ivanchan
Fanspage Facebook
Share This :
Nice...
BalasHapusThank
HapusMantap
BalasHapusMakasih kak kunjungannya
Hapus