15/05/11

Cara Manual Membuat Gallery Foto Bergerak Di Blogspot

Cara Manual Membuat Gallery Foto Bergerak Di Blogspot - Salam manis buat teman-teman bertuah sekalian. 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

75 comments:

Andi Putra mengatakan...

makasih gan infonya bermanfaat, ini bisa ane terapkan di blog ane...

Anonim mengatakan...

berhasil gan... thanx ya atas ilmunya... keep posting

nali.ivan mengatakan...

Thx atas Post nya gan..
Jgn Lupa ya Agan-Agan kungjungi blog gw: http://blognya-drabong.blogspot.com/

Bikin Web Super Murah mengatakan...

mksh bos ilmune

Rana Mulyana mengatakan...

Bagu Bagus...

stop keringat mengatakan...

Baru mo coba mas...
Mudah2an bisa yah...
Tx buat infonya...

RasiddiQ mengatakan...

makasih mas atas infonya..
jadi bisa tambah ilmu nih..hehe

Kenzhy Narziez mengatakan...

mau coba nie .
makasii mas broo

JimmyShow mengatakan...

izin copas mas brow

Tengku Daniel d'anfield-Gank Atjeh mengatakan...

silahkan datang ke blog saya ya...

Kumpulan berita-berita liverpool

Ariyanto sulistyo mengatakan...

mantap om ilmunya, ijin copas langsung praktek yaa

fbox mengatakan...

Salam kenal Om. Matap Tipsnx sya mau coba.trimaks atas infonx

Nick Belonk mengatakan...

Makasi gan scriptnya..
aku dah coba untuk iklan di blog ku..

StephensCrown mengatakan...

thx gan... hehehe,,, mantep.. maklum newbie nih.. :) hehehe... beloom ada yang datang berkunjung.... hehehe... follower masih kosong.. :D

Supriyadi Pro mengatakan...

Makasih infonya mas, langsung praketek.. he hee....

Community 78 mengatakan...

maap gan gagal, tolong bantu infonya web untuk upload photo, saya menggunakan flicker.
makasih.

waris mengatakan...

sippp. makasih infonya

bg mengatakan...

terimakasih infonya, buat saran aja sih.. kok contohnya nggak ada mas...

eliaya mengatakan...

makasih infonya...mmg ini yg saya cari-cari selama ini...

renovasi rumah mengatakan...

udah ane bukmak niy blog...pas bgt info yg ane cari buat blog ane...tx beraaat

agus KBM mengatakan...

nice post gan

Ristia Yuanita mengatakan...

Thanks for share

Hilmi Pw 01 mengatakan...

Ane bingung

Daily K Pop Star mengatakan...

Menarik untuk disimakk,,, tambahan ilmu blogging nihhh bro,,, thx infonya,,,

Catatan Ecka mengatakan...

Kok q cb ga keluar y foto-ny ??
Salah d mana y ??
pdhl dh copas n copy url dr picasa..

airvan42 mengatakan...

ini bisa bikin loading blog berat gak ya?soalnya dah lumayan berat nih blogku..

Arief mengatakan...

Mantep gan.... lanjutkan berbaginya..

udh ane follow tuh.. klo berkenan follow balik ya gan...

berita n Video Lucu
www.oritoranku.com

Download Film Bioskop mengatakan...

Tutorialnya Sangat berguna bagi Pemula.
Sukses Terus Gan.......

downno mengatakan...

thanks bro infonya.,. jangan lupa mampir ya ke sini www.unsri.ac.id

Nurul Mahmud mengatakan...

top markotop gan
mampir http://callygraphycenter.blogspot.com/

AGUS VEDIC mengatakan...

info yang sangat bagus,,saya lagi mau coba dulu. mudah2an saya berhasil, maklum baru belajar buat bloG. trima kasih ya..

PGRI Kabupaten Jember mengatakan...

copy URLnya gak bisa nampil, gmn Gan????

Blue Shark Editing Community mengatakan...

Gan gmn carax Buat foto sampul Blog Macam Blog tutorial macam foto yg di atas >>????

tutorial,ebook gratis,seo,software mengatakan...

mantap nich

Vita Indri Febriani mengatakan...

maaf, kok pas di pratinjau ga ada gambarnya yah :(

Indah Iswara mengatakan...

makasih infonya. sangat berguna =)

nurfi mengatakan...

thanks a lot! sy udah coba masukkan 2 gambar tapi kok cm 1 gambar yang muncul?

nakusan mengatakan...

keren banget infonya Bos... mksh n' salam kenal.

Herry_Information_Batam mengatakan...

gan mau nnyak nih...
knp gambarnya gak muncul nih gan...?
bisa lihat di blog gue,,herrykaliber.blogspot.com

cukibee mengatakan...

ntar q coba
mampir y diblog q www.cukibee.blogspot.com

Belajar Blogger mengatakan...

keren banget infonya Bos... mksh n' salam kenal.

DR_RINA&DIANI mengatakan...

caranya mengganti alamt gambarnya itu gimana???
kunjungi balik yaa,.di http://rinadianirmbi.blogspot.com
terimakasihh

hari wibowo mengatakan...

weh kok belum muncul ya gambarnya...

Marketing Bioklin Penguras WC tanpa sedot mengatakan...

Foto bucket apa, ko rada ribet juga ya, trim potingannya

Dwiky Aditya mengatakan...

ini nge bantu banget
makasih ya

DEDI mengatakan...

sudah saya coba dan ternyata berhasil...thanks y gan atas ilmunya..yang mau lihat silahkan cek di blog ane..http://sandal-sancu.blogspot.com/2012/02/katalog-sandal-sancu.html

@NauraSiSiwonest mengatakan...

menu tata letak tu dimana??

90animax mengatakan...

di buat contohnya jga dong gan:)

bahabol balinggama mengatakan...

cara masukkan gambar atau fotoku bagimana.????

mirah anugraheny mengatakan...

waahh Nice info... :)
Makasih ya informasi'y

jangan lupa mampir kesini ya..
http://quantamultimedia.com/

terimakasih ^_^

amoy ya annisaa mengatakan...

terimakasih buat informasinya :)

ita dwi mengatakan...

thank's banget ilmu ne,,
bermanfaat banget
jangan lupa mampir yak be blog ku :)

rahma mengatakan...

makasih infonya,,
aq udah coba tapi kok gambarnya g muncul yaa??? bisa kasih solusi...
silahkan kunjungi dan lihat blogq http://cobaajahlah.blogspot.com/
terimakasiiih :)

zone multimedia mengatakan...

Ilmu nya sangat bermanfaat.

siswapertamamultimedia.blogspot.com

Dontghost Mania mengatakan...

mantap gan

Rifqi Huwaidi mengatakan...

thanks ...

baida'i doi mengatakan...

kucoba dulu ya ghannnn
mg za berhasil
aminnnnnnnnnn

Anonim mengatakan...

GOOD,thank. Kompetensi tertinggi adalah "sharing".

LEK2PN DIKLAT mengatakan...

MANATAB, IJIN BUAT IMPLEMENTASI DI BLOGKU GAN.... MAMPIR2 DI LEK2PN.BLOGSPOT.COM

Anrhy Chipaz mengatakan...

bos cara sum gambarx bgaimna??????

Bembeng Oke mengatakan...

Makasih Kk Infonya... Jgn Lupa Mampir.
http://bembengmyblog.blogspot.com/

Andrey Dirga Frans Mahesa mengatakan...

maksudnya, alamat fotonya yg mana gan ?

Qorya mengatakan...

Thx ya artikelnya :)

acespedia mengatakan...

terimakasih jadi semangat bgeblog lagi saya

agen obat mengatakan...

terima kasih sob atas ilmunya

nuramalburga mengatakan...

thanks infonya

srinadihomestay mengatakan...

Wahhh hasilnya kayak gimana ya? ada demo nya?

Smk Aljauhar mengatakan...

GAGAL TOTAL GAN !!! TU GK BSA TAMPIL .

Trustproduction Surabaya mengatakan...

mantap ilmunya. mampir ke punya ane agan" sekalian. hhehe...
eotrust.blogspot.com
weddingtrust.blogspot.com
sbytravel.blogspot.com

Propolis Fillahey mengatakan...

Terima kasih Bro, saya telah berhasil tempelkan slider di blog saya, ada yg

1. Bisa up, down, right and left.
2. Bisa berhenti, kalo didekati kursor, fotonya membesar kalau diklik.
Jadi masih banyak kerjaan, karena sy harus kasih harga pada gbr2 brosur pake photo shop.

Sayang sy belum berhasil merubah tinggi jendelanya, agar lebih pendek, sehingga jadi segi empat.

Blog sy ; VILLAHELY TAS LAPTOP

ketik di google search n klik.
Masih berantakan

Propolis Fillahey mengatakan...

http://www.taslaptop-villahely.blogspot.com

Lathifa Awalina mengatakan...

thanks a lot... aku berhasil :D

Cyber Pagak mengatakan...

Ijin coba ya sob ??

Anonim mengatakan...

suwun kang ??badhe di coba???

Sigit Pamungkas mengatakan...

terimakasih kang??

Poskan Komentar

Silahkan Berkomentar disini...