Pernahkah anda menjumpai dalam suatu artikel atau pada halaman suatu blog, kalimat yang bergerak secara horizontal dari kanan ke kiri (bolak balik). Atau kalimat yang bergerak secara vertikal dari bawah ke atas dan sebaliknya itulah yang disebut efek marque. Mungkin anda juga menjumpai sebuah artikel yang di dalamnya ada tulisan yang dibold(huruf tebal) dan berkedip-kedip. Pada kesempatan ini saya ingin berbagi kepada anda bagaimana caranya membuat efek marque tersebut, sekaligus membuat teks berkedip-kedip. Artikel ini saya tujukan khusus kepada new blogger seperti saya. Untuk para masternya, sebaiknya dilewatkan saja.
Kita mulai pembahasan
kita membuatMEMBUAT TEX BERJALAN DENGAN EFEK MARQUE
1. Membuat teks bergerak secara horizontal dari kiri ke kanan, semisal kita buat tulisan WELCOME TO MY BLOG
codenya akan seperti ini:
<marquee>WELCOME TO MY BLOG</marquee>
dan hasilnya:
Untuk membuat teks bergerak bolak balik dari kiri ke kanan atau sebaliknya, maka code html nya adalah sebagai berikut :
<marquee behavior="alternate">WELCOME TO INSTANTTUTORIAL.BLOGSPOT.COM</marquee>
dan hasilnya akan seperti ini:
2. Membuat teks bergerak secara vertikal dari bawah ke atas
Ini code HTML nya:
<marquee direction="up">WELCOME INSTANTTUTORIAL.BLOGSPOT.COM</marquee>
dan hasil nya:
Untuk mebuat teks tersebut bergerak bolak balik secara vertikal, maka perintahnya seperti ini :
<marquee direction="down" behavior="alternate">WELCOME INSTANTTUTORIAL.BLOGSPOT.COM</marquee>
dan hasilnya:
3. Membuat kalimat berkedip-kedip
Untuk membuat teks, baik itu kata atau kalimat berkedip kedip, perintahnya seperti ini :
<blink>welcome to INSTANTTUTORIAL.BLOGSPOT.COM</blink>
dan hasilnya:
4.Membuat tex bergerak dengan background warna
code html nya seperti ini:
<div style="font-weight: bold;" align="center"><span style="font-size:85%;color:#ffffff;"><marquee black="" direction="right" width="100%" bgcolor="#ff0000">WELLCOME TO INSTANTTUTORIAL.BLOGSPOT.COM</marquee></span></div>
hasilnya:
Lihat yang saya beri warna kuning semua bisa anda rubah:
font-size:85% besar tulisan yang akan di jadikan efek berjalan.
color:#ffffff;:color warna tulisan dan untuk code warnanya anda bisa memilihdisini
bgcolor="#cccccc":background nya anda juga bisa memilih code warna dengan klick disini
direction="right":arah bergerak dan anda bisa mengubah nya dengan left atau sesuai keinginan anda up dan down
width="100%: panjang letak lokasi untuk pembuiatan efek marque ini.. rubah sesuai keinginan anda
5.Membuat gambar bergerak
Sebelum nya anda harus punya sebuah gambar yang ber url anda bisa upload di www.photobucket.com atau di www.imageshack.com,karena url itu yang akan kita buat code html nya disini dan efek membuat gambar bergerak ini bisa di pakai untuk menampakkan link teman pada sebuah gadget.
ini code html nya:
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 0px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a target="_blank" href=http://instanttutorial.blogspot.com/><img border="0" alt="angel's Blog" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjPDnPq2QLa7jSQpmYDniioRKaYHRTWNn2lOr3UQ9Y9_1eCX1Kd5Ijxeo_APp5KIFZq6sCvy5mEAf6xrd-9oXmPK2dEggwm2z3s-G6DhDznYI-YZjBSZ_BqLpoV51M9ng1mto6M_1jUAQ/ /></a>
dan hasil nya
ganti http://instanttutorial.blogspot.com dengan link blog kamu
ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjPDnPq2QLa7jSQpmYDniioRKaYHRTWNn2lOr3UQ9Y9_1eCX1Kd5Ijxeo_APp5KIFZq6sCvy5mEAf6xrd-9oXmPK2dEggwm2z3s-G6DhDznYI-YZjBSZ_BqLpoV51M9ng1mto6M_1jUAQ/ dengan link gambar yang ingin kamu pasang
Anda bisa mengkombinasikan kode diatas, misalnya menjadikannya blink dsb. selamat mencoba.
Ref : http://inspirationsamurai.blogspot.com
0 comments:
Posting Komentar