Text Marquee In The Image

Text marquee in The Image Oleh Rohman. Kamis, Agustus 23, 2007 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 : http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg 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 , atau jika bingung simpan saja persis di atas kode ]]>

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 !