Home » , , » Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog

Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog

Written By Ku Copas on Monday, 19 March 2012 | 3/19/2012 07:07:00 pm

Cara Membuat Foto dan Gambar Bergerak Slide di Blog - Salam hangat buat sobat-sobat blog KUCOPAS semua, kemarin saya sudah share artikel tentang Cara Buat Teks Berjalan dan Berkedip di Blog, dan kali ini saya akan share tips dan trik lagi tentang Cara Buat Gallery Foto Bergerak slide di Blog atau Cara membuat foto atau gambar berjalan di blog, bahasa gaulnya ya Script Marquee Bikin Image Lebih Dinamis.

Pada dasarnya membuat image atau foto bergerak slide di blog, Caranya terbilang sangat mudah. Karena kita hanya memberi atau menambahkan script marquee pada image atau foto yang ingin kita tampilkan dalam blog kita. Namun cara penerapannya haruslah benar dan sesuai dengan perintah dari script marquee tersebut. Sobat bisa melihat pada artikel Cara penerapan Script Marquee yang benar.

Maka dari itu, Pada artikel saya kali ini akan menerangkan secara detail tentang bagaimana cara menambahkan script marquee dalam image agar bisa bergerak slide dalam blog dengan sempurna dan tidak ada masalah saat blog kita di kunjungi oleh para visitor dan pelanggan pembaca berita terbaru pada blog kita.

Cara Membuat Foto dan Gambar Bergerak Slide di Blog

Oke sobat, Kita kembali lagi pada tutorial untuk Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog, silahkan sobat ikuti cara-caranya sebagai berikut:

1. Silahkan >> Login atau Masuk ke blog menggunakan akun sobat.
2. Setelah itu sobat pilih >> menu Tata Letak.
3. Kemudian klik >> Tambah Gadget.
4. Pilih >> HTML/JavaScript.
5. Isi kotak judul dengan judul gallery sobat, contoh My Foto Gallery.
6. Kemudian pada kotak Konten, Silahkan sobat masukkan semua kode Marquee di bawah ini.

<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()"><img src="alamat_gambar_sobat.jpg" width="120" height="70"></marquee>

Catatan:
  • Ganti alamat URL gambar "src" yang saya drag berwarna HIJAU pada kode script <img src="alamat_gambar_sobat.jpg" width="120" height="70"> dengan alamat URL gambar image sobat. Kalau belum mempunyai alamat gambar image, Silahkan upload dulu ke FhotoBucket, Picasa, dan lain sebagainya, Kemudian sobat ambil Alamat URL nya dan tempelkan pada tulisan yang saya drag berwarna HIJAU.
  • scrollamount="5" adalah Kecepatan Marquee atau image yang berjalan. Silahkan sobat atur nilai kecepatanya, Agar sesuai dengan keinginan sobat.
  • Kode "width" dan "height" adalah untuk mengatur ukuran lebar dan tinggi gambar image. Silahkan sobat atur nilainya agar sesuai dengan selera sobat.
  • Kode "up" adalah kode arah foto gambar image yang akan bergerak atau berjalan ke atas. Silahkan sobat ganti dengan "down" untuk arah ke bawah, Atau bisa juga diganti kode yang lainya, Agar sesuai dengan keinginan sobat.
  • Contoh diatas adalah hanya untuk satu gambar image foto saja. Jika sobat ingin lebih dari satu foto gambar image, Silahkan sobat tambah lagi kode script image tersebut sebanyak gambar image atau foto yang sobat inginkan.
Contoh penerapan kode script marquee yang tepat adalah seperti dibawah ini.


<marquee direction="up" onmouseover="this.stop()" scrollamount="5" onmouseout="this.start()">
<img src="alamat_gambar_1_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_2_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_3_sobat.jpg" width="120" height="70">
<img src="alamat_gambar_4_sobat.jpgwidth="120" height="70">
<img src="alamat_gambar_5_sobat.jpgwidth="120" height="70">
<img src="alamat_gambar_6_sobat.jpgwidth="120" height="70">
<img src="alamat_gambar_7_sobat.jpgwidth="120" height="70">
<img src="alamat_gambar_8_sobat.jpgwidth="120" height="70">
<img src="alamat_gambar_9_sobat.jpgwidth="120" height="70">
<!-- dan seterusnya..., SupPort By KUCOPAS -->  
</marquee>

7. Untuk menyimpan gadget yang baru sobat buat, Ikuti cara berikut ini.
  • Setelah semua kode marquee sudah sobat masukkan pada kotak Konten HTML/JavaScript, Silahkan sobat klik tombol >> Simpan.
  • Selesai dan lihat hasilnya.
Untuk mengetahui cara terbaru atau ter-update dan lebih dinamis, Sobat bisa lihat pada tutorial tentang Cara Membuat Widget Gallery Foto Gambar Image Bergerak Berjalan Di Blog.

Semoga artikel posting yang saya share ini, yaitu tentang Cara Membuat Gallery Foto Bergerak Di Blog atau Cara Membuat Foto Berjalan Di Blog, bisa sangat bermanfaat untuk sobat KUCOPAS semua.
thumbnail Title: Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog
Posted by:Ku Copas
Published :2012-03-19T19:07:00+07:00
Rating: 4.5
Reviewer: 7 Reviews
Cara Membuat Foto Dan Gambar Bergerak Slide Di Blog

Artikel Terkait:

Comments
9 Comments

9 comments:

  1. manteb infonya gan ,,,
    ane lagi cari2 kode yang kaya blog agan ,orang lari2 dari pojok kiri ke kanan...
    mohon pencerahanya..
    thanks ...

    ReplyDelete
  2. Amethe @ disini sudah ada caranya kox gan. namanya animasi berjalan.
    masuk saja di sini => http://kuc0pas.blogspot.com/2012/03/cara-buat-animasi-berjalan-di-blog-cara.html

    ReplyDelete
  3. Ok gan cakep informasinya, .....

    ReplyDelete
  4. @Lukmansh >> sama2 Newbie gan...

    @Eris >> Wokay jg gan... thx's dh berkunjung.

    @Kotiyai >> Makasih balik untuk kamu atas kunjungannya.

    ReplyDelete
  5. Mas brow, ane mau tanya...
    kemaren ane coba praktekan untuk membuat slide show pakai HTML.

    langkah, 1 dan 2 bisa, tapi ketika ane mau nempel langkah ke 3 ane ga nemukan kode div id='main-wrapper' udah pakai ctrl+f tapi adanya div id='hader-inner' giamana itu gan? minta bantuannya gan?

    ReplyDelete
    Replies
    1. Jika kode kode div id='main-wrapper' tersebut tidak ada, Sobat bisa pasang langsung pada Tata letak blog dengan cara seperti di atas sob...
      semoga membantu.

      Delete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger