Cari Artikel Blog Ini

Total Tayangan Halaman

CARA MEMBUAT TEXT /IMAGE BERJALAN

Teks atau gambar berjalan banyak digunakan oleh para blogger karena disamping dapat menghemat tempat juga menarik untuk dilihat. Aplikasi yang seperti ini dikenal dengan nama Marquee.
Program marquee selalu diawali dan diakhiri dengan kata marquee yang kodenya seperti ini :<marquee>...</marquee>.
Diantara kedua kode tersebut,dapat kita tambahkan beberapa kode lainnya, agar penampilannya lebih menarik, misalnya :
  1. Bgcolor="warna" : untuk mengatur latar belakang teks.
  2. Direction="left/right/up/down" : untuk mengatur arah gerakan dari teks.
  3. Behavior="scroll/slide/alternate" : untuk mengatur perilaku gerakan.
    Scroll = teks bergerak sambil berputar.
    Slide = teks bergerak sekali lalu berhenti.
    Alternate = teks bergerak bolak-balik kekiri dan kekanan.
  4. Title="judul" : title akan muncul saat mouse diarahkan ke tulisan.
  5. Scrollmount="angka" : untuk mengatur kecepatan dalam pixel, makin besar angkanya makin cepat gerakannya.
  6. Scrolldellay="angka" = Untuk mengatur waktu tunda gerakan dalam mili detik.
  7. Width="lebar" = Mengatur lebar blok teks dalam pixel atau persen.


Untuk lebih jelasnya perhatikan contoh dibawah ini :

Efek marquee yang bergerak dari kiri kekanan :


<marquee align="center" direction="left" height="100" scrollamount="2" width="75%">
Selamat Datang di EPG Studio
</marquee>

kata left bisa anda ganti dengan right, up atau down sesuai dengan keinginan anda.


Kode diatas akan terlihat seperti ini :


Selamat Datang di EPG Studio

Efek marquee dengan perilaku gerakan :

<marquee align="center" direction="right" height="100" scrollamount="3" width="100%" behavior="alternate">
Selamat Datang di EPG Studio
</marquee>


Kode diatas akan seperti ini :

Selamat Datang di EPG Studio

Efek marquee dengan warna pada latar belakang :

<div align="left"><font face="georgia" color="yellow"><b><marquee bgcolor="blue" width="100%" scrollamount="3" behavior="alternate">
Selamat Datang di EPG Studio
</marquee></b></font></div>


Kode diatas akan terlihat seperti ini :


Selamat Datang di EPG Studio


Setelah anda memahami kode-kode diatas, sekarang anda dapat mengganti huruf dengan gambar/image.

Contoh :

<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-010.jpg" target="_blank"><img width="150"src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-010.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-011.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-011.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-012.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-012.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-015.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-015.jpg" border="0" alt="Photobucket"></a>
</marquee>

kode-kode diatas terlihat seperti ini




Perhatikan sederetan banner yang dipasang pada EPG Studio. Coba arahkan mouse pada gambar yang sedang berjalan.





Photobucket

Photobucket

guru ganteng
mm

Gerobak Anak Wisma


Tukar Link

gd's blog



Untuk membuat kode marquee seperti contoh diatas ( image/tulisan akan berhenti ketika mouse diarahkan diatasnya. Anda hanya perlu menambah kode ini onmouseover="this.stop()" dan kode onmouseout="this.start()"

Perhatikan contoh dibawah ini (kode dari banner di atas).

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

<script src="epg-studio.blogspot.com"></script> <img border="0" width="220" src="http://1.bp.blogspot.com/_1j80TgNqd_8/SaESR56aNhI/AAAAAAAAAnY/3YSBhu-aHLU/S220/LOGO+EPG+1.jpg" height="40" />
<br/>
<a href="http://smpn1cbr.blogspot.com/"><img border="0" width="220" alt="Photobucket" src="http://i662.photobucket.com/albums/uu349/m4ns/smpn-1.gif" height="60" /></a><a target="_blank" href="http://gustihana.blogspot.com/">
<br/>
<img border="0" width="220" alt="Photobucket" src="http://i639.photobucket.com/albums/uu118/gustihana/melove-3-1.jpg" height="40" /></a><a href="http://budidhan.blogspot.com/" target="_blank"> <img border="0" width="220" alt="guru ganteng" src="http://i555.photobucket.com/albums/jj463/guruganteng/c495709ec87313.gif" height="40" /></a>
<br/>
<a target="_blank" href="http://agusfauzy.co.cc/"><img border="0" width="220" alt="mm" src="http://www.wargabisnis.com/image/agus03.gif" height="60" /></a><a href="http://anakwisma.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Gerobak Anak Wisma " src="http://i366.photobucket.com/albums/oo104/isdarmady/rpx.jpg" height="40" /></a><a href="http://tukeranlink.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Tukar Link" src="http://i184.photobucket.com/albums/x311/tukeranlink/Tukeranlink.gif" height="40" />
<br/>
</a><a target="_blank" href="http://www.gdpermana.blogspot.com/"><img border="0" width="220" alt="gd's blog" src="http://i381.photobucket.com/albums/oo253/gdpermana/cooltext415876826.jpg" height="40" /></a>

</marquee>



Selamat mencoba...!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
20 Comments

20 komentar :

TokBatinSenoi mengatakan...

N3/tips yang menarik. tks

gusti&hana mengatakan...

istimewa bang..., thx...

Rheno SAy mengatakan...

THANX"Z.......
Bro...

Fritz mengatakan...

Thank u, for the link exchange

Gudang Download mengatakan...

mas,, kok di edit html saya ngga ada kode marquenya ya??.. saya tolong di bantu mas,,

The Real Community Indonesia 15 mengatakan...

thanks dah banyak menolong saya sebagai pemula.bravo EPG-studio.

fredy mengatakan...

thx bgt pak...pasti akan bermanfaat...

http://fredyngahu.co.cc

SMPN 250 Jakarta mengatakan...

1. Bagaimana caranya menghubungkan postingan ke css menu?
2. Bagaimana membuat artikel (upload), terus bisa dihubungkan ke css menu.

kirim ke : syamsul_loetjoe@yahoo.com

terima kasih

Aziz mengatakan...

wooww...mantap nich bwt nambah perbendaharaan desainnnnn....

Deogracias mengatakan...

Akhirnya kutemukan juga tips blog yang seperti ini..
Terima kasih kang..Bermanfaat sekali

Rizky2009 mengatakan...

aq udah coba sob, tp ukurannya kecil. ky yang terlihat d atas blogq, supaya tulisannya besar kaya punya kamu itu gmana caranya?

Advert mengatakan...

Makasih infonya kawan... :)

MyAnimeGirls mengatakan...

Kereeeennn....Makasih bgt Kang! tertolong bgt nih, dah pusing nyari sana sini ^^".

udinta mengatakan...

trims pak ok bangeeeeeeeeeet

udinta mengatakan...

trims pak jauhari telah membantu ok bangeeeeeeeeet

udinta mengatakan...

Ya Allah sembuhkanlah Penyakit yang diderita Bapak ini. Sungguh Kasihanilah Bpk ini karna beliau ada...

pringesticandra mengatakan...

ya allah sembuhkanlah penyakit yg di derita bpk ini sungguh kasianilah bpk ini karena beliau ada...

udinta mengatakan...

ma,af kawan kawan

Chemistry is Mistery mengatakan...

Terima Kasih.....Ilmunya.Semoga Bertambah amalnya.Ok Salam sukses selalu.

IRAWAN mengatakan...

moga jadi amal shalih ya pak. :) www.taaduders.blogspot.com

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!