If Canvas is Applied on Blogspot!!!

Awalnya cuman main-main dan baca-baca di web code snippet Code Snippets yang mungkin bila sobat mengacak-ngacak kode yg ada disana tidak akan habis dalam waktu 1 minggu =)) Mau cari apa ajah ada disana mah sob :-bd Karena kebanyakan tidak mengerti, yaaa baca² yg paham saja deh :D Nemuin script mengenai canvas :P Beben si bloglang anu ganteng kalem tea, kurang memahaminya :D Beberapa artikel mengenai canvas:

1. Canvas on W3school
2. Canvas article
3. Canvas article2
4. Etc...

Terus kan dapat script HTML Canvas 2D Context di snipplr. Heres script...

<script type='text/javascript'>
var context = document.getElementById('myCanvas').getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='http://YOUR-LINK-IMAGE.jpg';
img.onload = function () {
context.drawImage(this,0,0,585,235);
};
</script>

Tidak ada kerjaan, terus dipraktekin di basis blogspot ini :D Emang dasar enggak ada kerjaan ngoprek² sob :)) Beben letakin itu si script diatas/sebelum tag </body>

Terus dipanggil dengan menggunakan sedikit kode HTML! Awalnya saya masukin pada bagian postingan (yaaa kodenya aku posting saja sob) Ternyata yang terjadi, si background template ganti dengan gambar yg ada di script canvas ;)) Dan gambar background itu hanya akan tampak pada postingan itu saja :D Terus aku praktekan di HTML/Javascript Kalau dengan metode ini, setiap kali masuk ya ganti =)) (bingung???) =)) Terus aku modifikasi script dg kode bawaan blogspot :D menjadi seperti ini...

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var context = document.getElementById('myCanvas').getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='http://YOUR-LINK-IMAGE.jpg';
img.onload = function () {
context.drawImage(this,0,0,585,235);
};
//]]>
</script>
</b:if>

Kode HTML Beben masukin via Add a gadget ► HTML/Javascript.

Kode HTML

<canvas id="myCanvas" style="width:100%; height:100%; position:absolute;left:0px;top:0px;z-index:-1;"></canvas>Keterangan kode:

1. Warna merah.
ID sobat, jadi itu ID harus singkron dg yg ada di HTML
2. Warna biru.
Jika sobat mengurangi nominalnya, maka gambar akan ke kiri (mengecil), begitu sebaliknya.
3. Warna kuning.
Jika mengurangi nominalnya akan mengecilkan gambar ke atas, begitu juga sebaliknya.
4. Warna hijau terang.
Nominal yg mangatur tinggi hasil gambar, dan sebaiknya diganti dengan satuan pixel (px) Semakin besar resolusi, semakin besar tampak kebawah (sesuaikan deangan panjang postingan yg terpanjang)

Jadi jika kita memakai trik ini, walau gambar beresolusi kecil sekalipun, bisa dibuat jadi gede dengan mengatur kode2 yg berwarna itu b-) Script hasil modifan itu akan tampak pada postingan, dan tidak akan tampak di home.

Its my result, after add on my dummies blog. I'm used a picture with 590px×888px (scaled to 441px×665px)

UPDATE!!! Jika mau melihat lebih mengenai fitur HTML5 dipakai dalam blogspot, bisa satroni sobat kita Blogger Admin

Enjoy it and happy CANVAS \m/