Cara Membuat Gambar Berjalan
Selain teks atau tulisan, kita juga dapat membuat gambar bisa berjalan atau bergerak dengan marquee. Caranya adalah dengan menyisipkan URL gambar ke kode program marquee. Namun, sebelumnya kita harus mengunggah atau meng-upload gambar ke layanan penyimpan gambar online, semacam Photobucket, untuk mendapatkan link dari gambar tersebut.

Dalam program marquee, kita juga dapat menyisipkan elemen lainnya seperti link atau tautan dengan berprinsip sebagai berikut:

<marquee>
TEKS, GAMBAR, TEKS TAUTAN, GAMBAR TAUTAN, DAN LAIN SEBAGAINYA.
</marquee>

Contoh:

Di bawah ini ada 2 URL gambar yang akan dimasukkan ke program marquee.
  1. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>
  2. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>
Lalu kedua URL gambar tersebut akan kita sisipkan ke kode marquee di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>

<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>
</marquee>

Maka hasilnya akan seperti di bawah ini.


Klik Munadi

Photobucket


Bila kedua gambar tersebut diberi tautan atau link target sesuai keinginan saya, maka hasil akhir dari URL gambar tersebut akan seperti di bawah ini.
  1. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>
  2. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>
    Selanjutnya kedua URL di atas kita masukkan ke kode marquee seperti di bawah ini.

    <marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
    <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>

    <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>
    </marquee>

    Hasilnya:







    Contoh kode marquee di atas adalah salah satunya saja. Masih ada lagi ragam marquee yang lain yang dapat Anda pelajari di Cara Membuat Marquee di Blogger. Selain itu, Anda dapat juga menambahkan kode-kode yang lain ke dalam kode marquee sesuai keinginan atau kreativitas Anda sendiri.

    12 Comments

    1. mantab bro... makasih infonya.... :D

      ReplyDelete
    2. Monggo mas....ag dah cob berkali-kali koq g bisa yah ?? Dah buat gbr di photobucket...klo aq masukin link nya,gbrnya bisa di link tp gbrnya g jalan. Klo aq g masukin linknya, gambarnya jalan, tp g bisa di link...
      Mohon pencerahannya atuh.....

      ReplyDelete
    3. @Kristina Coba diteliti lagi kode-kodenya, mungkin ada yang kurang..

      ReplyDelete
    4. Tanya lagi ya mas...he...he...Aq ta copas html nya mas (ut liat hasilnya di blog percobaanku, spy tahu kesalahanku)dulu bisa tp aq lupa di blog aq yg mana , eh koq hr ini g bisa yah (gbrnya g jln, tp bisa di buka linknya)....apa aq salah tempatin di gadgetnya yah mas ?
      Rasanya kodenya g ada yg salah mas, coz aq copas dari blognya mas...

      ReplyDelete
    5. @Kristina Coba mba Kristina perhatikan lagi bagian http://nya kemarin memang saya ada yang kurang satu tanda garis miringnya, tp saya udah lupa di http://bagian contoh yang mana. (info tmbhan: sya pake browser Firefox.)

      ReplyDelete
    6. Pagi mas...maaf, lama g buka internet, coz klo liburan n di rumah selalu diganggu anak,,jd sulit ngenet he..he..pagi ini aq d coba lagi html nya mas, aq coba dua2 nya tp g jln dua2 nya mas..., pdahal dulu aq coba jalan lho...saya juga pake browser firefox...

      ReplyDelete
    7. @Kristina Mbak, gmana klo html-nya dikirim ke klikmunadi@gmail.com, biar ntar saya liat2..

      ReplyDelete
    8. Mas..aduh sorry banget ya baru jawab lagi ne....dah bisa mas....g ngerti ne...mungkin di template tertentu g bisa...jd aq coba2 di beberapa template n dah bisa...makasih y mas....

      ReplyDelete
    9. @Kristina Sama-sama mbak, mhn maaf jg kalo tutorialnya agak ngga jelas..

      ReplyDelete
    10. @Angga Blogers terima kasih sob, smga berjalan lancar..

      ReplyDelete

    Post a Comment

    Previous Post Next Post