Membuat Tulisan dan Gambar Bergerak di Blog

Mungkin dengan anda membuka dan membaca buku tentang belajar HTML anda bisa banyak menguasai berbagai aturan penulisan dalam pembuatan Web, mempercantik Web dan sebagainya. Tapi untuk belajar sedikit demi sedikit bahasa HTML, saya rasa dengan Googling, jauh lebih efisien dan bahkan Gratis. ^_^

Nah, diposting kali ini saya akan meberikan tips Blogging untuk membuat tulisan bergerak pada Blog Efek Marque.

Dasar tag Marquee ini bisa di buat dengan menggunakan tag <marquee> . . . </marquee>

Atribut yang sering di gunakan adalah :

bgcolor="warna" { untuk mengatur warna background (latar belakang) teks }
direction="left / right / up / down" { mengatur arah gerakan teks }
behavior="scroll / slide / alternate" { untuk mengatur perilaku gerakan }
scroll { teks bergerak berputar }
slide { teks bergerak sekali lalu berhenti }
alternate { teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo) }
title="pesan" { pesan akan muncul saat mouse berada di atas teks }
scrollmount="angka" { mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya }
scrolldelay="angka" { untuk mengatur waktu tunda gerakan dalam mili detik }
loop="angka|-1|infinite" { mengatur jumlah loop }
width="lebar" { mengatur lebar blok teks dalam pixel atau persen }

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="right" height="50" scrollamount="2" width="30%">
Billix Multimedia v.2
</marquee>

Hasilnya akan seperti ini :


Billix Multimedia v.2


Ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down.

Contoh marquee dari perilaku gerakan :

<marquee align="center" direction="left" height="50" scrollamount="3" width="70%" behavior="alternate">

Billix Multimedia v.2

</marquee>

Hasilnya akan seperti ini :


Billix Multimedia v.2


Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="50" align="center">

Silahkan tunjuk ke sini!

</marquee>

Hasilnya :


Silahkan tunjuk ke sini!


Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://billix-multimeida.blogspot.com/" target="_blank">Home</a><br />

<a href="http://billix-multimedia.blogspot.com/p/about-me.html" target="_blank">About</a><br />

<a href="http://www.facebook.com/billix.multimedia" target="_blank">Facebook Saya</a><br />

</marquee>

Hasilnya :


Home

About

Facebook Saya





Yang terakhir efek marquee pada gambar, contoh kodenya seperti berikut :

<marquee align="center" direction="left" height="100" scrollamount="3" width="100%" behavior="alternate">

<div class="separator" style="clear: both; text-align: center;">

<a href="http://billix-multimedia.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEvN0GsJ6mWmyhkHHdPirRWL_F_wm1_QDLap1nWvdPVk7RMReoj2_nOQ6pZljPSbxs20txJJLQ0eBOdzhjYqyl0P6CDwzz5SLuWDYLvApL1vO-kIRe5z-T2pf2FlTYnQEuNy7yRIAiVM/s1600/BM+v.2+Mini+Banner.png" border="0" alt="Billix-Multimedia"></a></div>

</marquee>

Hasilnya akan seperti ini :

Mungkin itu saja dulu beberapa contoh yang bisa saya berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat bereksperimen.

---

Jika Merasa Arikel dan Bacaan di Billix Multimedia v.2 Bermanfaat,

Jangan Lupa Share ke Teman-teman melalui Tombol Share di bawah posting ini

Like on Billix Multimedia v.2 Facebook . Follow atau Berlangganan Via Email.

Terimakasih

---

Yang Copas, Jangan Lupa Mencantumkan Sumbernya Yah!

http://billix-multimedia.blogspot.com/

---

---

Post Category : Blogging Tips , eLearning , Modul Kuliah TI , Tips Trik

Share Yuk!