Skip to content Skip to sidebar Skip to footer

Cara Membuat Tulisan Atau Gambar Animasi Bergerak Di Blog Dengan HTML

Salah satu cara membuat tulisan dan gambar bergerak di blog adalah dengan menggunakan kode HTML selain menggunakan aplikasi yang menyajikan gambar animasi dalam bentuk .gif. Karena dengan HTML ini, anda tidak perlu mengubah format gambar (jpg,png) ke format animasi (gif) khususnya untuk ditampilkan di website.

Tag <marquee> ialah salah satu bentuk yang berfungsi membuat objek dapat bergerak di blog secara vertikal maupun horizontal. Nah disini saya akan menyajikan cara menggunakan fungsi <marquee> membuat tulisan atau gambar bisa bergerak di blog.

Membuat Gambar Bergerak di Blog


Baca : Cara memasang ads.txt adsense di blog

Kode HTML Gambar Bergerak
<marquee direction="right" scrollamount="5"><a href="https://hardifal.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="430" data-original-width="539" height="155" src="https://3.bp.blogspot.com/-B_zMdJj-lL4/XTgPsutIg_I/AAAAAAAAB9k/QD1Qs0qkorIqf5CoN_xhnzSE1nSbv4jkQCLcBGAs/s1600/membuat%2Btulisan%2Batau%2Bgambar%2Bbergerak%2Bdi%2Bblog.jpg" width="220" /></a></marquee>

Keterangan :
  1. Gambar diatas bergerak dari kiri ke kanan, anda bisa mengubah arah geraknya dengan mengubah"right" dengan left(kearah kiri), top(kearah atas) atau down(kerah bawah).
  2. Mengubah kecepatan gerak, silahkan ganti angka "5" dengan angka yang diinginkan. Semakin besar angkanya maka semakin cepat bergeraknya.
  3. "https://hardifal.com" adalah link atau alamat tujuan ketika gambar di klik.

Membuat Tulisan Bergerak di Blog

Untuk membuat teks animasi, caranya masih sama seperti gambar bergerak yakni menggunakan fungsi <marquee> hanya bedanya tidak perlu memerlukan link gambar, karena yang akan ditampilkan hanya teks/tulisan. Berikut saya sajikan teks animasi dengan bermacam-macam gerak.


  • Membuat Tulisan Bergerak Horizontal

Ini Adalah Running Text Horizontal


KODE HTML Tulisan Bergerak Horizontal
<marquee direction="right"><strong>Ini Adalah Running Text Horizontal</strong></marquee>

Teks animasi diatas bergerak dari arah kiri ke kanan. Apabila anda ingin mengubah arak gerak maka silahkan ubah direction="right" dengan yang anda inginkan misalnya left.


  • Membuat Tulisan Bergerak Horizontal (Memantul)
Ini adalah Running Text Memantul (Horizontal)

Kode HTML Tulisan Bergerak Horizontal
<marquee behavior="alternate" direction="up" scrollamount="2" width="90%"><marquee behavior="alternate" direction="right"><b> Ini adalah Running Text Memantul (Horizontal)</b></marquee>


  • Membuat Tulisan Bergerak Vertikal
Ini Adalah Running Text Vertikal
Kode HTML Tulisan Bergerak Vertikal
<marquee style="text-align:center" direction="up">Ini Adalah Running Text Vertikal</marquee>


  • Membuat "Teks Berjalan" Berhenti Ketika Disorot Mouse
Teks ini Akan Berhenti Jika Di Sorot Mouse
KODE HTML Teks Berjalan Berhenti Setiap Disorot Mouse
<marquee onmouseover="this.start()">eks ini Akan Berhenti Jika Di Sorot Mouse</marquee>

Teks berjalan ini menggunakan attribute tag onmouseover yang bergungsi menghentikan running teks setiap kali diarahkan kursor.
Baca juga : Cara Menampilkan dan Mengisi Deskripsi Penelusuran Postingan Blog SEO Friendly

3 comments for "Cara Membuat Tulisan Atau Gambar Animasi Bergerak Di Blog Dengan HTML"