CARA MEMBUAT GAMBAR WIDGET BERGERAK PADA BLOG

Siapa yang tidak ingin memiliki blog yang keren,dan setiap blogger ingin menjadikan blognya menarik dan menambahkan tampilan gambar di blog dapat memperindah dan memperamai blog. Ketika ingin menambahkan gambar di blog secara biasa dapat dengan menambahkan gadget gambar. Namun ada keterbatasan, yaitu hanya satu gambar untuk setiap upload, sehingga apabila ingin menampilkan beberapa gambar dapat memakan ruang. Solusi untuk mengatasi masalah tersebut sebenarnya simpel yaitu dengan memanfaatkan fitur marquee (gerak). Fitur marquee yang biasanya digunakan pada teks saja kini juga dapat dilakukan untuk gambar. Hasilnya gambar dapat bergerak secara otomatis dan tidak terlalu memakan ruang yang banyak di blog.



Untuk menambahkan widget slide gambar bergerak caranya adalah sebagai berikut: 

1. Buka blogger.com dan login ke dalam akun blog Anda.
2. Pilih Tata Letak (Layout) blog.
3. Pilih Tambahkan Gadget (Add Gadget) > pilih > HTML/JavaScript.
4. Salin dan tempelkan kode script di bawah ini.
a
- untuk satu 1 gambar dalam 1 widget 
marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<img src="URL GAMBAR" width="100%" <height="100%" /></marquee>

-untuk beberapa gambar dalam satu widget 
<marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<img src="URL GAMBAR 1" width="100%" height="100%" /><br />
<img src="URL GAMBAR 2" width="100%" height="100%" /><br />
<img src="URL GAMBAR 3" width="100%" height="100%" /><br />
<img src="URL GAMBAR 4" width="100%" height="100%" /></marquee>

Keterangan:
a. Mengganti arah gerak gambar dapat dilakukan dengan mengubah: direction="up
silahkan anda rubah menjadi '' down "  "right" ataupun "left" sesuai keinginan arah gerak anda.
b. Menambahkan gambar dengan cara menganti URL GAMBAR dengan URL gambar animasi yang anda inginkan.
cara mendapatkan URL gambar dari google
-silahkan anda browser 
- kemudia ketik  cth:( " gambar animasi naruto")
 setelah anda mendapatkan animasi yang anda inginkan ,silahkan anda klik gambar tersebut lalu copy url image tersebut cth;(http://users1.ml.mindenkilapja.hu/users/saku-sasu/uploads/naruto_bunshin.gif)


- selanjutnya anda masukan url image tersebut pada url yang akan anda pasang di gadget blog anda atau di HTML/Javascript anda. 
contoh:
- untuk satu gambar dalam satu widget
 marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<imgsrc="http://users1.ml.mindenkilapja.hu/users/saku-sasu/uploads/naruto_bunshin.gif" width="100%" <height="100%" /></marquee>

-untuk beberapa gambar dalam satu widget
<marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<img src="URL GAMBAR 1" width="100%" height="100%" /><br />
<img src="URL GAMBAR 2" width="100%" height="100%" /><br />
<img src="URL GAMBAR 3" width="100%" height="100%" /><br />
<img src="URL GAMBAR 4" width="100%" height="100%" /></marquee>
 keterangan; untuk meletakan  beberapa gambar silahkan anda ganti URL GAMBAR 1,2,3,4  dengan url beberapa gambar  yang sudah anda pilih.

c. Lebar (Width) dan Tinggi (Height) dapat diubah sesuai selera anda. Jika 100% maka secara otomatis akan memenuhi batas widget

d, dan untuk scrollamount="4" adalah kecepatan slide gerak gambar tersebut jika anda ingin slide cepat anda tinggal ganti nomer 4 tersebut menjadi no: 5, 6 , 7
dan jika ingin slide nya agak lambat anda bisa ganti no 4 tersebut menjadi no: 3,2 ,1      

5. Klik Simpan (Save) >> Simpan Setelan untuk menampilkannya pada blog.

semoga bermanfaat, dan terima kasih sudah mengunjungi blog saya. 
Share this with short URL Get Short URLloading short url

Related posts

THE BEST ARTICLES


EmoticonEmoticon