Marquee In image

Marquee adalah sebuah tulisan yang dapat berjalan dari kiri ke kanan, kanan ke kiri, bawah ke atas, atau atas ke bawah. Sedangkan Image adalah gambar. Jadi Marque in image adalah sebuah tulisan yang berjalan di atas gambar.
Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.

Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar. Untuk contoh saja, alamat yang saya gunakan untuk contoh adalah sebagai berikut :

http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg

Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :


UNTUK TEMPLATE KLASIK
1. Sigin di blogger

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting

5. Copy paste kode berikut diatas kode <style>
#gambar {
background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */
height:300px; /* untuk mengatur tinggi gambar */
width:500px; /* untuk mengatur lebar gambar */
}

#tulisan {
font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */
font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */
color:#ffffff; /* ini kode warna untuk hurup */
}

Kemudian copy code berikut ini pada tempat yang anda inginkan.

<table border="10" cellpadding="3" height="135" width="500"/>
<tr>
<td>
<div id="gambar">


<div id="tulisan">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;>

Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.

</marquee>

</div>
</div>

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

Klik tombol simpan perubahan template dan lihat hasilnya.


UNTUK TEMPLATE BARU

1. Login ke blogger dengan ID anda.
2. Masuk ke menu Tata Letak (layout).
3. Kemudian masuk ke Tab Edit HTML.
4. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>.

#gambar {
background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */
height:300px; /* untuk mengatur tinggi gambar */
width:500px; /* untuk mengatur lebar gambar */
}

#tulisan {
font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */
font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */
color:#ffffff; /* ini kode warna untuk hurup */
}

5. Kemudian klik tombol Simpan Template.
6. Setelah selesai, klik Tab Elemen Halaman dan tambahkan widget.
7. Klik pada bagian HTML/Java Script.
8. Copy paste code berikut ini.

<table border="10" cellpadding="3" height="135" width="500"/>
<tr>
<td>
<div id="gambar">


<div id="tulisan">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;>

Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.

</marquee>

</div>
</div>

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

9. Klik tombol Simpan.
10. Kemudian Simpan dan lihat hasilnya.

Selamat mencoba�