Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Marquee with Javascript

Walowwwww…… semuanya. Nongol lagi nih, setelah beberapa hari absen dari nge-blog. Yups… karena kemarin kantorku abis ngadain Tour ke kampung halamanku Bandung. Acyiiiik… banget, makan-makan di kampung daun trus lihat kawah tangkuban perahu, and then berendem air panas di sari ater, pokonya ga inget deh ama yang namanya blog apalagi sama yang ngajuin pertanyaan lewat Shoutbox kaciaaaaaan deh lho ga ada yang nanggepin

( saya lagi jahat nih )

OK sobat, setelah enak tertawa, kita kembali ke…… blog tutorial…. tentunya bukan laptop emangnya saya tukul arwana apa? Yoi… pada kesempatan
kali ini saya mau membicarakan tentang pembuatan fungsi teks berjalan yang sering menggunakan perintah marquee, akan tetapi tentu saja bukan memakai
fungsi marquee biasa seperti yang saya terangkan di sini, karena sama-sama kita ketahui bahwa fungsi marquee tidak bekerja dengan baik pada browser Mozilla atau firefox. Artikel ini saya tulis di sebabkan ada beberapa sobat yang komplain akibat perintah marquee tidak berjalan dengan baik pada Mozilla

Untuk membuat sebuah fungsi marquee agar terlihat bekerja dengan baik pada banyak browser, kali ini saya menggunakan javascript sebagai adaptor nya. Prinsip dasar dari yang akan saya terangkan adalah seperti ini :

  • Kode CSS untuk patokan kode marquee yang ingin di tampilkan
  • Javascript sebagai adaptor agar fungsi marquee dapat bekerja dengan baik pada berbagai browser
  • isi yang ingin di tampilkan
  • Nah kira-kira seperti itu deh kalau menurut saya sih. Bentuk variasi dari marquee ini tentunya bisa berbagai macam bentuk serta ragam yang dapat di ciptakan, akan tetapi kali ini akan saya terangkan satu contoh saja sebagai acuan dasar.

  • Untuk Template klasik
    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode HTML yang ada, kemudian paste notepad lalu save sebagai backup
    5. Copy paste kode berikut di atas kode </style>
    6. Copy kode berikut, lalu paste di atas kode </head>
    7. Copy kode berikut lalu paste pada tempat yang sobat inginkan (biasanya di simpan di sidebar)
    8. Klik tombol Simpan Perubahan template
    9. Selesai.

  • Untuk Template baru
    1. Sign in di blogger
    2. Klik menu Layout
    3. KLik menu Edit HTML
    4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting
    5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
      ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
      ]]></b:skin>

    6. Copy kode berikut lalu paste di atas kode </head>
    7. Klik tombol SIMPAN TEMPLATE
    8. Klik menu Elemen Halaman
    9. Klik tulisan Tambah sebuah Elemen Halaman
    10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
    11. Copy paste kode berikut pada elemen yang muncul
    12. Klik tombol SIMPAN PERUBAHAN
    13. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
    14. Klik tombol SIMPAN
    15. Selesai.

    Pada kode marquee yang di terangkan di atas adalah memuat contoh kata-kata yang saya buat, silahkan sobat ganti sendiri sesuai dengan keinginan sobat. Karena fungsi ini adalah mirip dengan kode marquee biasa, maka untuk menciptakan variasi lainnya maka silahkan sobat bandingkan dengan artikel saya lainnya yang memuat pembuatan kode marquee.

    Untuk melihat contoh hasil dari yang saya terangkan di atas, silahkan sobat klik di sini !

    Selamat mencoba !

    27 Agustus 2007 - Posted by | aksesori blog, blog tutorial, membuat marquee

    18 Komentar »

    1. Terima kasih mas, tutorialnya sangat bermanfaat bagi kami| Pelajar SMK .
      Dari hari ke hari ilmu kami dalam dunia blogger seakan bertambah berkat online learning di blognya mas Rohman.

      Terima kashi banyak….

      Komentar oleh khalifah-timur | 6 Oktober 2007 | Balas

    2. terima kash banyak mas…ya…saya mau nanya nih kalau di marqueenya ada linknya gimana scriptnya ya..?

      Komentar oleh The Eco Kacrut | 21 Oktober 2007 | Balas

    3. makasi tutorialnya

      Komentar oleh seleranusantara | 31 Oktober 2007 | Balas

    4. mas Rohman mau nanya, nga bisa buat 2 marquee with java script ya? ato mesti tulis lagi htmlnya di edit template??? thx

      Komentar oleh Balaputradewa =) | 31 Oktober 2007 | Balas

    5. mas kalo mau buat 2 marquee dengan java cript gmn ya? kok kalo saya buat 2 , yg 1 nga bergerak ya??? makasi

      Komentar oleh seleranusantara | 31 Oktober 2007 | Balas

    6. Mas aku baru belajar nih.. tips Marquee with Java yang mas sampaikan diatas aku coba, di blogku, tapi ternyata ngeffect ke papan pesan (aku pakai oggix–>papan pesan jadi ikut bergetar seirama dengan gerak teksnya)padahal aku jalankan sesuai tutorial, kira-kira kenapa yah mas?

      Komentar oleh Hari Satriyo | 11 November 2007 | Balas

    7. Triam kasih atas ilmux mas

      Komentar oleh Wawan | 13 Desember 2007 | Balas

    8. berhasil sih, tp kalo dibuka pake Mozilla kok lebih lambat ya?? pdhl kalo pake IE ga ada masalah. Mohon pencerahannya mas…

      Komentar oleh junjung | 13 Desember 2007 | Balas

    9. saya punya code (javascript):

      function scroll(){
      document.getElementById(“test”).innerHTML = “h1TAG hello /h1TAG”;
      }
      function scroll2(){
      document.getElementById(“test2”).innerHTML = marqueeTAG good morning /marqueeTAG “;
      }

      scroll();
      setTimeout(“scroll2()”,2000);

      kenapa ya, yg pertama bisa(textnya bergerak),sedangkan yg kedua yg pake setTimeout tidak(bahkan tidak muncul samasekali)?
      (saya mengganti tanda tag h1 dan marquee karena tdk bs mengupload comment dgn tag)

      Komentar oleh fla | 10 Januari 2008 | Balas

    10. assalamu alaikum mas, mau nanya lagi nih, ko’ apanya yang bermasalah, baru saya nyadari kalo marque yang saya bikin, kalo tampilan blognya sacara umum bagus, tapi bila kita mengklik salah satu postingan tampilan marquenya ko’ jadi ndak bagus.
      Makasih mas.
      mas coba aja liat hasilnya di sini..
      http://www.ahmed-antara.blogspot.com

      Komentar oleh Ahmed | 13 Januari 2008 | Balas

    11. mas.. klo feed nya mo dibuat merquee gimana?? scriptnya apa?? help ya mas.. saya sudah pasang feed, tp hasilnya gitu.. ga bagus.. saya pna lihat punya orang.. bagus banget.. tulisannya ditengah.. berjalan pula..
      tlg ya mas.. feed nyang bisa jalan😀
      makasiih..

      Komentar oleh Setangguh Kaktus!!! | 15 Januari 2008 | Balas

    12. makasih mas.. tp skr saya punya kendala lagi ^_^ duh always merepotkan..
      gini mas..
      feednya dah berhasil..
      ana buat merquee sperti anjuran mas di atas..
      ok.. berhasil.. (isinya link-link yg saya buat warna warni)
      lalu..
      saat ana tambah satu lagi..
      isinya teks nya hanya pengumuman.. tanpa link..
      malah hasilnya..
      yg ini berjalan.. sesuai rencana.. tapi yg tadi.. yg pertama kali saya buat.. (yg isinya link2) malah mandeg mas..
      piye iki??
      tolong ya mas..
      ko iso mandeg??
      u/ merquee yg kedua saya cm add script java, trus copas scrip yg pertama tadi..
      help ya mas..
      makasiih..
      maaf selalu merepotkan.
      makasiihhh…

      Komentar oleh Setangguh Kaktus | 18 Januari 2008 | Balas

    13. @setangguh kaktus : javascript ini memang hanya unuk satu fungsi marquee, kalau mau banyak ya musti memodifikasi javascriptnya.

      Komentar oleh rohman | 18 Januari 2008 | Balas

    14. gmn modifnya mas? apa musti buat script lagi?dicopy lagi gitu scriptnya?? ajariiinn…
      makasiiihh..

      Komentar oleh Setangguh Kaktus | 19 Januari 2008 | Balas

    15. hatur nuhun kang Rohman
      Blog sy EGOLDSHARE|INDONESIAN-GUIDANCE jadi ada marki nya skarang..

      Makasih yaa… bmanfaat blog nya…
      Kapan2 mampir yah…

      Komentar oleh cev_sandee | 24 Januari 2008 | Balas

    16. Kang saya mau bertanya nih dengan masalah java script…?Begini Kang ceritanya..saya membuat Marquee dengan javacripit pada blogger…!! satu bentuk vertical dan yang satunya lagi betuk horizontal tapi ketika saya pasang script itu dua2nya kok yang satu malah ga jalan itu kenapa ya Kang penyebabnya…!!bisa di lihat di http://info-baru.blogspot.com Mohon penjelasannya…Terimakasih
      Atau bisa kirim ke email baru kang dari O-om kacrut82@O-om.com

      Komentar oleh Eko Priyanto | 28 Januari 2008 | Balas

    17. makasih banyak buat kang rohman ya…

      karna kang sudah bikin aq jadi ngerti ngeblog dan ngerias semuanya…..:D

      Komentar oleh ryan scan | 9 Juli 2008 | Balas

    18. Kang Nuhun atuh atas infonya sudah saya praktekan, tapi ada pertanyaan & permintaan brikutnya nih..gmn ya kalo mo buat marque-nya dalam bentuk gambar2..foto produk, dll, nuhun kang kalo berkenan boleh d email juga jawabannya ke maysura_cloths@yahoo.co.id

      Komentar oleh MAYSURA MOSLEM FASHION | 15 Agustus 2008 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: