http://picasion.com

rss

Cari Sepatu Keren??

Membuat Teks Bergerak Pada Blogger (Efek Marquee)

Setelah jalan-jalan kesana-kemari naik mobil angkutan google, akhirnya saya menemukan tips berharga untuk mempercantik blog/website kita yaitu efek marquee. Itupun setelah saya berjalan-jalan dari kakak-kakak senior blogger (kang Rohman, Bang Dell, dan banyak lagi) yang dengan ikhlas untuk berbagi ilmunya dan langsung saja saya catat dalam blog pribadi saya yang sangat sederhana ini supaya tidak lupa. Mengutip istilah mas Herwono dengan istilah mengikat makna. tentu akan lebih membekas di hati kita dengan mencatat apa yang telah kita dapat.

Baik berikut trik membuat efek teks/gambar berjalan. For those who can speak Indonesia you may find this trick with English version by other blogers.
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 semajin 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="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

Hasilnya akan seperti ini:



efek marquee dari kanan ke kiri



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

Contoh marquee dari perilaku gerakan :

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

marquee menurut perilaku

</MARQUEE>

Hasilnya akan seperti ini:


efek marquee menurut perilaku


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="200" 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://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

Hasilnya:



Rubrik Elektronik

Electronic Rubric

Kolom iklan


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://blogpakdani.blogspot.com/search/label/Various%20Flashcard" target="_blank"><img src="http://i973.photobucket.com/albums/ae211/hamdaniz/sample-big.jpg" border="0" alt="Flashcard" /></a></div>
</marquee>

Hasilnya akan seperti ini:

Flashcard




Untuk menampilkan gambar/fotonya anda harus meminta pihak ke tiga / hosting yang menyediakan gambar seprti photobucket.com atau slide.com

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

Selamat bereksperimen

.::Related Posts:

6 comments:

Anonymous said... Reply

ini dia yg lagi dicari, simpen dulu ah. nanti baru di praktekin.

thanks ya pak. :D

Unknown on Monday, August 02, 2010 3:46:00 PM said... Reply

@warlord team
sama-sama sobat

Unknown on Friday, August 20, 2010 4:26:00 PM said... Reply

nempatin marque itu masuk mana ya pak?

hamz/blogpakdani on Friday, August 20, 2010 7:59:00 PM said... Reply

@Gengsugeng
sobat bisa menempatkan effek marqueenya di sidebar, header, atau di posting juga bisa. Tinggal masuk ke Design > page element > add gadget (di posisi manapun) > Add HTML/JavaScript > kemudian masukan kode marquee yang sobat inginkan > save > selesai. Ikuti langkah-langkah pada tutorial di atas, pasti berhasil. selamt mencoba sobat

Mas Blogger on Friday, February 24, 2012 1:47:00 PM said... Reply

Saya pemula dalam blogger, trims atas share ilmunya gan... http://masarkandas.blogspot.com/p/games.html

Anonymous said... Reply

kunjungan malam, happy blogging


Post a Comment

Silahkan tulis komentar sebagai umpan balik dari artikel ini. Tidak diperkenankan untuk komentar yang berunsur spamming, porno, dll.

http://picasion.com/i/1TFa9/

Sub Menu

  • 1. Membuat Teks Berkedip
  • 2. Menambah Elemen di Atas dan Bawah Posting
  • 3. Menambah Dua Elemen di Bawah Sidebar
  • 4. Kotak Komentar Blogger Bermasalah
  • 5. Membuat Teks Bergerak Pada Blogger
  • 6. Membuat Tabel Pada Blogger
  • 7. Cara Membuat Scrollbox pada Blogger
  • 8. Fungsi New Pages Pada Blogspot
  • 9. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 10. Membagi 2 Kolom Sidebar Blog
  • 11. Cara Memperlebar Halaman Blog
  • 12. Mengatur Perataan Posting Artikel
  • 13. Membuat Menu Dropdown Pada Arsip
  • 14. Blogger Sudah Support Fungsi Readmore
  • 15. Menambahkan Web Counter
  • 16. Cara Mendaftar dalam Blogspot
  • 17. Membuat Emotion Pada Blogger
  • 18. Memasang Yahoo Messenger Emotion
  • 19. Membuat Background Posting
  • 20. Membuat Menu Tab View Pada Blogger
  • 21. Cara Mengganti Icon Pada Address Bar
  • 22. Cara Memasang Gambar Berbingkai
  • 23. Cara Membuat Tombol Facebook Like di Blogger
  • 24. Cara Membuat Related Post Dengan Fungsi Scroll
  • 25. Membuat Border dan Kotak Pada Postingan
  • 26. Cara Membuat Buku Tamu Melayang
  • 27. Membuat Iklan Melayang dengan Tombol Close
  • 28. Membuat Kata Sambutan, Penutup dan Pertanyaan Pada Blogger
  • 29. Memasang Widget Recent Post dengan Thumblnails
  • 30. Evolusi Blogger dari Tahun 1999 - 2009
  • 31. Tips Agar Blog Anda Mudah Diakses di HP
  • 32. Cara Memasang Retweet Button Pada Blogger
  • 33. Cara Memperbesar Image/Gambar Pada Postingan Blog
  • 34. Menambah Font dari Google Custom Pada Blogger
  • 35. Membackup Komentar di Blogger
  • 36. Koleksi Gratis RSS Feed Icon dan RSS Feed Vector Graphics
  • 37. Tips Menjadikan Blogger Unlimited Bandwidht/Loading Page Super Cepat
  • 38. Daftar 'Keyboard Shortcut' Untuk Posting di Blogger
  • 39. Mengganti Font Blogger dari Kernest.com
  • 40. Tips Seni Dalam Menulis Artikel di Blog Kita
  • 41. 8 Tips Menulis Artikel Blog Dalam Waktu 20 Menit
  • 42. 5 Tips Efektif dalam Menulis di Blog
  • 43. Mengenal Lebih Dekat Tentang SEO dengan SEO Dictionary
  • 44. 4 Situs Terbaik Bekapasitas 10GB Untuk Menyimpan Data Secara Online
  • 45. SEO adalah Kerangka, Konten adalah Otot, Sosial Media adalah Fisik
  • 46. Bagaimana Cara Kerja Google?
  • 47. Perbaharui Posting Lama Anda
  • 48. Mengapa Page Rank Blog/Web Jatuh?
  • 49. Share Buttons Milik Blogger
  • 50. Integrasi Antara Blogger dan Zemanta Gadget
  • 51. Gambaran Frekuensi Posting Blog kita
  • 52. Cara Mengatasi Blog Post dari Copy Paste
  • 53. Batas/Limit Kapasitas Akun Blogger
  • 54. Posting Blog Menggunakan Word 2010
  • 55. 6 Situs Foto Gratis untuk Blog Anda
  • 56. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 57. 5 Alasan Mengapa Anda Harus Menjawab Setiap Komentar
  • 58. Cara Memodifikasi Bullet List dan Numbered List di Blogger Post
  • 59. Generasi Blogger Masih Didominasi Oleh Kawula Muda
  • 60. Blogger Perkenalkan Pendeteksi Otomatis Komentar Spam
  • 61. Blogger Belajar Dari Harry Potter
  • 62. Trik Menampilkan Total Post, Comment, dan Online User
  • 63. 38 Jawaban SEO
  • 64. Trik Menampilkan Total Post, Comment, dan Online User
  • 65. Cara Mentransfer Akun Blog ke Akun Blog yang Lain
  • 66. Mengenal Fungsi Navbar di Blogger
  • 67. Cara Pasang Recent Posts Thumbnails Dengan Mudah
  • 68. Cara Memasang File Flash Di Blog Post
  • Popular Posts

    Shout it!