Halo teman-teman satria fadhil muhammad kembali lagi di mb.com.Pada malam hari kali ini saya mau berbagi tutorial mengenai blogging nih yaitu
cara membuat tulisan berjalan di blog.Seperti biasa tanpa berbicara panjang lebar lagi kita langsung membahasnya saja ya.
Kalian sedang ingin mendesain blog kalian supaya ada text bergerak di dalamnya? pas banget, kalian sudah mampir di website yang benar.Memang benar jika di dalam blog kita terdapat tulisan bergerak feel yang kita dapat akan lebih terasa dan enak dilihat dengan mata betul apa betul.
Dalam proses penulisan, teks merupakan pilar utama.Maka dari itu kita selaku para blogger harus sedikit berkreatifitas pada blognya supaya pembaca lebih nyaman dan tertarik saat membacanya, salah satunya dengan pembuatan text atau tulisan berjalan.
Dalam pikiran saya kalian seharusnya sudah sering melihat hal-hal seperti tulisan berjalan bukan? jika tidak ingat text berjalan biasa kita jumpai pada layar televisi, gerbang sekolah, tempat periklanan atau billboard, dan masih banyak lagi lainya.
Nah untuk dalam bahasa pemrograman tersendiri, tulisan berjalan bisa juga disebut dengan istilah Marquee.Penasaran lebih lanjut mengenai apa sih itu marquee? yuk kita sama-sama bahas.
Apa Itu Marquee
Marquee adalah salah satu bahasa pemrograman Hyper Text Markup Language atau umumnya disebut dengan kata HTML, yang digunakan untuk membuat efek tulisan berjalan pada tampilan website.
Cara Membuat Tulisan Berjalan Di Blog
Untuk cara memasang tulisan berjalan di blog tidaklah susah, salah satu contoh simple pembuatan marquee adalah seperti dibawah ini.
<marquee> Contoh Marquee </marquee>
Secara otomatis jika kalian mengetikkan teks tersebut pada bagian html blog akan seperti dibawah ini.
Tetapi penggunaan design tulisan berjalan marquee diatas adalah masih default atau bisa juga dikatakan masih polos belum dikasih style menggunakan kode cascading style sheet atau bisa disebut juga css.Tapi jangan khawatir, karena saya juga akan memberikan tutorial mengenai pemberian css pada teks marquee supaya lebih mantap hasilnya.
Atribut Penggunaan Marquee
Berikut ini adalah beberapa daftar umum atribut untuk mendesain tulisan pada marquee agar lebih menarik lagi.
- Atribut direction = "left/right/up/down" berfungsi untuk mengatur jenis arah gerakan dari teks marquee.
- Atribut behavior="scroll/slide/alternate" berfungsi untuk mengatur teks supaya bergerak sekali berputar atau bisa juga bolak-balik.
- Atribut align="left/right/center/justify" berfungsi untuk mengatur posisi tek ke rata kiri, kanan, tengah, atau rata kanan kiri
- Atribut bgcolor="#kodewarna" berfungsi untuk memberi warna latar pada teks
- Atribut scrollamount="angka" berfungsi untuk mengatur kecepatan gerakan pada teks
- Atribut scrolldelay="angka" berfungsi untuk mengatur penundaan gerakan pada teks
- Atribut loop="angka - sampai tak hinga" berfungsi untuk mengatur jumlah pengulangan teks sesuai perintah
- Atribut width="bisa berupa px atau %" berfungsi untuk mengatur lebar blok teks dalam ukuran pixels atau persentase
- Atribut height="bisa berupa px atau %" berfungsi untuk mengatur tinggi blok teks dalam ukuran pixels atau persentase
- Atribut title="Isi pesan" berfungsi untuk memberikan judul pada teks
- Atribut onmouseover="this.stop()" berfungsi untuk menghentikan gerakan teks saat mouse berada di area teks
- Atribut onmouseout="thus.start()" berfungsi untuk menggerakan teks saat mouse menjauh di area teks
- Atribut hspace="px" berfungsi untuk mengatur longgar jarak teks kiri ke kanan
- Atribut vspace="px" berfungsi untuk mengatur longgar jarak teks atas dan bawah
Infomasi penting dari saya, bahwa teks marquee hanya bergerak secara horizontal dan vertikal saja .Teks marquee tidak dapat berjalan dari arah pojok atas maupun bawah.Berikut dibawah ini adalah contoh tulisan berjalan buatan kreasi saya.
Source code :
<marquee direction="left" scrollamount="10"> Contoh ke kiri </marquee><br />
<marquee direction="right" scrollamount="10"> Contoh ke kanan </marquee>
Hasil :
Source code :
<marquee align="center" direction="down" scrollamount="3"> Contoh ke bawah </marquee><marquee align="center" direction="up" scrollamount="3"> Contoh ke atas </marquee>
Hasil :
Source code :
<marquee direction="right" width="50%"> Teks menuju ke tengah </marquee><marquee direction="left" width="50%"> Teks menuju ke tengah </marquee><marquee width = "50%"> Teks berlawanan arah </marquee><marquee direction="right" width="50%"> Teks berlawanan arah </marquee>
Hasil :
Source code :
<marquee behavior="alternate" scrollamount="10"> Teks memantul </marquee>
Hasil :
Source code :
<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="30"> <br />
<marquee direction="right" scrollamount="6"> Teks bergerak zig-zag </marquee> </marquee>
Hasil :
Source code :
<marquee behavior="alternate" direction="up" height="100" scrollamount="6" weight="460">
<marquee behavior="alternate" direction="right"> Teks melayang-layang </marquee> </marquee>
Hasil :
Source code :
<marquee behavior="scroll" scrollamount="10" width="460">Teks bergerak scroll </marquee><br />
<marquee behavior="slide" scrollamount="10" width="460"> Teks bergerak slide </marquee><br />
<marquee behavior="alternate" scrollamount="10" width="460"> Teks bergerak alternate </marquee>
Hasil :
Source code :
<marquee width="450"> Teks bergerak dengan aturan kecepatan </marquee><br /><marquee scrollamount="15" width="450"> Teks bergerak dengan aturan kecepatan </marquee><br />
<marquee scrollamount="25" width="450"> Teks bergerak dengan aturan kecepatan </marquee>
Hasil :
Source code :
<marquee bgcolor="red" scrollamount="10" width="450"> Teks bergerak vspace </marquee><br />
<marquee bgcolor="yellow" scrollamount="10" vspace="15" width="450"> Teks bergerak vspace </marquee><br /><marquee bgcolor="green" scrollamount="10" vspace="15" width="450"> Teks bergerak vspace </marquee>
Hasil :
Source code :
<marquee bgcolor="red" hight="100" width="400"> Teks bergerak hspace </marquee> <br />
<marquee bgcolor="yellow" hight="100" hspace="15" width="400"> Teks bergerak hspace </marquee><br /> <marquee bgcolor="green" hight="100" hspace="40" width="400"> Teks bergerak hspace </marquee>
Hasil :
Cara Membuat Tulisan Berjalan Di Blog
Terdapat 2 cara untuk membuat tulisan berlajan di blog yaitu melalui pilihan editor artikel dan melalui menu widget.
Cara Membuat Tulisan Berjalan Di Blog Dengan Editor Artikel
- Masuk kedalam dashboard blogger
- Membua suatu artikel
- Menulis artikel hingga artikel tersebut selesai
- Ganti mode penulisan di sebelah kiri seperti tanda pena ke mode html
- Copy script yang kalian inginkan dan pastekan pada bagian teks yang berjalan
- Klik preview atau pratinjau untuk melihat terlebih dahulu hasil artikel yang sudah dibuat marquee
- Jika sudah selesai klik publikasikan.
Cara Membuat Tulisan Berjalan Di Blog Melalui Menu Widget
- Masuk ke dashboard blogger
- Pada layout pilihan kalian klik tambah gadget atau widget baru
- Pilih widget html atau javascript
- Copy dan pastekan source code yang kalian inginkan
- Terakhir klik tombol save
Kesimpulan
Demikianlah artikel kali ini mengenai cara membuat tulisan berjalan di blog melalui widget dan artikel.Semoga artikel kali ini dapat bermanfaat untuk para blogger sekalian dan baca juga artikel saya lainya mengenai
Klasifikasi Jaringan Komputer Pembahasan Lengkap!, sekian sampai jumpa dan terima kasih.