Warung Bebas

Subscribe

RSS Feed (xml)

Powered By

Skin Design:
Free Blogger Template

Powered by Blogger

Selasa, 08 Maret 2011

Membuat efek kedip,Teks dan gambar berjalan dengan menggunakan marquee di blog

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:

WELCOME TO MY BLOG

 

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:

WELCOME TO INSTANTTUTORIAL.BLOGSPOT.COM

 

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:

WELCOME INSTANTTUTORIAL.BLOGSPOT.COM

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:

WELCOME INSTANTTUTORIAL.BLOGSPOT.COM

 

 

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:

welcome ti my blog

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=&quot;100%" bgcolor="#ff0000">WELLCOME TO INSTANTTUTORIAL.BLOGSPOT.COM</marquee></span></div>

hasilnya:

WELLCOME TO INSTANTTUTORIAL.BLOGSPOT.COM

 

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&#39;s Blog" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjPDnPq2QLa7jSQpmYDniioRKaYHRTWNn2lOr3UQ9Y9_1eCX1Kd5Ijxeo_APp5KIFZq6sCvy5mEAf6xrd-9oXmPK2dEggwm2z3s-G6DhDznYI-YZjBSZ_BqLpoV51M9ng1mto6M_1jUAQ/ /></a>

dan hasil nya

angel's Blog

 

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

Related Posts Plugin for WordPress, Blogger...