Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog. Agar isi postingan lebih bervariatif dan bahkan bisa terlihat lebih hidup, maka pada gambar-gambar tertentu yang ada dalam blog dibuat dinamis.
Langkah-langkahnya seperti berikut:
- Silahkan sobat >> Masuk/Login ke Blogger.com menggunakan akun sobat.
- Pada Dasbor tampilan blogger baru, pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.
- Beri judul pada Widget, Contoh "My Foto Gallery". Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.
Scriptnya seperti ini
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtl6oHhjs-zO_VuEkhq-X43MjvRZA76UIpVEQObTGXWScD1iQBnsV4b3Rw4T28Up4YkunwNG-pftrP-jYR8R1uwJWH7Ynr2eB7YUuCaFSFSxtguaeB0cBX_BT4t6_HAQNFCad-WQv8nqx8/s1600/Foto024.jpg" width="120" height="120" /><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYz0HBn9COLNp92_zI1DdwbVYoNCc3EXKqpmPgB_FaZ8oaFUgQu2tdXSaAeDlzaAbSMWRAhuUBaPuThLlnlqpFuxfcdoGGWMYopNP-WRU8TnDKxoTjmy0t-3JovP1ZO2nC1lF_uguOoEX/s1600/Foto010.jpg" width="120" height="120" /><br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYz0HBn9COLNp92_zI1DdwbVYoNCc3EXKqpmPgB_FaZ8oaFUgQu2tdXSaAeDlzaAbSMWRAhuUBaPuThLlnlqpFuxfcdoGGWMYopNP-WRU8TnDKxoTjmy0t-3JovP1ZO2nC1lF_uguOoEX/s1600/Foto010.jpg" width="120" height="120" /></marquee>Hasilnya bisa dilihat pada SideBar pada saat mode Lihat Blog atau Pratinjau.
Keterangan:
- Warna Merah adalah Alamat URL gambar atau foto image. Silahkan sobat ganti dengan alamat URL gambar atau foto image sobat.
- Warna Biru, width="120" dan height="120" adalah ukuran Lebar dan Tinggi image gambar atau foto. Silahkan sobat atur nilainya sesuai dengan keinginan sobat agar sesuai dengan widget blog sobat.
- <marquee direction="up" adalah arah bergerak berjalan ke atas. Silahkan sobat ganti up jadi down jika ingin arah berjalan bergerak ke bawah.
Cara yang berikut ini adalah cara yang mudah dilakukan oleh para blogger mania, sebab cara ini hanya menambahkan beberapa kode saja. Namun agar sobat tidak kesulitan dalam menambahkan kode, disini akan saya kasih contoh penerapan kode yang benar. Berikut kode yang menggunakan alamat url link tujuan bila image gambar foto di klik
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtZKODZQZA_vXg39YHw1XzWnon6FhQjEgqeko7HU9KTB_cHJti6XAGr8ahONW8z43dPiIjs9ln7uaT291FMnrApUlAlDwfXxKkrzUuAnxQQ8Ze7XkAMXXGgcujUxPCnGbxnucumsh_Rs/s1600/PINK1.jpg" width="270" height="270" /></a><br /> <a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqx4ou1DPvlADwyJhWJes80rZTI0p_DxnBOokAk6xC-081tJymMwhGkmbD-iuFtGiLQm2kHj8fHAC62VWbcgfpwwRRf-g1g4rFew8vbBSINrgsx7nA5k_ju_AWGBu2qjj90MTgJoCDAw/s1600/HT3.jpg" width="270" height="270" /></a><br /> <a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbPCJlPF0umD6b_ASyrfuYnXFOVZ8mXhkB4s_g1HKXInYPRUD47ePlMlqYr-HXJye6YYnfaEkuL5lHMilVXkE6-5RJyCnYUeEVSnCghiy3wUEnV6QyuI28oW4ojhF7IOzoqN4KRxry40/s1600/sonal_chauhan.jpg" width="270" height="270" /></a></marquee>
Keterangan:
- Warna Hijau adalah Alamat Url tujuan bila image gambar foto di klik. Silahkan di ganti dengan alamat url tujuan sobat.
- Warna Orange adalah Title teks yang keluar jika Mouse pointer menyentuh gambar image foto pada gallery. Silahkan sobat ganti dengan title teks sesuai keinginan sobat.
- Kode yang saya berikan di atas adalah contoh untuk tiga gambar image foto saja. Sobat bisa menambahkan kode image-nya sesuai dengan keinginan sobat.
ARTIKEL TERKAIT
Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog
Artikel Terkait