Membuat Animasi Text Di Blogger
Terkadang kita perlu menampilkan text yang bisa bergerak baik itu naik, turun, kesamping kiri ataupun kanan untuk menarik perhatian pembaca. Kali ini saya coba menyajikannya lengkap khusus untuk anda yang ingin mengutak-atik blog anda agar lebih keren.
Membuat Text Berjalan Kesamping Kiri
Bagaimana caranya untuk menambahkan teks yang bergeser kesamping, baik dibagian sidebar, posting blog dan lain-lain. Cara ini merupakan cara lain untuk menarik pengunjung agar memperhatikan beberapa tulisan yang kita kehendaki.
Tapi, sebaiknya kita jangan memasangnya terlalu banyak, karena justru akan mengganggu dan merusak konsentrasi pembaca. Anda dapat menambahkan tulisan bergulir pada kalimat / frase tertentu seperti : posting paling populer, iklan, berita terkini dll. Okedeh, tanpa perlu basa-basi kepanjangan. Langsung aja nih...
Berikut adalah kode untuk menambahkan teks bergulir sederhana dari kanan ke kiri
kode <marquee> bergulir sederhana teks </ marquee>
Output akan seperti:
Contoh 1:
jangan lupa, anda mengetiknya di tab Edit HTML seperti gambar dibawah ini
Membuat Text Berjalan Kesamping Kiri
Bagaimana caranya untuk menambahkan teks yang bergeser kesamping, baik dibagian sidebar, posting blog dan lain-lain. Cara ini merupakan cara lain untuk menarik pengunjung agar memperhatikan beberapa tulisan yang kita kehendaki.
Tapi, sebaiknya kita jangan memasangnya terlalu banyak, karena justru akan mengganggu dan merusak konsentrasi pembaca. Anda dapat menambahkan tulisan bergulir pada kalimat / frase tertentu seperti : posting paling populer, iklan, berita terkini dll. Okedeh, tanpa perlu basa-basi kepanjangan. Langsung aja nih...
Berikut adalah kode untuk menambahkan teks bergulir sederhana dari kanan ke kiri
kode <marquee> bergulir sederhana teks </ marquee>
Output akan seperti:
Contoh 1:
jangan lupa, anda mengetiknya di tab Edit HTML seperti gambar dibawah ini
kemudian akan terlihat seperti ini :
Bagaimana jika background text berjalan Anda ingin diwarnai? Silahkan coba ini...
Tambahkan warna latar belakang teks,
<marquee bgcolor="#99ccff">kode scrolling text sederhana</marquee>
Contoh 2:
Bagus bukan? kalau Anda ingin merubah warna backgroundnya dengan warna lainnya anda bisa melihat di kode heksadesimal di sini
Lanjut yuk...
Membuat Text Berjalan Kesamping Kanan
Ini merupakan trik lanjutan tentang marquee script, yaitu membuat text yang berjalan dari kiri ke kanan. Yang perlu Anda lakukan adalah :
- Copy dan paste kode dibawah ini pada posting blogger di tab EDIT HTML seperti yang saya tunjukkan pada gambar diatas :
silahkan Anda lihat, pada tulisan yang saya stabilo kuning, merupakan perintah arah bergesernya text.
- Hasilnya akan terlihat seperti dibawah ini:
Membuat text naik pada blogroll
Ini merupakan trik yang ke-3 untuk geser-menggeser text, dan untuk kali ini, saya ingin mengajak Anda untuk mempelajari trik membuat text naik, dan ini tidak terbatas pada blogroll, perintah script ini bisa anda terapkan di text apapun di blogger, simak ya.
- Seperti biasa, inilah kode rahasia yang harus Anda copy paste kan, cara untuk copy dan pastenya sudah saya kasih tau pada posting sebelumnya.
- Jika Anda sudah melakukannya dengan benar, maka akan muncul tampilan seperti dibawah ini:
- warnanya koq beda ya? : ) ya iyalah... orang kode warnanya saya ubah he..he..
Kayaknya kalo untuk buat text turun sudah banyak ya yang bikinin, tapi daripada Anda harus repot buka blog lainnya, mendingan sekalian saya tuliskan aja disini. Begini nih caranya :
- Copy paste kode berikut ini :
- Lihat pada tulisan yang saya stabilo kuning ya, ya... itulah kunci perintahnya. Jadi textnya bisa rolling kebawah. Hasilnya akan terlihat seperti dibawah ini:
Menggeser text kekiri dan kekanan
Untuk kali ini, kita tidak hanya akan menggeser text saja, melainkan mengaturnya sehingga dia bisa bergeser kekiri dan kekanan secara otomatis (mulai agak sulit? tidak juga). Silahkan perhatikan langkah-langkah berikut ini:
- Pada script yang sudah ada silahkan Anda menambah perintah seperti yang di stabilo kuning dibawah ini:
- Hasilnya seperti dibawah ini, text akan berjalan kekri dan kekanan secara otomatis.
Mengurangi Kecepatan Geser Text
Untuk merubah kecepatan bergesernya text, kita tinggal menambah perintah sebagai berikut (yang distabilo kuning ya...)
- Anda harus menambah beberapa perintah di scriptnya seperti yang tertera dibawah ini:
- Hasilnya akan terlihat, pergeseran text bisa terlihat lebih lambat :
- Jika kita ingin agar pergeseran textnya justru lebih cepat bisa merubah angka yang distabilo ini ya
- Nah, kelihatan kan tambah kenceng larinya.. kayak kuda binal hehehe...
Text Berhenti Saat Cursor Diatasnya
Kalau Anda bingung sama judul postingan ini, silahkan baca sejarahnya, alias baca postingan saya sebelumnya. Pasti deh tambah bingung hehe... becanda lho.
Langsung aja ya, yang perlu Anda lakukan adalah mengikuti langkah-langkah berikut ini:
- copas kode berikut
catatan : tulisan yang saya stabilo kuning diatas hanya untuk menunjukkan kepada Anda disitulah kunci perintahnya. Bukan berarti hanya tulisan itu yang Anda copasin lho.. copas semua bleh!
- Hasilnya akan terlihat seperti dibawah ini:
Mengubah Warna Text Pada Text Berjalan
Untuk kali ini, kita akan membahas cara untuk mengubah warna pada text berjalan
- Pertama, Anda harus mengawali dengan tag <div dan diakhiri tag </div>
- Kedua, Anda tinggal menambahkan kode warna sesuai dengan keinginan Anda
<marquee>contoh text berwarna</marquee></div>
Nb: pokoknya copas aja deh, biar gak ada kelirunya...(warna stabilonya diilangin ya...)
- Hasilnya seperti ini
Inilah yang menurut saya paling keren, membikin text berjalan jadi hyperlink text alias text yang jika diklik akan membuka situsnya. Berikut step bay stepnya :
- pertama, copas kode dibawah ini:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>
- hasilnya akan terlihat seperti dibawah ini
Jangan lupa ganti tiap tulisan url#1,url#2,url#3 dengan alamat URL situs/blog yang Anda kehendaki dan LINK#1 dst dengan nama situs/blog yang Anda kehendaki
Contoh:
- copas kode berikut ini:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="http://www.matasehat.com/">Kesehatan Mata</a> <a href="http://www.bongkarrahasia.blogspot.com/">Rahasia Bisnis Online</a> <a href="http://www.entrepreneur-on.blogspot.com/">Entrepreneur Tips</a> </marquee>
- hasilnya seperti ini
Jangan lupa commentnya : )
Anda dapat memilih warna latar belakang anda dengan mengganti kode heksadesimal.
Klik di sini untuk melihat kode warna yang berbeda.
Ditunggu komentarnya ya boss, jika Anda ingin mendownload artikel ini silahkan klik disini
