UP DATE: November 2011

Senin, 28 November 2011

cara buat banner berjalan

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:

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.

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 :

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

cara buat gambar berjalan

Foto Yang berjalan di blog memang sangat menarik untuk dilihat . bagaimana cara membuatnya ? yupz.. Dalam postingan kali ini saya akan menerangkan bagaimana cara membuat foto berjalan di blog . Sama seperti teks yang berjalan gambar yang berjalan ini juga menggunakan efek dari marquee . langsung ajah yach kita praktek .hehehehe
Ikuti langkah-langkah berikut untuk membuat gambar berjalan di blog

Copy Paste kode berikut ke blog anda :

<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" height="130" width="190" />
 
<img src="http://farm5.static.flickr.com/4046/4273351371_7c1ceb936b_o.jpg"height="130" width="190" />

</marquee>
</td>
</tr>
</table>

Hasilnya Adalah sebagai berikut :

Keterangan ganti link yang berwarna biru dengan link tempat anda menaruh gambar, contohnya saja gambar yang anda taro di flickr.com .

Membuat Gambar berjaln Dari kiri ke kanan

Copy paste kode berikut ke blog anda :
<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >

<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" width="190" height="130" />

</marquee>

Hasilnya Adalah sebagai berikut :

Selamat mencoba.......

cara buat tex atau gambar berjalan

Cara Membuat Teks atau Gambar Berjalan di Blog

Cara sederhana untuk membuat teks atau gambar berjalan adalah dengan menggunakan kode html marquee. Cukup sederhana cara membuatnya, hanya menambahkan <marquee> di awal teks/gambar dan ditutup dengan </marquee>.

Contohnya :

<marquee>Cara Membuat Teks atau Gambar Berjalan di Blog</marquee>

Cara Membuat Teks atau Gambar Berjalan di Blog

Itu adalah teks berjalan. Bagaimana jika gambar berjalan?
Cukup mudah kok......

Kodenya seperti ini :

<marquee> <img src="isi dengan url gambar kamu"/></marquee>
<marquee> <img src="http://3.bp.blogspot.com/_xw6Gw8ZECTA/TPsSc1TbBjI/AAAAAAAAAMM/OCJaL1j5sdI/s1600/blogspot_icon.png"/></marquee>

Selain itu, dapat diubah arah pergerakannya juga, seperti ke atas, bawah, kiri, atau kanan. Kodenya seperti ini : <marquee direction=left>
Arah left bisa diganti dengan up atau down atau right.

Contoh :
<marquee direction=up>Cara Membuat Teks atau Gambar Berjalan di Blog</marquee>
Cara Membuat Teks atau Gambar Berjalan di Blog

Jika mau seperti yang ada di sidebarku (BLOGKU), ini kodenya :
*scrollamount="2", 2 menandakan kecepatan berjalan.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" height="200" width="100%">

<a style="font-weight: bold;" href="http://adspublisher.fadlifirmansyah.com/" target="_blank">ADS PUBLISHER</a>
 

<a style="font-weight: bold;" href="http://masnafood.blogspot.com/" target="_blank">MASNAFOOD</a>
 

<a style="font-weight: bold;" href="http://fadfir-virwol.blogspot.com/" target="_blank">FADFIR VIRWOL</a>
 

<a style="font-weight: bold;" href="http://thetruth-reveals.blogspot.com/" target="_blank">FIND THE TRUTH</a>
 

<a style="font-weight: bold;" href="http://agricultural-industry-technology.blogspot.com/" target="_blank">AGROINDUSTRY</a>
 

<a style="font-weight: bold;" href="http://fadlidiary.blogspot.com/" target="_blank">FADLI DIARY</a>
 

</marquee>