Created (c) by Princexells Seyka (Princelling Saki)

Selasa, 09 Oktober 2012

Cara membuat gambar berjalan pada Blogspot (Marquee Image).

Jika melihat gambar ada pada sebuah postingan memang memberi warna tersendiri untuk sebuah tulisan. Terlebih jika gambarnya banyak, maka yang membaca postingan bisa berimajinasi lebih tentang apa yang disajikan oleh penulis. Gambar atau Foto dalam jumlah banyak akan tetap tersaji dan bisa dikemas lebih manis jika gambar tersebut bisa berjalan. Kemarin saya baru mendapatkan ilmu dari Brade Sofy, tentang membuat gambar berjalan pada Blogspot yang akan saya bagikan disini.
Berikut  ini adalah langkah-langkah untuk membuat gambar berjalan di blogspot:
1. Masuk atau login ke http://imageshack.us/.
2. Kemudian anda mendaftar terlebih dahulu. Klik sign up pada pojok kanan atas untuk mendaftar.
Masuk Shack
3. Isi formulir yang telah disediakan. Kemudian klik sign up.
Isi Formulir
4. Setelah proses pendaftaran selesai, maka akan tampil seperti gambar berikut.
Proses Registrasi Sukses
5. Kemudian cek email anda dan klik link yang sudah disediakan di email untuk melanjutkan.
6. Mulailah upload gambar satu persatu. Sebelum memulai upload gambar, terlebih dahulu tentukan Image Resize. Pilih 320×240 (for website and email).
Memelai Upload
Lanjutkan untuk upload. Jika tidak bisa mengupload, saya sarankan unuk klik Can’t Upload.
7. Klik Browse untuk memilih gambar yang akan di Upload, beri keterangan untuk gambar pada add tags (optional). Untuk tags bisa diisi bisa juga tidak. Klik Upload untuk proses berikutnya.
Pilih Gambar8. Jika proses Upload berhasil, maka gambar akan tampil dan ada keterangan Upload Successfull.
Upload Berhasil
Copy link gambar yang ada pada kotak Direct Link. Contoh: http://img692.imageshack.us/img692/6128/fuzzymamdani.png
8. Silahkan  login pada Blogger anda, kemudian masuk ke Tata Letak.
9. Tambahkan Gadget dan pilih menu  HTML/JavaScript. Copy kode dibawah ini kedalam gadget:
<marquee align=”left” bgcolor=”#fff23” direction=”leftheight=”240″ onmouseout=”this.start()” onmouseover=”this.stop()” scrollamount=”4″ width=”100%”>
<img src=”http://img692.imageshack.us/img692/6128/fuzzymamdani.png” /> <img src=”url gambar2″ /> url gambar3” /> <img src=”url gambar4” />
</marquee>
10. Kemudian klik simpan.

Catatan :

  1. Text berwarna merah adalah kode HTML untuk Background. Anda bisa menganti warna backgorund sesuai keinginan anda.
  2. Text berwarna hijau adalah kode HTML untuk arah gambar bergerak. Untuk mengganti arah ketika gambar berjalan, anda bisa mengganti kata “left” dengan “up”, “down”, dan “right
  3. Text berwarna ungu adalah kode untuk mengatur lebar dan tinggi gambar. Ganti lebar dan tinggi sesuai keinginan anda.
  4. Ganti Alamat URL gambar dengan URL gambar Anda
sumber : http://lostmyidea.wordpress.com

0 komentar:

Posting Komentar