Cara Buat Text Berjalan atau Marquee

Cara Buat Text Atau Tulisan Berjalan ( Marquee )

proBlogiz

Tutorial blogger kali ini tentang Cara Membuat Text Atau Tulisan Berjalan atau Marquee di blogspot, tentunya ini juga menambah keindahan tampilan sebuah blog. Text berjalan atau tulisan berjalan yang biasa disebut juga marquee ini sering dimanfaatkan untuk menampilkan tulisan atau text dalam widget, misalnya di widget Recent Post, Popular Post, Comment Box atau juga digunakan untuk menampilkan informasi yang dianggap penting oleh si empunya blog, untuk tulisan pengumuman, iklan atau advertise misalnya.

Membuat Tulisan Berjalan, marquee atau text bergerak sebenarnya mudah untuk dipraktekan, yaitu hanya penambahan sebuah perintah sederhana "<marquee>" dalam penulisan kode HTML. Namun Anda bisa memberi perintah-perintah tambahan sebagai modifikasi nanti, seperti membuat arah gerakan text yang berbeda, warna text dan background, kecepatan text ataupun  variasi lainnya. Semua akan dibahas dalam tutorial Desain Blog ini, seperti pada pembahasan yang lalu tentang  Buat Scroll Di Widget,  kali ini juga akan dipandu dengan contoh kode-kode perintah HTML dan hasilnya.

Text atau tulisan berjalan / bergerak ada beberapa macam jenisnya, dari yang paling sederhana yaitu text bergerak dari kanan ke kiri,  gerakan text bolak-balik, atau gerakan text ke atas dan ke bawah dan masih banyak variasi yang bisa Anda buat nanti. Baiklah kita langsung saja ikuti  panduan dibawah :

Text Berjalan Dari Kanan Ke Kiri

Kode perintah HTML :

• <marquee>Text Anda Disini</marquee>

Hasilnya akan seperti ini :

Text Anda Disini

Apabila Anda membuatnya dalam widget adalah sama perintahnya, hanya textnya diganti dengan kode yang ada pada widget tersebut.

• <marquee>kode widget</marquee>

Text Berjalan Dari Kiri Ke Kanan

Kode perintah HTML :

• <marquee direction="right"> <b>Text Anda Disini </b></marquee>
• penambahan kode "<b>....</b>" untuk membuat huruf tebal

Hasilnya akan seperti ini :

Text Anda Disini

Text Berjalan Dari  Ke Atas atau Ke Bawah

Kode perintah HTML :

• <marquee direction="up"> <b>Text Anda Disini </b></marquee>
• <marquee direction="down"> <b>Text Anda Disini </b></marquee>

Hasilnya akan seperti ini :

Text Anda Disini Text Anda Disini

Text Bergerak Bolak-Balik

Kode perintah HTML :

• <marquee behavior="alternate"> <b>Text Anda Disini </b> </marquee>

Hasil seperti ini :

Text Anda Disini

Pengaturan Kecepatan Gerakan Text

Anda bisa mengatur kecepatan gerakan text sesuai dengan keinginan, dengan menambah kode perintah "scrollamount "angka kecepatan".

Kode perintah HTML :

• <marquee scrollamount="2"><b> Text Anda Disini</b> </marquee> 
• <marquee scrollamount="3">  <b> Text Anda Disini</b> </marquee> 
• <marquee scrollamount="4">  <b> Text Anda Disini</b> </marquee>

Contoh hasilnya :

Text Anda Disini Text Anda Disini Text Anda Disini

Penambahan angka "2", "3", "4", bisa disesuaikan menurut selera Anda, semakin besar angka semakin cepat text bergerak.
Untuk pemberian warna pada text seperti diatas, tambahkan kode "style="color: red;", contoh :

• <marquee scrollamount="2" style="color: red;"> <b> Text Anda Disini</b> </marquee>

Text Berhenti Saat Disorot Mouse

Kode perintah HTML :

• <marquee onmouseover="this.stop()" onmouseout="this.start()"> <b> Text Anda Disini</b> </marquee>

Contoh Anda bisa lihat text  pengumuman berjalan pada blog proBlogiz ini, dibagian atas halaman. Silahkan sorot dengan mouse Anda pada text yang bergerak, textnya akan berhenti dan coba diklik untuk membuktikanya.

Memberi Background Pada Text Bergerak

Kode perintah HTML :

• <marquee bgcolor="black"> <b> Text Anda Disini</b> </marquee>

Contoh hasilnya :

Text Anda Disini

Pengaturan Ruang Gerakan Text

Untuk mengatur besar ruang gerak text, baik lebar maupun tingginya agar sesuai dengan keinginan Anda, gunakan kode perintahnya dengan menambah kode  width="angka lebar "dan height="angka tinggi " .

Kode perintah HTML :

• <marquee scrollamount="2"  behavior="alternate" width="150px" > <b> Text Anda Disini</b> </marquee>

Contoh hasil :

Text Anda Disini


 Contoh yang lain :

• <marquee scrollamount="2"  direction="up"  style="color: red;" width="80px" height="50px" > <b> Text Anda Disini</b> </marquee>
• <marquee scrollamount="2"  direction="down"  style="color: green;" width="80px" height="50px" > <b> Text Anda Disini</b> </marquee>

Text Anda Disini Text Anda Disini

Kesimpulan

Penggunaan Text Berjalan atau Tulisan Bergerak hendaknya disesuaikan dengan kebutuhan sebuah blog itu sendiri, selain membuat tampilan blog lebih variatif,  trik tulisan berjalan ini bisa dimanfaatkan untuk menghemat ruang, contoh pada pengunaan widget yang tanpa menggunakan scroll widget.

Pemasangan text berjalan bisa pada widget dengan memasukkan kode HTML di dalam widget tersebut, atau pada halaman postingan artikel.

Untuk pasang di widget :  Masuk Blogger >>> Tataletak >>> tambah gadget >>> pilih HTML/Javasricpt >>>> masukkan code HTML lalu Simpan

Untuk pasang dihalaman posting : :  Masuk Blogger >>> New Entri >>> pilih Mode HTML >>> masukkan code HTML

Ketika  membuat variasi atau modifikasi pada kode perintah HTML text berjalan seperti diatas, semakin banyak variasi yang Anda buat makin banyak pula kode perintah yang dipakai.

Hindari penggunaan text berjalan yang berlebihan, karena pemakaian yang semakin banyak pada blog selain berpengaruh terhadap loading halaman, juga kadang-kadang kurang optimal pada aplikasi browser-browser tertentu.

Akhrinya Anda bisa mencobanya dan membuktikan dengan merubah tampilan blog menjadi semakin indah dan profesional look menggunakan tutorial Cara Buat Text Atau Tulisan Berjalan. Selamat mencoba.....!!!

Dengan senang hati proBlogiz menerima saran atau tehnik lain yang berkaitan dengan membuat text berjalan tersebut. Silahkan share bersama kami di form komentar......feel free to ask it.