Mengatur atau Membuat Tinggi dan Lebar Marquee Effect

Sekalipun tidak banyak kode yang diperlukan untuk membuat sebuah marquee effect, namun sampeyan bisa menambahkan beberapa kode baru hingga tampilan marquee effect bisa lebih afdol (menarik). Selain effect onmouseover dan onmouseout, sampeyan bisa melengkapinya dengan padding, border, border-radius, background serta beberapa kode lain yang disesuaikan dengan hasil yang diinginkan. Bagaimana mengatur tinggi dan lebar marquee effectt? Untuk menambahkan tinggi dan lebar, sampeyan bisa memanfaatkan height dan width, atau dengan kode lain serti padding. Penggunaan padding akan lebih memudahkan saat kita ingin membuat teks pada marquee effect tepat ditengah-tengah (center pada posisi vertical). Dibawah ini adalah contoh marquee effect yang menggunakan padding guna memudahkan penataan obyek dalam tag marquee.

Terima kasih atas kunjungan anda !!!!

Marquee effect bisa juga dimanfaatkan untuk menampilkan text dan gambar secara bersamaan.

Terima kasih atas kunjungan anda !!!!

Atau jika hanya akan menampilkan gambar, maka bentuknya akan seperti ini:

Kode yang digunakan untuk ke-3 marquee effects di atas adalah :

<marquee direction="left" width="400" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style="margin:15px auto;padding:15px 6px;font-size:16px;color:blue;text-shadow:1px 1px 1px #000;background:#9999ff;border:2px solid #993300;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-family:Cataneo BT;">Terima kasih atas kunjungan anda !!!!</marquee>

<marquee direction="left" width="400" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style="margin:15px auto;padding:20px 10px 30px;font-size:32px;font-weight:normal;color:blue;text-shadow:1px 1px 1px #000;background:#9999ff;border:2px solid #993300;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-family:Cataneo BT;"><img src="http://i39.tinypic.com/mvhp1j.gif" style="height:32px;width:40px;" />Terima kasih atas kunjungan anda !!!!</marquee>

<marquee direction="left" width="200" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style="padding:10px 6px;background:#9999ff;border:2px solid #993300;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;margin:15px auto;"><img src="http://i39.tinypic.com/mvhp1j.gif" style="height:70px;width:90px;" /></marquee>

Apabila akan digunakan kode height, anda bisa juga menambahkan dalam bentuk kode seperti ini:

<marquee direction="left" width="400" height="30" scrollamount="2" style="margin:15px auto;padding:5px 6px;font-size:22px;color:blue;text-shadow:1px 1px 1px #000;background:#9999ff;border:2px solid #993300;font-family:Arial;">Terima kasih atas kunjungan anda !!!!</marquee>

Dengan hasil seperti ini:Terima kasih atas kunjungan anda !!!!Cara yang lain adalah dengan menggunakan tag DIV.

Contoh:

<div style="height:40px;width:80%;margin:5px 10px;"><marquee direction="left" scrollamount="4"><span style="font-size:27px;padding:7px 5px;color:red;">Terima kasih atas kunjungan anda !!!!</span></marquee></div>

Terima kasih atas kunjungan anda !!!!

Kode pembentuk marquee Effect seperti terlihat di atas bisa sampeyan kembangkan sendiri dalam berbagai bentuk variasi kode hingga diperoleh hasil sesuai keinginan. Semua kode HTML di atas bisa digunakan dengan menempatkan di bagian body atau melalui Page Elements, Add Gadget, HTML/Javascript kemudian simpan kode HTML marquee effect dalam dalam box yang tersedia. Bagaimana detail caranya? Silahkan sampeyan buka Special Tutorials yang ada di sebelah kiri blog. Di dalamnya ada panduan cara melakukan penambahan kode HTML melalui Add a Gadget --> HTML/Javascript. Pada marquee effect yang menggunakan tag DIV seperti terlihat pada contoh terakhir, width dalam nilai %. Anda dapat merubahnya dalam satuan px jika diinginkan (misalnya 400px atau yang lain).

Akan lebih baik jika sampeyan juga membuka tutorial tentang marquee effect yang lain dengan klik link di bawah ini:

Other Marquee Effext Tutorial

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «