Make Label/Category Use HTML5 Canvas Tag Cloud

Sebelumnya Koben mau kasih tau, jangan dipakai hack make error page 404 100% for blogger! Karena ternyata kode yang dihapusnya itu termasuk kode buat menampilkan label/kategori juga #-o Maaf maaf Koben tidak tahu :D Saya ngeuh ketika mempraktekan tutorial tentang HTML5 Canvas Tag Cloud.
Sebelumnya postingan label/catefory cloud for blogger with jQuery dan flash animated category/label cloud for blogger sama² menampilkan efek cloud-cloud :p Ada satu lagi deng label/kategori with cumulus technique :d
TagCanvas atau Tag Canvas merupakan JavaScript dimana hasil tampilan akan berupa cloud serta berbasis tag HTML5.

Canvas Tag Cloud kreasi goat1000 terdapat 2 versi, versi pertama yaitu tagcanvas murni javascript & tagcanvas plugin jQuery versi. Koben disini akan berbagi cara bagaimana memasukan tag-canvas jQuery plugins version ke dalam blog!
Langkah pertama yang musti dilakuin adalah Download Full Template. Selanjutnya Expand Widget Templates
Kemudian download script jquery.tagcanvas.js version 1.11.1 or [Minified] pilih salah satu saja!
Letakkan script hasil download dibawah jQuery inti, atau bisa juga diatas/sebelum tagging </body>
Template dalam keadaan Expand, carilah kode berikut<b:widget id='Label1' locked='false' title='Labels' type='Label'>

demo

Kode tersebut merupakan code label pada blogger. Jadi jika sobat belum punya widget label/category buat dulu sana. Karena tutorial berikut berjalan jika ada itu :)) Bila sudah ketemu letakkan syntax HTML berikut<canvas height='300' id='myCanvas' width='300'>tepat diatas code<b:if cond='data: display == &quot;list&quot;'>

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data: display + &quot;-label-widget-content&quot;'>
<canvas height='300' id='myCanvas' width='300'>
 <b:if cond='data: display == &quot;list&quot;'>
   <ul>
   <b: loop values='data: labels' var='label'>
     <li>
. . .  . . .  . . .

Scroll kebawah temukan kembali kode </b:includable> Masukan tag penutup canvas berikut </canvas>

. . .  . . .  . . .
        <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data: label.count/> )</span>
        </b:if>
      </span>
    </b: loop>
  </b:if>
</canvas>
  <b:include name='quickedit'/>
</div>
</b:includable>

Langkah² diatas sudah dilakukan maka saatnya memasukan script pemanggil. Letakinnya ya tepat dibawah kalian menyimpan script jquery.tagcanvas.js

/**
* Copyright (C) 2010-2011 Graham Breach
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* jQuery.tagcanvas 1.11.1
* For more information, please contact <graham@goat1000.com>
*/
(function(D){var L,K,C=Math.abs,p=Math.sin,g=Math.cos,x={},y={},z={0:"0,",1:"17,",2:"34,",3:"51,",4:"68,",5:"85,",6:"102,",7:"119,",8:"136,",9:"153,",a:"170,",A:"170,",b:"187,",B:"187,",c:"204,",C:"204,",d:"221,",D:"221,",e:"238,",E:"238,",f:"255,",F:"255,"},d,E,c,h=document;for(L=0;L<256;++L){K=L.toString(16);if(L<16){K="0"+K}y[K]=y[K.toUpperCase()]=L.toString()+","}function H(i){return typeof(i)!="undefined"}function l(W){var j,V,R,Q,U=[],S=Math.PI*(3-Math.sqrt(5)),T=2/W;for(j=0;j<W;++j){V=j*T-1+(T/2);R=Math.sqrt(1-V*V);Q=j*S;U.push([g(Q)*R,V,p(Q)*R])}return U}function O(S,Q,X,W,V,U){var Y,Z=[],T=Math.PI*(3-Math.sqrt(5)),R=2/S;for(X=0;X<S;++X){W=X*R-1+(R/2);Y=X*T;V=g(Y);U=p(Y);Z.push(Q?[W,V,U]:[V,W,U])}return Z}function u(i){return O(i)}function B(i){return O(i,1)}function m(T,i){var S=T,R,Q,j=(i*1).toPrecision(3)+")";if(T[0]==="#"){if(!x[T]){if(T.length===4){x[T]="rgba("+z[T[1]]+z[T[2]]+z[T[3]]}else{x[T]="rgba("+y[T.substr(1,2)]+y[T.substr(3,2)]+y[T.substr(5,2)]}}S=x[T]+j}else{if(T.substr(0,4)==="rgb("||T.substr(0,4)==="hsl("){S=(T.replace("(","a(").replace(")",","+j))}else{if(T.substr(0,5)==="rgba("||T.substr(0,5)==="hsla("){R=T.lastIndexOf(",")+1,Q=T.indexOf(")");i*=parseFloat(T.substring(R,Q));S=T.substr(0,R)+i.toPrecision(3)+")"}}}return S}function f(i,j){if(window.G_vmlCanvasManager){return null}var Q=h.createElement("canvas");Q.width=i;Q.height=j;return Q}function t(){var j=f(3,3),R,Q;if(!j){return false}R=j.getContext("2d");R.strokeStyle="#000";R.shadowColor="#fff";R.shadowBlur="3";R.globalAlpha=0;R.strokeRect(2,2,2,2);R.globalAlpha=1;Q=R.getImageData(2,2,1,1);j=null;return(Q.data[0]>0)}function P(X,j){var Q=1024,T=X.weightGradient,S,V,R,W,U;if(X.gCanvas){V=X.gCanvas.getContext("2d")}else{X.gCanvas=S=f(Q,1);if(!S){return null}V=S.getContext("2d");W=V.createLinearGradient(0,0,Q,0);for(R in T){W.addColorStop(1-R,T[R])}V.fillStyle=W;V.fillRect(0,0,Q,1)}U=V.getImageData(~~((Q-1)*j),0,1,1).data;return"rgba("+U[0]+","+U[1]+","+U[2]+","+(U[3]/255)+")"}function s(T,S,Q,W,U,V,j){var R=(V||0)+(j&&j[0]<0?C(j[0]):0),i=(V||0)+(j&&j[1]<0?C(j[1]):0);T.font=S;T.textBaseline="top";T.fillStyle=Q;U&&(T.shadowColor=U);V&&(T.shadowBlur=V);j&&(T.shadowOffsetX=j[0],T.shadowOffsetY=j[1]);T.fillText(W,R,i)}function k(aa,U,Y,Z,T,Q,W,X,j){var R=Z+C(j[0])+X+X,i=T+C(j[1])+X+X,S,V;S=f(R,i);if(!S){return null}V=S.getContext("2d");s(V,U,Q,aa,W,X,j);return S}function J(U,X,Y,R){var S=U.width+C(R[0])+Y+Y,j=U.height+C(R[1])+Y+Y,V,W,T=(Y||0)+(R&&R[0]<0?C(R[0]):0),Q=(Y||0)+(R&&R[1]<0?C(R[1]):0);V=f(S,j);if(!V){return null}W=V.getContext("2d");X&&(W.shadowColor=X);Y&&(W.shadowBlur=Y);R&&(W.shadowOffsetX=R[0],W.shadowOffsetY=R[1]);W.drawImage(U,T,Q);return V}function F(ac,U,aa){var ab=parseInt(ac.length*aa),T=parseInt(aa*2),R=f(ab,T),X,j,S,W,Z,Y,Q,V;if(!R){return null}X=R.getContext("2d");X.fillStyle="#000";X.fillRect(0,0,ab,T);s(X,aa+"px "+U,"#fff",ac);j=X.getImageData(0,0,ab,T);S=j.width;W=j.height;V={min:{x:S,y:W},max:{x:-1,y:-1}};for(Y=0;Y<W;++Y){for(Z=0;Z<S;++Z){Q=(Y*S+Z)*4;if(j.data[Q+1]>0){if(Z<V.min.x){V.min.x=Z}if(Z>V.max.x){V.max.x=Z}if(Y<V.min.y){V.min.y=Y}if(Y>V.max.y){V.max.y=Y}}}}if(S!=ab){V.min.x*=(ab/S);V.max.x*=(ab/S)}if(W!=T){V.min.y*=(ab/W);V.max.y*=(ab/W)}R=null;return V}function r(i){return"'"+i.replace(/(\'|\")/g,"").replace(/\s*,\s*/g,"', '")+"'"}function w(i,j,Q){Q=Q||h;if(Q.addEventListener){Q.addEventListener(i,j,false)}else{Q.attachEvent("on"+i,j)}}function I(R,Q,j){if(R.complete){Q.w=R.width;Q.h=R.height;j.push(Q)}else{jQuery(R).bind("load",function(){Q.w=this.width;Q.h=this.height;j.push(Q)})}}function v(Q,j){var i=1,R;if(Q.weightFrom){i=1*(j.getAttribute(Q.weightFrom)||Q.textHeight)}else{if(h.defaultView&&h.defaultView.getComputedStyle){R=h.defaultView.getComputedStyle(j,null).getPropertyValue("font-size");i=R.replace("px","")*1}else{Q.weight=false}}return i}function G(S){var R,Q,j=h.documentElement,T;for(R in q.tc){Q=q.tc[R];T=D(Q.canvas).offset();if(S.pageX){Q.mx=S.pageX-T.left;Q.my=S.pageY-T.top}else{Q.mx=S.clientX+(j.scrollLeft||h.body.scrollLeft)-T.left;Q.my=S.clientY+(j.scrollTop||h.body.scrollTop)-T.top}}}function o(R){var j=q,i=h.addEventListener?0:1,Q=R.target&&H(R.target.id)?R.target.id:R.srcElement.parentNode.id;if(Q&&R.button==i&&j.tc[Q]){G(R);j.tc[Q].Clicked(R)}}function N(Q){var i=q,j=Q.target&&H(Q.target.id)?Q.target.id:Q.srcElement.parentNode.id;if(j&&i.tc[j]){Q.cancelBubble=true;Q.returnValue=false;Q.preventDefault&&Q.preventDefault();i.tc[j].Wheel((Q.wheelDelta||Q.detail)>0)}}function n(){var Q=q.tc,j;for(j in Q){Q[j].Draw()}}function b(Q,i){var j=p(i),R=g(i);return{x:Q.x,y:(Q.y*R)+(Q.z*j),z:(Q.y*-j)+(Q.z*R)}}function a(Q,i){var j=p(i),R=g(i);return{x:(Q.x*R)+(Q.z*-j),y:Q.y,z:(Q.x*j)+(Q.z*R)}}function M(R,X,W,U,S,j){var i,T,V,Q=R.z1/(R.z1+R.z2+X.z);i=X.y*Q;T=X.x*Q;V=R.z2+X.z;return{x:T,y:i,z:V}}function e(i){this.ts=new Date().valueOf();this.tc=i;this.x=this.y=this.w=this.h=this.sc=1;this.z=0}d=e.prototype;d.Update=function(i,U,j,Q,T,R){var S=this.tc.outlineOffset;this.x=T*(i-S);this.y=T*(U-S);this.w=T*(j+S*2);this.h=T*(Q+S*2);this.sc=T;this.z=R.z};d.Draw=function(Q){var j=new Date().valueOf()-this.ts,i=this.tc;Q.setTransform(1,0,0,1,0,0);Q.strokeStyle=i.outlineColour;Q.lineWidth=i.outlineThickness;Q.shadowBlur=Q.shadowOffsetX=Q.shadowOffsetY=0;if(i.pulsateTo<1){Q.globalAlpha=i.pulsateTo+((1-i.pulsateTo)*(0.5+(g(2*Math.PI*j/(1000*i.pulsateTime))/2)))}else{Q.globalAlpha=1}Q.strokeRect(this.x,this.y,this.w,this.h)};d.Active=function(Q,i,j){return(i>=this.x&&j>=this.y&&i<=this.x+this.w&&j<=this.y+this.h)};function A(j,T,R,S,Q,V){var W=j.ctxt,U;this.tc=j;this.image=T.src?T:null;this.name=T.src?"":T;this.a=R;this.p3d={x:S[0]*j.radius*1.1,y:S[1]*j.radius*1.1,z:S[2]*j.radius*1.1};this.x=this.y=0;this.w=Q;this.h=V;this.colour=j.textColour;this.weight=this.sc=this.alpha=1;this.weighted=!j.weight;this.outline=new e(j);if(this.image){if(j.txtOpt&&j.shadow){U=J(this.image,j.shadow,j.shadowBlur,j.shadowOffset);if(U){this.image=U;this.w=U.width;this.h=U.height}}}else{this.textHeight=j.textHeight;this.extents=F(this.name,j.textFont,this.textHeight);this.Measure(W,j)}this.SetShadowColour=j.shadowAlpha?this.SetShadowColourAlpha:this.SetShadowColourFixed;this.SetDraw(j)}E=A.prototype;E.SetDraw=function(i){this.Draw=this.image?(i.ie>7?this.DrawImageIE:this.DrawImage):this.DrawText};E.Measure=function(U,j){this.h=this.extents?this.extents.max.y+this.extents.min.y:this.textHeight;U.font=this.font=this.textHeight+"px "+j.textFont;this.w1=U.measureText(this.name).width;if(j.txtOpt){var R=j.txtScale,S=R*this.textHeight,T=S+"px "+j.textFont,Q=[R*j.shadowOffset[0],R*j.shadowOffset[1]],i;U.font=T;i=U.measureText(this.name).width;this.image=k(this.name,T,S,i,R*this.h,this.colour,j.shadow,R*j.shadowBlur,Q);if(this.image){this.w=this.image.width/R;this.h=this.image.height/R}this.SetDraw(j);j.txtOpt=this.image}};E.SetWeight=function(i){this.weight=i;this.Weight(this.tc.ctxt,this.tc);this.Measure(this.tc.ctxt,this.tc)};E.Weight=function(R,Q){var j=this.weight,i=Q.weightMode;this.weighted=true;if(i=="colour"||i=="both"){this.colour=P(Q,(j-Q.min_weight)/(Q.max_weight-Q.min_weight))}if(i=="size"||i=="both"){this.textHeight=j*Q.weightSize}this.extents=F(this.name,Q.textFont,this.textHeight)};E.SetShadowColourFixed=function(Q,j,i){Q.shadowColor=j};E.SetShadowColourAlpha=function(Q,j,i){Q.shadowColor=m(j,i)};E.DrawText=function(R,V,Q){var W=this.tc,T=this.x,S=this.y,U,j,X=this.sc,i=this.outline;R.globalAlpha=this.alpha;R.setTransform(X,0,0,X,0,0);R.fillStyle=this.colour;W.shadow&&this.SetShadowColour(R,W.shadow,this.alpha);R.font=this.font;U=this.w1*X;j=this.h*X;T+=1+(V/X)-(U/2);S+=1+(Q/X)-(j/2);R.fillText(this.name,T,S);i.Update(T,S,this.w1,this.h,X,this.p3d);return i.Active(R,W.mx,W.my)?i:null};E.DrawImage=function(T,X,S){var Y=this.tc,V=this.x,U=this.y,Z=this.sc,j=this.outline,Q=this.image,W=this.w,R=this.h;T.globalAlpha=this.alpha;T.setTransform(Z,0,0,Z,0,0);T.fillStyle=this.colour;Y.shadow&&this.SetShadowColour(T,Y.shadow,this.alpha);V+=(X/Z)-(W/2);U+=(S/Z)-(R/2);T.drawImage(Q,V,U,W,R);j.Update(V,U,W,R,Z,this.p3d);return j.Active(T,Y.mx,Y.my)?j:null};E.DrawImageIE=function(T,X,S){var Y=this.tc,Q=this.image,Z=this.sc,j=this.outline,W=Q.width=this.w*Z,R=Q.height=this.h*Z,V=(this.x*Z)+X-(W/2),U=(this.y*Z)+S-(R/2);T.globalAlpha=this.alpha;T.drawImage(Q,V,U);j.Update(V,U,W,R,1,this.p3d);return j.Active(T,Y.mx,Y.my)?j:null};E.Calc=function(S,R){var i=a(this.p3d,S),j=this.tc,T=j.minBrightness,Q=j.radius;this.p3d=b(i,R);i=M(j,this.p3d,this.w,this.h,Math.PI/4,20);this.x=i.x;this.y=i.y;this.sc=(j.z1+j.z2-i.z)/j.z2;this.alpha=Math.max(T,Math.min(1,T+1-((i.z-j.z2+Q)/(2*Q))))};E.Clicked=function(S){var j=this.a,Q=j.target,R=j.href,i;if(Q!=""&&Q!="_self"){if(self.frames[Q]){self.frames[Q]=R}else{if(top.frames[Q]){top.frames[Q]=R}else{window.open(R,Q)}}return}if(j.fireEvent){if(!j.fireEvent("onclick")){return}}else{i=h.createEvent("MouseEvents");i.initMouseEvent("click",1,1,window,0,0,0,0,0,0,0,0,0,0,null);if(!j.dispatchEvent(i)){return}}h.location=R};function q(){var j,Q={mx:-1,my:-1,z1:20000,z2:20000,z0:0.0002,freezeActive:false,pulsateTo:1,pulsateTime:3,reverse:false,depth:0.5,maxSpeed:0.05,minSpeed:0,decel:0.95,interval:20,initial:null,hideTags:true,minBrightness:0.1,outlineColour:"#ffff99",outlineThickness:2,outlineOffset:5,textColour:"#ff99ff",textHeight:15,textFont:"Helvetica, Arial, sans-serif",shadow:"#000",shadowBlur:0,shadowOffset:[0,0],zoom:1,weight:false,weightMode:"size",weightFrom:null,weightSize:1,weightGradient:{0:"#f00",0.33:"#ff0",0.66:"#0f0",1:"#00f"},txtOpt:true,txtScale:2,frontSelect:false,wheelZoom:true,zoomMin:0.3,zoomMax:3,zoomStep:0.05,shape:"sphere",lock:null};for(j in Q){this[j]=Q[j]}this.max_weight=0;this.min_weight=200}c=q.prototype;c.Draw=function(){var Y=this.canvas,W=Y.width,Q=Y.height,j=0,V=this.yaw,R=this.pitch,S=W/2,ab=Q/2,Z=this.ctxt,U,aa,X,ac=this.taglist,T=ac.length;Z.setTransform(1,0,0,1,0,0);this.active=null;for(X=0;X<T;++X){ac[X].Calc(V,R)}ac=ac.sort(function(ad,i){return ad.sc-i.sc});if(!this.txtOpt&&this.shadow){Z.shadowBlur=this.shadowBlur;Z.shadowOffsetX=this.shadowOffset[0];Z.shadowOffsetY=this.shadowOffset[1]}Z.clearRect(0,0,W,Q);for(X=0;X<T;++X){aa=ac[X].Draw(Z,S,ab);if(aa&&aa.sc>j&&(!this.frontSelect||aa.z<=0)){U=aa;U.index=X;j=aa.sc}}if(this.freezeActive&&U){this.yaw=this.pitch=0}else{this.Animate(W,Q)}U&&(this.active=U).Draw(Z)};c.Animate=function(V,S){var Q=this,U=Q.mx,T=Q.my,j=Q.lock,X,W,R,i;if(U>=0&&T>=0&&U<V&&T<S){X=Q.maxSpeed,i=Q.reverse?-1:1;if(j!="x"){this.yaw=i*((X*2*U/V)-X)}if(j!="y"){this.pitch=i*-((X*2*T/S)-X)}this.initial=null}else{if(!Q.initial){X=Q.minSpeed,W=C(this.yaw),R=C(this.pitch);if(j!="x"&&W>X){this.yaw=W>Q.z0?Q.yaw*Q.decel:0}if(j!="y"&&R>X){this.pitch=R>Q.z0?Q.pitch*Q.decel:0}}}};c.Zoom=function(i){this.z2=this.z1*(1/i)};c.Clicked=function(R){var i=this.active,Q=this.taglist;try{if(i&&Q[i.index]){Q[i.index].Clicked(R)}}catch(j){}};c.Wheel=function(j){var Q=this.zoom+this.zoomStep*(j?1:-1);this.zoom=Math.min(this.zoomMax,Math.max(this.zoomMin,Q));this.Zoom(this.zoom)};q.tc={};jQuery.fn.tagcanvas=function(Q,j){var i,R=j?jQuery("#"+j):this;if(h.all&&!j){return false}i=R.find("a");if(H(window.G_vmlCanvasManager)){this.each(function(){D(this)[0]=window.G_vmlCanvasManager.initElement(D(this)[0])});Q.ie=parseFloat(navigator.appVersion.split("MSIE")[1])}if(!i.length||!this[0].getContext||!this[0].getContext("2d").fillText){return false}this.each(function(){var U,S,W,Z,aa,V,Y,X=[],T={sphere:l,vcylinder:u,hcylinder:B};j||(i=D(this).find("a"));V=new q;for(U in Q){V[U]=Q[U]}V.z1=(19800/(Math.exp(V.depth)*(1-1/Math.E)))+20000-19800/(1-(1/Math.E));V.z2=V.z1*(1/V.zoom);V.radius=(this.height>this.width?this.width:this.height)*0.33*(V.z2+V.z1)/(V.z1);V.yaw=V.initial?V.initial[0]*V.maxSpeed:0;V.pitch=V.initial?V.initial[1]*V.maxSpeed:0;V.canvas=D(this)[0];V.ctxt=V.canvas.getContext("2d");V.textFont=r(V.textFont);V.ctxt.textBaseline="top";if(V.shadowBlur||V.shadowOffset[0]||V.shadowOffset[1]){V.ctxt.shadowColor=V.shadow;V.shadow=V.ctxt.shadowColor;V.shadowAlpha=t()}else{delete V.shadow}V.taglist=[];V.shape=T[V.shape]||T.sphere;S=V.shape(i.length);for(U=0;U<i.length;++U){W=i[U].getElementsByTagName("img");if(W.length){Z=new Image;Z.src=W[0].src;aa=new A(V,Z,i[U],S[U],1,1);I(Z,aa,V.taglist)}else{V.taglist.push(new A(V,i[U].innerText||i[U].textContent,i[U],S[U],2,V.textHeight+2))}if(V.weight){Y=v(V,i[U]);if(Y>V.max_weight){V.max_weight=Y}if(Y<V.min_weight){V.min_weight=Y}X.push(Y)}}if(V.weight=(V.max_weight>V.min_weight)){for(U=0;U<V.taglist.length;++U){V.taglist[U].SetWeight(X[U])}}q.tc[D(this)[0].id]=V;w("mousemove",G,this);w("mouseout",G,this);w("mouseup",o,this);if(V.wheelZoom){w("mousewheel",N,this);w("DOMMouseScroll",N,this)}j&&V.hideTags&&R.hide();Q.interval=Q.interval||V.interval});return !!(q.started||(q.started=setInterval(n,Q.interval)))}})(jQuery);

jQuery Script Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#myCanvas').tagcanvas({
textColour : '#000',
outlineColour : '#555',
textHeight: 15,
shadow: '#FF0',
shadowBlur: 3,
depth: 0.59
});
});
//]]>
</script>

Untuk option script bisa dilihat pada web sumber :D Good luck :)
Happy Canvas Tag Cloud \m/