DON'T LIKE ME

Penggunaan Efek Marque Untuk Image & Video

Penggunaan Efek Marque Untuk Image & Video

Posting kali ini menjelaskan bagaimana penerapan marquee pada image atau video. Kebetulan rekan blogger ada yang menanyakan hal ini kepada saya. Karena untuk menjelaskan via shoutmix terlalu panjang, maka saya putuskan untuk membuat posting agar bisa lebih jelas.

Misalkan kamu ingin membuat marquee seperti pada widget “New Collection” pada blog saya ini. Yang pertama-tama harus disiapkan adalah image/gambar yang akan digunakan. Misalkan gambar yang ingin saya gunakan adalah 2 gambar seperti di bawah ini:
strawberry myoffice
Url : <a href="http://www.flickr.com/photos/38080857@N06/3719338799/" title="strawberry by popowijaya, on Flickr"><img src="http://farm4.static.flickr.com/3525/3719338799_4d5009a07c_o.jpg" width="193" height="213" alt="strawberry" /></a>
Url : <a href="http://www.flickr.com/photos/38080857@N06/3719338793/" title="myoffice by popowijaya, on Flickr"><img src="http://farm3.static.flickr.com/2593/3719338793_fb871c32cc_o.jpg" width="193" height="213" alt="myoffice" /></a>

Simpan dulu ke dua gambar tersebut ke situs file hosting (situs penyimpanan file/gambar) seperti flickr, photobucket, atau situs file hosting lainnya. Kali ini saya menyimpannya di flickr. (Kamu bisa lihat cara menyimpan/meng-upload file/gambar ke flickr di sini).
Dari flickr, saya mendapatkan Url untuk kedua gambar tersebut seperti terlihat pada tabel di atas.
Sekarang yang harus dilakukan adalah memberikan link pada image/gambar tadi. Caranya anda tinggal mengganti kode Url yang berwarna biru dengan Url yang kamu inginkan, sebagai contoh saya menggantinya dengan Url posting dari blog saya, seperti di bawah ini:
<a href="http://allfreetips4u.blogspot.com/2009/07/blogger-template-strawberry.html"><img src="http://farm4.static.flickr.com/3525/3719338799_4d5009a07c_o.jpg" width="193" height="213" alt="strawberry" /></a>
dan

<a href="http://allfreetips4u.blogspot.com/2009/06/blogger-template-my-office.html"><img src="http://farm3.static.flickr.com/2593/3719338793_fb871c32cc_o.jpg" width="193" height="213" alt="myoffice" /></a>
Kamu tinggal memasang kode di atas di antara kode <marquee> … </marquee>.
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" width="100%" height="200" align="center">
<a href="http://allfreetips4u.blogspot.com/2009/07/blogger-template-strawberry.html"><img src="http://farm4.static.flickr.com/3525/3719338799_4d5009a07c_o.jpg" width="193" height="213" alt="strawberry" /></a> <br/>
<a href="http://allfreetips4u.blogspot.com/2009/06/blogger-template-my-office.html"><img src="http://farm3.static.flickr.com/2593/3719338793_fb871c32cc_o.jpg" width="193" height="213" alt="myoffice" /></a>
</marquee>

strawberry
myoffice
Bagaimana kalau yang ingin kamu marquee adalah video dari YouTube, sama saja caranya dengan di atas, hanya kita perlu mengcopy kode embed <object> dari video tersebut. Sebagai contoh saya menggunakan video berikut dengan kode embed <object> seperti di bawah ini:
<object width="212" height="172"><param name="movie" value="http://www.youtube.com/v/2rwPP-B-Qfc&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2rwPP-B-Qfc&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="212" height="172"></embed></object>
Nah, kamu tinggal masukkan kode di atas (warna merah) ke dalam kode marquee, seperti di bawah ini:
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" width="100%" height="200" align="center">
<object width="212" height="172"><param name="movie" value="http://www.youtube.com/v/2rwPP-B-Qfc&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2rwPP-B-Qfc&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="212" height="172"></embed></object>
</marquee>
Hasilnya adalah seperti di bawah ini:
Kamu bisa menambahkan sebanyak-banyaknya image ataupun video  untuk efek marquee ini, asalkan kode image/video berada di antara kode <marquee>…</marquee>
Mudah kan, selamat mencoba. Silakan kasih komen ya, mungkin ada kode yang saya salah tulis di atas.

By : Bang Udin
----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
TERIMAKASIH SUDAH BERKOMENTAR


Comments
0 Comments

0 komentar:

Posting Komentar