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">Teks Marquee Bergerak Dari Kanan Ke Kiri</marquee>
<marquee direction="right"> Teks Marquee Bergerak Dari Kiri Ke Kanan</marquee>
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>
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>
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>
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>
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&" bgcolor="#f2f5a9" height="100">Teks arial warna biru</marquee></span>
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/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/"/></marquee>
SEMOGA BERMANFAAT....
9 komentar:
@MIFTAH : sama sama...
mas..... buat variasi teks yang mengikuti kursor mouse nyimpen kodenya setelah apa....
.ko gx bisa ya....
ditungu jawabannya......
caranya bikin *supardi punya* gimana....
tapi di ubah nama Q..????
@nonambex: silahkan buka pada posting saya sebelumnya di sini http://www.supardipunya.co.cc/2009/12/cara-membuat-kursor-animasi-ular-di.html
bagaimana cara mempublish blog saya ke mesin pencari goole??
mas bagaimana cara membuat header dan linkbar pada blog mas ini bisa penuh,
ni blog aku :
http://placecouzy.blogspot.com
oya mas numpang belajar yahhh, kek nya tutorial mas kek'y setara dengan kang rohman. thanks yahh .. oya kita backlink yahhh, ni link barner aku
<a target="_blank" href="http://placecouzy.blogspot.com" rel="dofollow"><img border="0" alt="Place Couzy" src="http://img31.imageshack.us/img31/104/cooltext471948957.png " /></a>
makasih buat nambah variasi..
Posting Komentar
Silahkan berikan komentar Anda...