Cara Buat dan Pasang Page peel di Blogger Template Designer

Sekalipun page peel dapat dibuat dengan beberapa javascript, namun kali ini kita akan membuatnya dengan javascript yang paling sederhana. Bukan tanpa sebab jika javascript ini menjadi sangat simpel. Dua buah file flash (.swf) membuat semuanya menjadi terasa lebih praktis dan mudah. Anda hanya perlu membuat semua elemen pendukung page peel dalam ukuran yang tepat agar page peel yang didalamnya menggunakan fungsi iframe ini dapat ditampilkan secara sempurna.

Javascript page peel

Javascript:

var GRppeel = new Object();
GRppeel.ad_url = escape('http://gubhugreyot.blogspot.com');
GRppeel.small_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf';
GRppeel.small_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif');
GRppeel.small_width = '195';
GRppeel.small_height = '195';
GRppeel.small_params = 'ico=' + GRppeel.small_image;
GRppeel.big_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf';
GRppeel.big_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg');
GRppeel.big_width = '650';
GRppeel.big_height = '650';
GRppeel.big_params = 'big=' + GRppeel.big_image + '&ad_url=' + GRppeel.ad_url;
function sizeup987(){
document.getElementById('GRbigpeel').style.top = '0px';
document.getElementById('GRsmallpeel').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("GRsmallpeel").style.top = "0px";
document.getElementById("GRbigpeel").style.top = "-1000px";
}
GRppeel.putObjects = function () {
document.write('<div id="GRsmallpeel" style="position:absolute;width:'+ GRppeel.small_width +'px;height:'+ GRppeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRsmallpeelObject" width="'+GRppeel.small_width+'" height="'+GRppeel.small_height+'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.small_path +'?'+ GRppeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+GRppeel.small_params+'"/>');
document.write('<embed src="'+ GRppeel.small_path + '?' + GRppeel.small_params +'" name="GRsmallpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.small_width +'" height="'+ GRppeel.small_height +'" flashvars="'+ GRppeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
document.write('<div id="GRbigpeel" style="position:absolute;width:'+ GRppeel.big_width +'px;height:'+ GRppeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRbigpeelObject" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.big_path +'?'+ GRppeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ GRppeel.big_params +'"/>');
document.write('<embed src="'+ GRppeel.big_path + '?' + GRppeel.big_params +'" id="GRbigpeelEmbed" name="GRbigpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'" flashvars="'+ GRppeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
setTimeout('document.getElementById("GRbigpeel").style.top = "-1000px";',1000);
}
GRppeel.putObjects();

Anda dapat melakukan percobaan terlebih dahulu dengan javascript yang sudah dilengkapi dengan 2 (dua) buah file flash (.swf) dan 2 (dua) buah image ini dengan cara mengupload terlebih dahulu di file hosting (di google sites atau google code). Bentuk javascript setelah diupload akan menjadi seperti berikut:

Link Javascript Page peel:

<script src="page-peel.js" type="text/javascript"></script>

Data file flash dan image yang harus diupload:

- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg

Catatan/Keterangan:

1. Jika diperlukan anda dapat membuat gambar page peel sendiri berdasarkan ukuran image gubhugreyot-img-whynot-75x75.gif dan gubhugreyot-img-whynot.jpg.
2. Buat image dengan ukuran yang sama dengan kedua gambar di atas.
3. Simpan link javascript page-peel.js di atas tag </head> atau di bawah tag <body>

Tutorial lengkap cara membuat Page peel