Cara Membuat Tulisan Berjalan (Marquee) Di Blog Banyak Variasi
Perlu anda ketahui bahwa kode dasar Marquee adalah..
Kode diatas menjadi seperti ini
TEKS YANG BERGERAK
Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..
Cara pemasangan kode Marquee pada artikel
- Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
- Silahkan masukkan kode Marquee di mode HTML
- Cek posisi teks di mode Compose
- Untuk melihat apakah kode berjalan, silahkan klik Pratinjau.
- Login ke akun blogger anda
- Masuk ke menu Tata Letak, Klik tambahkan gadget
- Silahkan pilih HTML/Java Script
- Masukkan kode Marquee yang anda pilih
- Silahkan klik Simpan
- Kemudian silahkan cek apakah kode sudah bekerja.
Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#800C0C;"
- Arial adalah jenis huruf
- 20px adalah ukuran huruf
- #f2f2f2 adalah warna huruf
Contoh kode nya seperti ini..
font-size:20px; color:#800C0C;">CONTOH BACKGROUND AREA TEKS
Hasilnya akan terlihat seperti ini..
CONTOH BACKGROUND AREA TEKS
Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya..
Kode Marquee untuk mengatur pengulangan Rotasi
kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.Contoh kodenya seperti ini:
Hasilnya akan terlihat seperti ini..
TEKS BEROTASI 6 KALI
Kode Marquee untuk mengatur lebar teks
Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.Contoh kodenya seperti ini:
Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.
Hasilnya akan terlihat seperti ini
LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG
Kode Marquee untuk memberi link pada teks
Kode dasar seperti ini..onmouseover="this.stop()" onmouseout="this.start()"
Contoh kodenya seperti ini:
Hasilnya akan terlihat seperti ini..
CARA MEMBUAT TULISAN BERJALAN
Kode Marquee untuk mengatur background pada jalur teks
Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.Contoh kodenya seperti ini:
Keterangan: pink bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain.
Hasilnya akan terlihat seperti ini
CONTOH BACKGROUND AREA TEKS
Kode Marquee untuk mengatur kecepatan jeda
Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.Contoh kodenya seperti ini:
Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..
Hasilnya akan terlihat seperti ini..
TEKS BERJALAN DALAM JEDA 0,75 DETIK
Kode Marquee untuk memberi Alt Title pada area teks berjalan
Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.Contoh kodenya seperti ini:
">TEKS YANG BERJALAN DENGAN PESAN
Hasilnya seperti ini..
TEKS YANG BERJALAN DENGAN PESAN
Kode Marquee untuk mengatur kecepatan teks berjalan
Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.Contoh kodenya seperti ini:
Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.
Hasilnya akan terlihat seperti ini..
KECEPATAN TEKS YANG BERJALAN 12
Kode Marquee untuk mengatur arah teks bergerak
Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.Contoh kode nya seperti ini:
Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.
Hasilnya akan terlihat seperti ini..
TEKS AKAN BERGERAK KE KIRI
Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse
Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalahonmouseover="this.stop()" onmouseout="this.start()"
Contoh kodenya seperti ini:
Hasilnya akan terlihat seperti ini..
TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE
Berikut beberapa tambahan efek marquee pada sebuah teks tidaklah sulit karena kode HTML yang digunakan sangat sederhana yaitu "". Berikut ini kode marquee beserta contohnya:
Demo Marquee
Teks berjalan ke kiri
Selamat datang di tutorialblogspot.com
Teks Berjalan ke kanan
Happy blogging for all of Indonesians blogger
Teks berjalan ke atas
This is the best site to learn about blog
Teks berjalan ke bawah
Cara membuat teks bergerak di blog
Teks berjalan bolak balik (Ke kiri dan ke kanan)
Dapatkan tips trik komputer disini
Teks berjalan Zig-Zag
Teks Tulisan Berjalan Zig Zag
Kode Marquee
1. Teks berjalan ke kiri
2. Teks Berjalan ke kanan
3. Teks berjalan ke atas
4. Teks berjalan ke bawah
5. Teks berjalan bolak balik (Ke kiri dan ke kanan)
6. Teks berjalan Zig-Zag
Apakah kode marquee di atas bisa kita kostumisasi? Jelas bisa, kode HTML marquee di atas dapat disesuaikan dengan style atau keinginan sobat blogger. Perhatikan contoh di bawah ini!
1. Teks berhenti ketika diarahkan Cursor
Kode : onMouseOver="this.stop()" onMouseOut="this.start()"> Teks disini... 2. Menambahkan Background pada teks berjalan
Contoh penerapan kode :onMouseOver="this.stop()" onMouseOut="this.start()"
Kode : bgcolor="blue" (Blue adalah kode warna, bisa diganti dengan warna favorite sobat)> Teks disini... 3. Mengatur kecepatan teks berjalan
Contoh penerapan kode :bgcolor="Blue"
Kode : scrollamount="2" (Angka 2 adalah kecepatan teks berjalan, silahkan disesuaikan)> Teks disini... 4. Mengatur lebar teks berjalan
Contoh penerapan kode :scrollamount="2"
Kode : width="300" (Atur sendiri lebarnya. Kalau sobat blogger ingin mengatur tingginya juga, sobat blogger tinggal mengganti kata width menjadi hight)> Teks disini... Teks marquee atau teks berjalan bisa juga diterapkan pada widget. Sobat cukup meletakkan kode widget DIANTARA kode marquee. Contoh:
Contoh penerapan kode :width="300"
0 komentar:
Post a Comment