• Versi Mobile
  • About
  • Contact
  • Sitemap
  • Free SMS
  • Download Lagu X Factor

Pendiari | Artikel Islam, Blog Dan Motivasi

Pendiari Blog Sederhana Berisi | Kumpulan Tutorial Blog | Artikel Islam, Muslimah, Cinta, Jodoh | Artikel Motivasi

  • Home
  • Islam
    • Artikel Islam
    • SMS Ramadhan
    • SMS Idul Fitri
  • TV Online
  • Radio Online
    • Radio Ceria
    • Radio Sunnah
    • Radio Muslim
  • Blog Tools
    • Website Speed Test
    • Ping Service
    • Phrase Kode HTML
  • Muslimah
  • Tutorial Blog
    • Java Script
    • Template
    • Widget
Home » Pernak-Pernik » Membuat Efek Marquee Pada Blog

Membuat Efek Marquee Pada Blog

Membuat Efek Marquee Pada Blog
Menggunakan efek marquee pada blog kita tidak hanya untuk mempercantik blog tetapi juga berfungsi untuk menghemat ruangan. Sebenarnya efek marquee atau teks berjalan ini adalah kode HTML biasaq sehingga tidak akan terlalu sulit untuk membuatnya.



Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.


Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :

Alternate : Teks bergerak bolak-balik
Slide : Teks hanya bergerak sekali saja
Scroll : Teks bergerak ke satu arah secara kontinu

2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :

Up : Teks bergerak keatas
Down : Teks bergerak kebawah
Left : Teks bergerak kekiri
Right : Teks bergerak kekanan

3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda

4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini

5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.

6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".

8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.

9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.

10. Loop: untuk mengatur jumlah pengulangan.

Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:

Contoh 1: Efek teks bergerak bolak-balik secara horizontal
Teks bolak-balik horizontal

Kodenya :

<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">Teks bolak-balik horizontal</marquee></font>




Contoh 2: Efek teks berjalan bolak-balik secara vertikal:
Teks bolak-balik vertikal

Kodenya :


<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Teks bolak-balik vertikal</marquee></font>



Contoh 3: Efek teks berjalan kekanan secara kontinu
 Teks Kekanan kontinu

Kodenya :

<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="100%">Teks Kekanan kontinu</marquee></font>



Contoh 4: Efek teks berjalan kekiri sekali saja
Berjalan kekiri sekali

Kodenya :

<font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">Berjalan kekiri sekali</marquee></font>






 

Contoh 5: Efek teks berjalan kekanan tiga kali
Berjalan kekanan tiga kali 

Kodenya :

 <font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">Berjalan kekanan tiga kali</marquee></font>







Contoh 6: Efek Bounce
Efek Bounce







 Kodenya :

<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Efek Bounce</marquee></marquee></font>




 


Contoh 7: Teks Berhenti Jika Mouse Menyentuh Daerah Marquee
Teks Berhenti Jika Mouse Menyentuh Daerah Marquee





  
Kodenya :

<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">Teks Berhenti Jika Mouse Menyentuh Daerah Marquee</marquee></font>

Contoh diatas hanya sebagian dari efek marquee, silahkan Anda utak-atik sendiri nilai-nilai pada attributes untuk mendapatkan efek yang Anda inginkan.


Silakan mencoba...


sumber : www.emefa.co.cc
Written by: Pendi Ari Wibowo
Pendiari | Artikel Islam, Blog Dan Motivasi Updated at: 11/17/2010
Posted by Pendi AW on Rabu, 17 November 2010 - Rating: 5
Title : Membuat Efek Marquee Pada Blog
Description : Menggunakan efek marquee pada blog kita tidak hanya untuk mempercantik blog tetapi juga berfungsi untuk menghemat ruangan. Sebenarnya efek ...

Bagikan Ke

Facebook Google+ Twitter

1 Response to "Membuat Efek Marquee Pada Blog"

  1. Kevin Christian11 Maret 2011 pukul 15.10

    wah gan, keren bgt gan efeknya.. ane pake ya gan... liat CBox an deh gan..

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar (Atom)

Kata Teman

Copyright © 2014 Pendiari | Artikel Islam, Blog Dan Motivasi - All Rights Reserved
Pendi Ari Wibowo - Powered by Blogger