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:
 |  |
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>
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>
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 :
- Cara membuat link berkedip ketika cursor melintas
- Cara Membuat Effect Snow Atau Tabur Salju Di Blog
- Cara Intalasi Windows Seven ( 7 ) Lengkap
- Code Rahasia Semua Type Handphone Lengkap
- Kode BenQ Siemens
- Kode Akses Nokia dengan berbagai tipe
- Kode Akses Sony Ericsson
- Kode Akses Nokia
- Kode Rahasia LG
- Kode Rahasia Samsung
- Kode Rahasia Umum Phonsel Java Dan Symbian
- Cara Daftar Dan Merubah Domain Blogspot Ke .CO.TV
- Cara Membuat Cursor Bertabur Bintang
- Cara Daftar Blog Ke Google
- Cara Pasang Meta Tag Di Blogger SEO Friendly
- Cara Memasang Share Pack (Share Post To Social Boo...
- Cara memasang sharing is sexy di blogspot
- Cara Membuat Taskbar Ato Toolbar Melayang Di Blog
- Cara Membuat Shoutmix Tersembunyi
- Cara Membuat Link Warna - Warni Pelangi Di Blog
- cara memasang meta tag
- Cara pasang video di blog
- Cara Membuat Link Berkedip Warna Warni
- Tempat Ganti Code Warna
- Cara Menu Tab View di Samping
- Cara Membuat Tulisan / text Berkedip
- Cara Membuat Menu Melayang
- Efek Marquee untuk Banner Berjalan
- Salam Pembuka Sesuai Dengan Settingan Waktu
- Mengganti Icon Blogger
- Cara membuat addres bar berjalan
Anda sedang membaca artikel berjudul 
0 Comments
