Cara membuat galeri foto di blog


Dulu saya pernah ditanyain teman saya bagaiman caranya membuat koleksi foto atau Gallery di blog. Belakangan ini juga banyak yang nanyain kesaya bagaimana cara membuat koleksi foto tersebut agar bergerak dan kelihatan dinamis. Gallery foto tersebut dibuat secara manual. Jawaban saya singkat saja, tambahin aja script Marquee diantara script image tersebut. Tapi teman saya malah kebingungan dengan jawaban yang saya kasi. Mau tau caranya ? Wah bagi yang udah bisa jangan bosan ya ! saya cuma berbagi sama teman-teman pemula yang ingin memperdalam script dasar HTML por eksempel "script marquee". Mudah kok ! Berikut langkah-langkahnya :
  1. Login dulu ke blog anda, yang pasti blogspot.
  2. Setelah itu pilih menu “Tata Letak”.
  3. Trus, tambahin Gadget dengan cara memilih menu “Tambah Gadget”.
  4. Pilih menu “HTML/JavaScript”.
  5. Isi kotak judul dengan judul galery anda, misalkan "My Sweet Gallery".
  6. Pada kotak “Konten”, ketik/copas Script yang bertulis tebal dibawah ini :
    <marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><img src=”alamat_gambar_anda.jpg” width=”120” height=”70”></marquee>
  7. Gantikan alamat gambar “src” yang berwarna merah pada script <img src=”alamat_gambar_anda.jpg” width=”120” height=”70”> dengan alamat gambar anda, kalo belum ada upload dulu ke Picasa, FhotoBucket, dll, trus ambil URL-nya dan pastekan pada tulisan yang berwarna merah. Sedangkan "width" dan "height" untuk mengatur ukuran lebar dan tinggi gambar sesuai dengan selera anda. Conoth diatas, hanya untuk satu gambar/image/foto. Kalau pengennya lebih dari satu, silahkan CoPas aja script image tersebut sebanyak gambar/image/foto yang anda inginkan. Lihat contoh dibawah ini :
    <marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
    <img src=”alamat_gambar_1_anda.jpg” width=”120” height=”70”>
    <img src=”alamat_gambar_2_anda.jpg” width=”120” height=”70”>
    <img src=”alamat_gambar_3_anda.jpg” width=”120” height=”70”> 
    <!-- dan seterusnya..., terserah mau berapa aja boleh --> 
    </marquee>
  8. Setelah itu klik tombol “Simpan” untuk menyimpan gadget yang barusan anda buat.
  9. Jangan lupa untuk mengatur tata letak Gadget anda disebelah mananya biar rapi.
  10. Terakhir, klik "simpan" lagi pada tampilan rancangan anda dan coba lihat blog anda dengan membuka baru atau tekan tombol “Refresh” pada web browser jika blog anda sudah terbuka.
  11. Selamat Mencoba !!! Dan maaf kalau terjadi error, silahkan tanya lagi kesaya kalau ada yang error !!! Link Artikel Original Penulis: Script Marquee Bikin Image Lebih Dinamis


EmoticonEmoticon