Cara Membuat Tulisan Berjalan dengan berbagai model

Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Cara membuat tulisan berjalan | Cara membuat tulisan bergerak | Cara membuat tulisan berjalan di blog | Cara membuat tulisan berjalan pada blog | cara membuat widget berjalan dan bergerak
Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>http://celah-ilmu.blogspot.com</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

http://celah-ilmu.blogspot.com


Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan
Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">http://celah-ilmu.blogspot.com</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="3">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="4">http://celah-ilmu.blogspot.com</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan
Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">http://celah-ilmu.blogspot.com</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :


<marquee scrollamount="2" direction="right">http://celah-ilmu.blogspot.com</marquee>

<marquee scrollamount="2" direction="up">http://celah-ilmu.blogspot.com</marquee>

<marquee scrollamount="2" direction="down">http://celah-ilmu.blogspot.com</marquee> 

hasilnya :

http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik
Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versi celah-ilmu. Kode yang di gunakan :

<marquee behavior="alternate">http://celah-ilmu.blogspot.com</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">http://celah-ilmu.blogspot.com dan Celah-ilmu</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com dan Celah-ilmu

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background
Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">http://celah-ilmu.blogspot.com</marquee>

Hasilnya seperti ini :

http://celah-ilmu.blogspot.com

#FDEAE8 adalah kode warna background

6. Mengatur Lebar dan Tinggi Jarak Gerakan.
Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="350px" height="270px">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="2" direction="down" width="270px" height="350px">http://celah-ilmu.blogspot.com</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contoh nomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.


Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotak komentar di bawah artikel ini.
Semoga bermanfaat......

Tidak ada komentar: