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:

contoh text bergulir

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:

kode scrolling text sederhana

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 :
<marquee direction="right&quot; bgcolor="#99CCFF">contoh text bergeser kekanan</marquee>

silahkan Anda lihat, pada tulisan yang saya stabilo kuning, merupakan perintah arah bergesernya text.
  • Hasilnya akan terlihat seperti dibawah ini:
contoh text bergeser kesamping

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.
 <marquee direction="up" bgcolor="#99CCFF">contoh text rolling keatas</marquee>

  • Jika Anda sudah melakukannya dengan benar, maka akan muncul tampilan seperti dibawah ini:
contoh text rolling keatas

  • warnanya koq beda ya? : ) ya iyalah... orang kode warnanya saya ubah he..he..
Sudah siap untuk trik yang keempat? lanjuut...
    Membuat text turun pada blogroll

    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 :
    <marquee direction="down" bgcolor="#9900FF">text rolling turun</marquee>

    • Lihat pada tulisan yang saya stabilo kuning ya, ya... itulah kunci perintahnya. Jadi textnya bisa rolling kebawah. Hasilnya akan terlihat seperti dibawah ini:
    gue lagi turun nich..

     
    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:
    <marquee behavior="alternate" bgcolor="#33FFCC">text goyang kiri dan kanan</marquee>
    • Hasilnya seperti dibawah ini, text akan berjalan kekri dan kekanan secara otomatis.
    text goyang kiri dan kanan


    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:
    <marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">text bergeser pelan</marquee>
    • Hasilnya akan terlihat, pergeseran text bisa terlihat lebih lambat :
    text bergeser pelan
    • Jika kita ingin agar pergeseran textnya justru lebih cepat bisa merubah angka yang distabilo ini ya
     <marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="6">text bergeser cepat</marquee>
    • Nah, kelihatan kan tambah kenceng larinya.. kayak kuda binal hehehe...
    kudaku lari kencang

    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
    <marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50">  kalo ada cursor berhenti</marquee>

    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:
        kalo ada cursor berhenti


    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
    <div style="color: red;">
    <marquee>contoh text berwarna</marquee></div>

    Nb: pokoknya copas aja deh, biar gak ada kelirunya...(warna stabilonya diilangin ya...)
    • Hasilnya seperti ini
    contoh text berwarna
      Membuat Hyperlink Pada Text Berjalan

      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

           LINK#1  LINK#2  LINK#3 

      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

          Kesehatan Mata  Rahasia Bisnis Online  Entrepreneur Tips 

      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

      Comments :

      4 komentar to “Membuat Animasi Text di Blogger”
      ThiNk wiTh miNd 'n FeeLing mengatakan...
      on 

      bgus bgt tuorialna..

      thanx ya..

      LucK Boyzz mengatakan...
      on 

      Sip..
      Nice info.

      Ulatbulu mengatakan...
      on 

      keren :D

      SMP IT Al alawy purwodadi mengatakan...
      on 

      thank bang,,
      ats turtorialnya,,
      bagus blognya...

      http://smpital-alawipurwodadi.blogspot.com/

      tuh milik ane bang, mklum masuk baru dan baru buat kemaren....

      ada gak bang yang mengubar kursor menjadi aneka ragam animasi ato foto bang...

      Posting Komentar

       

      FeedBurner FeedCount

      Pengikut

      site rank