Breffing dari STIKUBANK

Halal Bi Halal Keluarga Besar YPN Pati

Cara Pasang Banner Berjalan di Blogspot

 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:

Hasilnya bisa dilihat seperti di bawah ini:

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

Kode:

Hasil:

  

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

Kode:

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.

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 :

Keterangan :

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

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

Demikian ulasan saya tentang memasang banner berjalan di blogspot. semoga apa yang saya sampaikan di atas bisa membantu anda semuanya.sebuah alamat URL baik itu postingan artikel dan lain-lain.

Jika banner pada sebuah blog semakin banyak tentu ini akan menjadi sesuatu yang rancu, perlu dilakukan manage banner. Cara yang satu ini dapat digunakan untuk memanage banner karna dapat menampilkan banyak banner dalam satu deretan atau sekedar membuat banner Anda menjadi terlihat mencolok karna trik ini akan membuat banner bergerak secara bolak balik dan hanya akan berhenti jika disorot oleh kursor mouse.

Langkah – langkahnya sebagai berikut :
1. Masuk pada akun Blogger Anda
2. Pilih Rancangan >> Elemen Laman >> Tambah Gadget pada tempat yang diinginkan
3. Pilih HTML / JavaScirpt
4. Pastekan kode berikut :

<marquee align="center" behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="340 px">
<a href="URL Tujuan Gambar 1" target="_blank"><img border="0" height="80" src="URL Gambar Banner 1" width="130" /></a>
<a href="URL Tujuan Gambar 2" target="_blank"><img border="0" height="80" src="URL Gambar Banner 2" width="130" /></a>
<a href="URL Tujuan Gambar 3" target="_blank"><img border="0" height="80" src="URL Gambar Banner 3" width="130" /></a>
<a href="URL Tujuan Gambar 4" target="_blank"><img border="0" height="80" src="URL Gambar Banner 4" width="130" /></a>
<a href="URL Tujuan Gambar 5" target="_blank"><img border="0" height="80" src="URL Gambar Banner 5" width="130" /></a>
</marquee><div style="font-size: 8px; text-align: right;"><a href="http://rinkosamani.blogspot.com/2012/06/cara-membuat-banner-berjalan.html" target="_blank">Widget by Rinko-Samani</a></div>

5. Ganti :
1.width="340 px" ganti 340 menjadi total lebar banner Anda
2.height="80" ganti 80 menjadi tinggi banner Anda
3.width="130" ganti 130 menjadi lebar persatu banner Anda
4.URL Tujuan Gambar ganti menjadi alamat URL yang dituju oleh gambar
5.URL Gambar Banner ganti menjadi alamat URL gamabr banner yang akan tampil
6.Setelah semuanya selesai Simpan tanpa memberikan judul widget dan lihat hasilnya
Selamat Mencoba & Happy Blogging