Minggu, Januari 10, 2010

Cara membuat banner berjalan di blog (gambar berjalan)

Mungkin ada diantara teman-teman yang ingin membuat banner berjalan di blog,atau jika punya gambar kesayangan mungkin bisa buat gambar berjalan di blog, bisa juga jika punya foto maka membuat foto berjalan di blog. Anda bisa menempatkan banner, gambar, atau foto tersebut di dalam postingan atau di disebar (gadget html/javascript). Prosedur atau cara buat banner berjalan hampir sama dengan cara buat teks berjalan (marquee)

Ada beberapa tahap yang harus anda lakukan,
1. Upload gambar dari komputer ke situs layanan image hosting gratis seperti tinypic,photobucket,dll (dalam contoh ini kita menggunakan tinpyc)
2. Buat kode banner di blog

Langkah detail untuk membuat :
1. Buka situs tinypic image hosting , login dengan email dan password tinypic anda kemudian upload gambar dari komputer ke tinypic
(Jika belum punya account anda bisa daftar dengan klik tombol Sign up)



Klik Browse, pilih gambar di komputer , klik Upload Now


Anda akan mendapatkan link gambar yang sudah diupload (Gunakan link yang ada di : Direct link for layouts)
Dalam contoh ini kita menggunakan 3 banner dengan link berikut:

http://i49.tinypic.com/2n7pmwx.jpg
http://i46.tinypic.com/214umau.jpg
http://i48.tinypic.com/208vejc.jpg
 atau:
http://i46.tinypic.com/s2zbjr.jpg
http://i47.tinypic.com/2u4sheu.jpg
http://i48.tinypic.com/2502hjc.jpg


2. Login ke dasboard blogger, buat entri baru atau add gadget html/javascript
Masukkan kode berikut:

Contoh 1: Gambar 1 buah, bergerak dari kanan ke kiri,
Anda bisa mengatur tinggi dan lebar gambar , dalam contoh ini:
a. width="200" lebar gambar 490 sesuaikan dengan gambar anda
b. height="360" lebar gambar 360 sesuaikan dengan gambar anda

Kode:
<marquee behavior="scroll" direction="left" scrollamount="3" width="200" height="360"><img src="http://i51.tinypic.com/2ujgzmh.jpgg" />
</marquee>

Hasilnya bisa dilihat seperti di bawah ini:



Contoh 2, jika gambarnya lebih dari satu, bergerak dari kanan ke kiri

Kode:
<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <span style="padding: 5px;"> <img src="http://i46.tinypic.com/214umau.jpg"/> </span> <span style="padding: 5px;"> <img src="http://i48.tinypic.com/208vejc.jpg"/></span></marquee>

Hasil:



Contoh 3: jika gambarnya bergerak secara vertikal , untuk mengubah bergerak dari atas ke bawah , ganti direction="up" menjadi direction="down"

Kode:
<marquee behavior="scroll" direction="up" scrollamount="3" width="490" height="360"><img src="http://i49.tinypic.com/2n7pmwx.jpg"/> <br> <img src="http://i46.tinypic.com/214umau.jpg"/><br><img src="http://i48.tinypic.com/208vejc.jpg"/><br>
</marquee>

Hasil







Silahkan dicoba...masukkan kode di atas ke dalam teks editor blogger atau ke gadget html, sesuaikan lebar dan tinggi sesuai dengan gambar/banner anda.

Selain cara di atas, anda juga bisa menggunakan website penyedia layanan pembuatan slidshow gratis, di situs tersebut banyak menyediakan skin, efek,animasi ,bahsannya bisa dilihat di postingan saya tentang cara membuat slideshow
contohnya bisa dilihat di bawah ini



 Update 28 Januari 2011
Agar saat gambar banner di klik dapat membuka halaman tertentu maka perlu ditambahkan script ke dalam kode htmlnya bisa dilihat di bawah ini :
Misalkan url gambar yang saya gunakan  : http://i51.tinypic.com/2ujgzmh.jpg

Maka scriptnya bisa diubah menjadi :

<marquee behavior="scroll" direction="left" scrollamount="3" width="490" height="360"> <a href="http://artikelkomputerku.blogspot.com/" target="_blank"> <img src="http://i51.tinypic.com/2ujgzmh.jpg" /></a></marquee>

Keterangan :
Ganti : http://artikelkomputerku.blogspot.com/ dengan url target yang diinginkan

hasilnya seperti di bawah ini, jika banner di klik akan membuka sebuah halaman baru :



Beberapa postingan lain yang membahas tentang panduan membuat blog bisa dilihat disini cara membuat blog





Artikel Terkait :



64 komentar:

suci mengatakan...

artikel menarik,,

mw tanya kak,klo mw buat banner animasi gitu kemana ya? yang bisa kerlap kerlip gituu..saya pengen tpi gak ngerti

Artikel Komputerku mengatakan...

Mungkin di postingan berikut ini bisa membantu
Cara membuat slideshow di blog

andryawal mengatakan...

Artikel yg bagus bagi yg baru belajar bikin blog seperti saya ini...
hehehe....
Salam.

sonson (Sebuah Catatan) mengatakan...

Bagus Sekali Postingannya, jadi nambah ilmu nih
makasih

toez mengatakan...

thanks berat boz, sdh saya coba dan sudah jalan, ilmu nya manfaat banget nih buat saya yg lg coba bikin blog. pengen coba-cobain yg laen tp satu yg jadi udah seneng bgt, thks boz. klo ada waktu tengok2 blog saya boz sekalian kasih saran

mediabeasiswa mengatakan...

menarik, tapi berat sekali, loading nya lama

Nusrotussa'adah mengatakan...

thanks banget ilmunya. maju terus ....

EPULJAPANESE mengatakan...

Wah bagus eung......... maksih.

RikaArdiansyah mengatakan...

makasih.........banget bos artikelnya ok punya!!
sekarang aku udah jadi programer handal nomor wahid dikampung ane!!he......he............

BPTPH CIGANITRI mengatakan...

kang saya mau pesan srip seperti ini giman, infokan ke sumber.hayati@yahoo.com

budi mengatakan...

matur nuwun ...
tolong kunjungi blog ku yach...

komandan mengatakan...

thanks udh mo share ilmunya

Banner berjalan disertai link mengatakan...

Akhirnya bisa juga,,makasih

Download Ebook Gratis | cara-blog | kumpulan bisnis online mengatakan...

mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

Ipunk mengatakan...

Tengkyu boss tutorialnya ... kalau tertarik bisnis ptc mampir aja di blog saya dijamin lengkap.....!!!

dan waktu anda di depan komputer tidak terbuang sia-sia ..>!!!

http://ptcgemilang.tk/

Ipunk mengatakan...

Tengkyu boss tutorialnya ... kalau tertarik bisnis ptc mampir aja di blog saya dijamin lengkap.....!!!

dan waktu anda di depan komputer tidak terbuang sia-sia ..>!!!

http://ptcgemilang.tk/

ardhy selalu mengatakan...

wah sangat menarik dan membantu sekali buat saya yg pemula ^_^

sri mengatakan...

kalau membuat banner bisa dipasang disetiap akhir artikel yang kita buat gimana yah? mohon bantuannya. tq

Anonim mengatakan...

kalo link saya gimana tuh
kalo ada yg mengklik banner tersebut,
mengarah ke link kita....
kaya web/blog...
temen-temen......
tolong yua....
terimakasih

Artikel Komputer mengatakan...

@sri
Cara membuat banner bisa dipasang disetiap akhir artikel postingan, Coba dilihat jawabannya disini Cara memasang banner di bawah posting blog secara otomatis
@Anonim
Silahkan di cek postingan di atas di bagian akhir sudah ada contoh banner yang saat di klik akan membuka sebuah halaman baru

mira mengatakan...

salam kenal sob. backlink punyaku ya. punyamu dah ku pasang di www.sutikno.com sob. thanks

save-ny mengatakan...

thx bgt nich gan....jadi mantap lah blog saya

Undangan Menjadi Penulis Tamu mengatakan...

Wahhhh OK banget nih. Patut dicoba. Tapi bisa diterapkan untuk blog wordpress nggak ya....
Oh ya...Kawan-kawan yang berminat untuk menjadi penulis tamu di blog butut saya silahkan berkunjung.

Riau Culture mengatakan...

bos, kalau mau ngasih teks dibawah foto gimana? macam di www.kompas.com. gambar berjalan trus ada singkatan beritanya sedikti? Thanks ya..

tokoperak mengatakan...

oo begitu ya xaranya? langsung seddot makasih masss,salam kenal

shop wedding rings mengatakan...

udah tak pasng koq malah baneernya gak keluarya mas? yg keluar malah hurufnya duank

crowjagarichu mengatakan...

Tks gan..

Afzalu mengatakan...

lagi nyari yang bisa berhenti bentar di tiap gambar nich... ada yang tau???

Hanifa Free Download mengatakan...

makasih infonya sob
udah aku follow follback ya sob

SepatuGaya mengatakan...

bOS, TERIMAKASIH ATAS INFORMASINYA

SepatuGaya mengatakan...

Terimakasih atas pencerahannya sob, semoga bermanfaat juga buat yang lain

www.pasarayaonline.com
www.sepatuoriginal.com

ibnu99 mengatakan...

nice info gan ..muantabbb dicoba dulu nihh

Anonim mengatakan...

wah bagus banget blognya mas...thank tutorny?penduduk baru ak masih serba bingung jadinya klik sana sini...

sprei anak mengatakan...

thaks mas, baru ngerti sekarang

Ndunk mengatakan...

Wah Wah Wah . . . Top markotop Gan Artikelnya . . . Izin praktek Gan di blog Ane . . . Boleh ye hehehe :D
Ane follow dah Blog Agan . . .

Salam kenal Gan http://anakbrb.blogspot.com

Yundha Zuliztya mengatakan...

salam,
ijin baca, ijin coba, ijin tanya nanti.
wassalam

La Ode mengatakan...

mas gimana kalau banner berjalan di percepat

La Ode mengatakan...

mas gimana kalau banner berjalan di percepat

Libas Habis mengatakan...

wah terimakasih.. sangat benar bermanfaat bagi ane nih om..

STAMP & PROMOTION mengatakan...

terima kasih atas ilmunya...
sangat bermanfaat....

cara dapat uang gratis di internet mengatakan...

Bagus nech artikenya gan...

kalau boleh tanya gimana caranya pasang banner bergerak pada website?

kalau artikenya di update terus bolehkan saya main lagi ke sini gan...

Mantap... Sukses

Aron Prabowo mengatakan...

Luarbiasa Sahabat!!! I so Thx 4 u'r artikel about "cara membuat foto bergerak" di blogspot.
Salam Sukses Sahabat

komentar ini didukung oleh:
http://aronprabowo.blogspot.com

Pa Anang mengatakan...

makasih gan infonya,sangat bermanfaat sekali buat saya...

papera wallcovering mengatakan...

Slidenya kok ga bisa ke tengah ya mas bro..
gmna caranya yah?

kursi lipat mengatakan...

ane dah coba gan hasilnya mantafh uy!`thanks

IPPMP-MS mengatakan...

Cobain ya MAs....

Lukman Hakim mengatakan...

layak dicoba,,,!!!nice share gan!!

Harun Ar mengatakan...

Mantab Mas.... Thanks banget...

SERBA GRATISAN mengatakan...

MASTAH,MANTAB SEKALI KAU PUNYA BLOG kAWAN....TERGILA-GILA AKU DIBUATNYA....

Anonim mengatakan...

thanx bro.... sangat bermanfaat

Rudy Hartono mengatakan...

mantab sob

nuzil mengatakan...

thanx mas bro infonx..
masih bisa di pakaikan trik ini buat tahun 2012 ??

smartpulsa-88 mengatakan...

Tks Gan atas ngilmunya,
salam sukses

smartpulsa-88 mengatakan...

Tks Gan bagi ngilmunya...
Salam Sukses

BALTAZAR ONLINE mengatakan...

Terima kasih atas ilmunya.
Sangat bermanfaat untuk saya.

Klasik Books mengatakan...

Terima kasih atas ilmunya.
Sangat bermanfaat untuk saya.

media informasi mengatakan...

mantab artikelnya jd nambah ilmu mator suwon gan.

HaikalAdlan mengatakan...

makasih banget

anda ingin tahu mengatakan...

bagus ka blognya

pondoklukman mengatakan...

keren gan tutorialnya mudah dimengerti.

fortuner suv terbaik mengatakan...

Wah, mantap tutorialnya, kalau mau bikin gambar flash pakai apa ya mas??

wann sury mengatakan...

from malaysia....nice blogging

Khuncen mengatakan...

nice share nih gan,,,mohon kunjungannya sekalian kasih masukan buat saya yang masih pemula,,,,tks
sabeckey.blogspot.com

toing mengatakan...

info yang bermanfaat sekali, makasih gan