Javascript Window dengan Animasi

Kata yang lebih familiar di telinga atau di pandangan mata ketika kita menelusuri tutorial demi tutorial adalah javascript pop-up window, dimana javascript ini berfungsi untuk membuka sebuah alamat (URL) dalam sebuah window baru yang berukuran dibawah ukuran normalnya (mini). Beberapa pop-up window dilengkapi dengan perubah ukuran (width dan height) serta sebuah scroller.

Window dengan animasi tidak jauh berbeda dengan pop-up window. Yang membedakan keduanya hanya pada bentuk animasi saat window terbuka dan ukurannya saja. Window dengan animasi akan langsung terbuka dalam ukuran normal/penuh (satu halaman). Jika sampeyan ingin memanfaatkan window dengan animasi ini, javascript bisa disimpan di bawah kode/tag pembuka <head>. Tak banyak script yang harus disimpan. Sampeyan bisa menyimpannya langsung atau dengan cara meng-upload-nya terlebih dahulu di file hosting.

Bagaimana cara kerja window animasi?


Window dengan animasi bekerja ketika sebuah link dibuka atau di klik oleh pengunjung. Sesaat setelah klik maka pada ujung sebelah atas-kiri akan mulai terlihat sebuah window baru dengan ukuran kecil dan secara perlahan membesar memenuhi halaman blog. Window ini kemudian akan memperlihatkan website, blog atau situs yang URL-nya tercantum dalam link yang dibuka. Menggambarkan bentuk sebenarnya dari animasi yang tercipta pastilah akan sulit untuk membuat sampeyan mengerti secara penuh. Yah ... akan lebih baik dan lebih menarik serta lebih "nyos" jika sekalian buka "DEMO-nya". Silahkan klik link DEMO berikut dan bandingkan javascript window ini dengan yang lain!

D E M O

Cara Menggunakan Javascript Window dengan Animasi


  • Login ke Blogger.
  • Setelah menuliskan Email Address, Password dan KLIK "Login", maka halaman "Dasboard (Dasbor)" akan terlihat. KLIK "Design/Rancangan".
  • KLIK "Edit HTML".
  • KLIK "Download Full Templates/Download Template Lengkap" untuk back-up templates.
  • Simpan file template di folder PC.
  • Kembali ke "Edit HTML" dan cari kode <head>.
  • copy-paste javascript di bawah kode <head>.
  • KLIK "SAVE Templates/Simpan Template".

Posisi Penempatan Javascript


Menggunakan javascript secara langsung


Posisi Menyimpan Javascript:
<head>

<script type="text/javaScript">
//<![CDATA[
//http://www.dynamicdrive.com - Animated Window- By Rizwan Chand
function expandingWindow(website) {
var windowprops='width=100,height=100,scrollbars=yes,status=yes,resizable=yes'
var heightspeed = 1; // vertical scrolling speed (higher = slower)
var widthspeed = 1; // horizontal scrolling speed (higher = slower)
var leftdist = 10; // distance to left edge of window
var topdist = 10; // distance to top edge of window
if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}
//]]>
</script>

Menggunakan javascript berbentuk link


Posisi Menyimpan Javascript:
<head>

<script src='https://sites.google.com/site/gubhugreyot/javascript/animatedwindow.js' type='text/javascript'></script>

xHTML Window dengan Animasi


xHTML
<a href="#" onClick="expandingWindow('http://gubhugreyot.blogspot.com');return false">gubhug reyot</a><br>

<form>
<input type="button" value="gubhug reyot" onClick="expandingWindow('http://gubhugreyot.blogspot.com')">
</form>

Silahkan gunakan salah satu bentuk kode atau keduanya.

Gunakan xHTML tersebut di bagian body antara tag pembuka <body> dan tag penutup </body>, sperti misalnya di posting atau melalui Add a Gadget/Tambah Gadget.

Keterangan/Catatan:
  • Rubah URL yang berwarna oranye dengan URL baru yang akan dibuka melalui window.
  • Link dapat berbentuk teks, image/gambar atau button.
  • Animasi akan bekerja sempurna di Mozilla Firefox, Safari dan Google Chrome.
  • Link yang berupa teks (gubhug reyot yang berwarna kuning) dapat dirubah dalam bentuk link gambar. Title dapat juga ditambahkan di dalamnya. Sebagai pembanding lihat kode baru di bawah ini yang link-nya berupa gambar serta telah ditambahkan sebuah title.

xHTML:
<a href="#" onClick="expandingWindow('http://gubhugreyot.blogspot.com');return false"  title="KLIK di sini dan anda akan melihat sebuah window baru dengan animasi terbuka"><img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/GambarFloating_gubhugreyot.gif" style="float:left;width:269px;height:126px;border:3px solid #888;padding:3px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background:#666;margin:0 10px 5px 0;" /></a>

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




Update » Ngahad Pahing, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment