INFORMASI SEPUTAR BLOG

Cara Membuat Variasi Marquee Di Blog

Label:
Marquee adalah suatu bentuk animasi berupa teks atau image yang bergerak atau berjalan dengan arah dan posisi tertentu. Marquee terbentuk dari beberapa kode html yang sederhana. Dengan menambahkan marquee di blog/website Anda akan semakin membuat blog/website Anda tampak menarik dan interaktif. Mungkin Anda pernah menemukan blog/website yang menerapkan animasi marquee. Sangat menarik bukan… ?.

Tanpa basa-basi langsung saja dalam tips blogger kali ini kita akan belajar Membuat Variasi Marquee Di Blog. Efek marquee sangat bervariasi, Anda dapat memilihnya sesuai selera dan keinginan Anda.
Kode dasar HTML dalam pembuatan marquee adalah <marquee> ... </marquee>

Melalui kode HTML tersebut dapat dbuat berbagai macam variasi marquee, berikut diantaranya :

1. Marquee Teks Bergerak Dari Kiri ke Kanan Atau Sebaliknya

<marquee direction="left"&gt;Teks Marquee Bergerak Dari Kanan Ke Kiri</marquee>

Teks Marquee Bergerak Dari Kanan Ke Kiri

<marquee direction="right"&gt; Teks Marquee Bergerak Dari Kiri Ke Kanan</marquee>


Teks Marquee Bergerak Dari Kiri Ke Kanan


NOTE : "direction" merupakan kode yang berguna untuk menentukan arah gerakan teks atau image. Anda dapat mengisinya dengan variasi seperti left, right, up, dan down.

2. Marquee Teks Bergerak Dari Bawah ke Atas Atau Sebaliknya

<marquee direction="up" width="50%" height="50">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas yang dibatasi area tertentu

NOTE : Untuk mengubah gerakan menjadi dari atas ke bawah ganti kode direction="up" dengan kode direction="down" . Sedangkan atribut "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks/image, atributnya bernilai angka atau prosentase (%).

3. Marquee Teks Bergerak Dengan Kecepatan Tertentu

Untuk mengatur kecepatan marquee digunakan atribut :
"scrolldelay" : untuk mengatur waktu berhenti/tunda dari gerakan marquee teks
"scrollmount" : untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakanya

<marquee scrolldelay="3000" direction="down" scrollmount="2" width="75%" bgcolor="#33ccff" height="50">Teks bergerak ke bawah dgn waktu tunda 3 detik, berkecepatan tertentu yang lebar dan tinggi area tertentu </marquee>

Teks bergerak ke bawah dgn waktu tunda 3 detik, berkecepatan tertentu yang lebar dan tinggi area tertentu

Contoh : Teks bergerak ke bawah dengan waktu tunda 3 detik, berkecepatan tertentu dengan lebar dan tinggi area tertentu

4. Marquee Teks Dengan Penambahan Warna Background Tertentu

<marquee scrollmount="2" bgcolor="#33ccff">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

NB : "bgcolor" berfungsi untuk memberikan warna latar/background teks, atributnya adalah kode warna HTML. Ganti kode #33ccff dengan kode warna yang Anda inginkan.


5. Marquee Teks Bergerak Dengan Arah Bolak-Balik

<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

NOTE : "behavior" berfungsi untuk mengatur pola gerakan teks dengan atribut yang seperti scroll (gerakan ke kiri), slide (sekali bergerak lalu berhenti), dan alternate (bergerak bolak-balik).

6. Marquee Teks Dengan Jenis dan Ukuran Font Tertentu

<span style="color: rgb(0, 0, 255);" ><marquee direction="down" behavior="alternate" scrollamount="10" width="50&amp;" bgcolor="#f2f5a9" height="100">Teks arial warna biru</marquee></span>

Teks arial warna biru

NOTE : Tambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di atas. “font-family:arial” untuk menentukan jenis font serta kode “color:#0000ff” ” untuk menentukan warna font.

7. Marquee Teks Dengan Variasi Gerakan Mouse

Yaitu apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali setelah mouse dipindahkan ke luar area. Berikut kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="left" width="75%" bgcolor="#000000" height="100">
<a href="http://supardipunya.blogspot.com/2009/09/mendulang-dollar-dari-google-adsense.html">Mendulang Dollar dari Google AdSense</a>

<a href="http://supardipunya.blogspot.com/2009/09/bisnis-online-affiliasi-mudah-dan.html">Bisnis Online Affiliasi Mudah dan Menghasilkan</a>

<a href="http://supardipunya.blogspot.com/2009/07/cara-daftar-paypal-gratiss.html">Cara Daftar PayPal</a>

<a href="http://supardipunya.blogspot.com/2009/07/cara-daftar-di-alertpay-gratis.html">Cara Daftar Di Alertpay GRATIS</a>

<a href="http://supardipunya.blogspot.com/2009/07/ptc-mendapat-hanya-dengan-mengklik.html">PTC : Mendapat $$$ Hanya Dengan Mengklik</a>
<a href="http://supardipunya.blogspot.com/2009/07/pts-berkomentar-dapat.html">PTS : Berkomentar Dapat $$$</a>

<a href="http://supardipunya.blogspot.com/2009/06/bisnis-online-gratis-mudah-dan.html">BISNIS ONLINE GRATIS, MUDAH, DAN MENJANJIKAN</a>

</marquee>
 
NOTE : Untuk mengubah teks menjadi gambar ganti teks berwarna hijau dengan alamat enyimpanan imge/gambar Anda.

Contoh :

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSUcOoiH8i-JqUlJyK7YiVogn2XhB639z07GHLy4VZR-Ou6rvc1sRjh4VlFCLDTAUpPcBnm_j9j4OlGJmIbfMVJh_HlBcuLng-ZiUWktOLT9vwMQYaBZ_ksvTE2YqOjAALh4jgSvPWg/"/></marquee>

SEMOGA BERMANFAAT.... 
 
Dari : Supardipunya
0 komentar:

Posting Komentar

Followers


Labels