Hanya arsip

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

Text marquee in The Image

Dulu…. pernah muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah Marquee, dan untuk pertanyaan ini sudah saya jawab di sini. Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :

Mas, bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?

Wedewww…. pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengansalah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu
untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.

Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya
beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.

Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar. Untuk contoh saja, alamat yang saya gunakan untuk contoh adalah sebagai berikut :

photo anak saya nih… lagi acik-aciknya bermain..

Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :

•  untuk template klasik

  1. Sigin di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting
  5. Copy paste kode berikut diatas kode <style>
  6. Copy paste kode berikut pada tempat yang sobat inginkan
  7. Klik tombol Simpan Perubahan Template
  8. 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. Klik tombol SIMPAN TEMPLATE
  7. Klik menu Elemen Halaman
  8. Klik tulisan Tambah sebuah Elemen Halaman
  9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
  10. Copy paste kode berikut pada elemen yang muncul
  11. Klik tombol SIMPAN PERUBAHAN
  12. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
  13. Klik tombol SIMPAN
  14. Selesai.

Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.

Agar lebih yakin dengan hasil dari kode-kode yang saya buat di atas, coba lihat saja contohnya, silahkan klik di sini !

Selamat berkreasi !

Iklan

23 Agustus 2007 - Posted by | aksesori blog, blog tutorial

7 Komentar »

  1. Revisi : utk template klasik.. kode css bukan di simpan diatas kode <style> … tapi di atas kode </style>

    Komentar oleh rohman | 23 Agustus 2007 | Balas

  2. tulisan yg menarik. Mas rohman tau ga cara membuat marque untuk blog WP?? masih bingung nih.

    Komentar oleh Junjung | 30 Agustus 2007 | Balas

  3. Terima ksaih mas !. Share ilmu untuk dari mas luar biasa kegunaannya, bahasanya gampang di mengerti, detailnya step by stepnya jelas.

    Sorry yah saya byk contek punya mas loh.

    Komentar oleh Celoteh(AW) | 16 Desember 2007 | Balas

  4. MAS ROHMAN, KAYAKNYA BANYAK YANG KESUSAHAN BUAT READ MORE TERMASUK SAYA, KALAU BISA JAVA SCRIPNYA DIBUATKAN SEPERTI DI ATAS ENAK TINGGAL KOPI PASTE YA MAS…….. DIJAMIN PADA BERHASIL …… BGM MAS?

    Komentar oleh AHMAD JANAN | 30 Desember 2007 | Balas

  5. terima kasih kang rohman atas scriptnya,saya masih sangat awan diblog, mohon terus mengeluarkan tulisan – tulisan mengenai blog agar bisa membantu saya nantinya dan masyarakat luas umumnya…

    Komentar oleh AGP | 7 Mei 2008 | Balas

  6. kang rohman! saya bingun nih, saya mau mengubah icon yang ada pada ????http://ssssss.blogspot.com/..

    Komentar oleh sultan | 18 Juni 2008 | Balas

  7. kak…..ajarin donk…bikin blog yg bagus…coba lihat blogku tuh…msh elek…krg bagus…tolong ya

    Komentar oleh Masslank_Crue......"CR_7".... | 25 Juli 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: