Websiteleri için Flash Animasyonlu Etiket Bulutu Oluşturma

Bugün Blogger için Flash Animasyonlu Etiket Bulutu Oluşturma adlı yazımda çok sorulan websitemde nasıl bunu kullanabilirim sorusuna bu konuyla cevap verecem. TagCanvas etiket bulutu websiteleriniz için HTML 5 flash animasyonlu etiket bulutu yaratır. TagCanvas bir JavaScript sınıfı HTML5 Canvas Etiket Bulutudur. LGPL v3 lisansı altında açık kaynak olarak serbestdir. Dilerseniz anlatıma geçelim.

<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/excanvas.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/tagcanvas.js"></script>
<script type="text/javascript"> 
//<![CDATA[
var oopts = {
textFont: 'Impact,Arial Black,sans-serif',
textHeight: 20,
maxSpeed: 0.1,
decel: 0.9,
depth: 0.99,
outlineColour: '#f6f',
outlineThickness: 3,
pulsateTo: 0.2,
pulsateTime: 0.5,
wheelZoom: false
}, ttags = 'taglist', lock, shape = 'sphere';
window.onload = function() {
TagCanvas.textFont = 'Trebuchet MS, Helvetica, sans-serif';
TagCanvas.textColour = '#000';
TagCanvas.textHeight = 15;
TagCanvas.outlineColour = '#FA7029';
TagCanvas.maxSpeed = 0.03;
TagCanvas.minBrightness = 0.2;
TagCanvas.depth = 0.92;
TagCanvas.pulsateTo = 0.6;
TagCanvas.initial = [0.1,-0.1];
TagCanvas.decel = 0.98;
TagCanvas.reverse = true;
TagCanvas.hideTags = false;
TagCanvas.shadow = '#ccf';
TagCanvas.shadowBlur = 3;
TagCanvas.weight = false;
TagCanvas.imageScale = null;
TagCanvas.fadeIn = 1000;
try{TagCanvas.Start('tagcanvas','taglist');TagCanvas.Start('smallCanvas','moreTags',oopts);f('options')}catch(e){document.getElementById('cmsg').style.display='none';document.getElementsByTagName('canvas')[0].style.border='0'}};function BGImage(e){document.getElementById('tagcanvas').style.backgroundImage=(e.checked?'url(images/canvas_bg1.png)':'none')}function f(a){TagCanvas.Start('otherCanvas',a,oopts);return false}function restart(){TagCanvas.shape=shape;TagCanvas.lock=lock;TagCanvas.Start('tagcanvas',ttags)}function changetags(t){ttags=t;restart()}function changeshape(s){var locks={hcylinder:'x',vcylinder:'y',hring:'x',vring:'y',sphere:''};lock=locks[s]||'';shape=s;TagCanvas.initial=(lock=='x'&&[0,0.2])||(lock=='y'&&[0.2,0])||[0.2,0.2];restart()}function tpu(s){document.getElementById('sout').innerHTML=s.innerHTML;return false}
//]]>
</script>
<canvas id="tagcanvas" width="250" height="250"></canvas>
<div style="display: none">
<div id="taglist">
<ul>
<li><a href="Buraya etiket linkiniz" target="_blank">Etiket adı</a></li>
<li><a href="http://örnek.com/örnek.html" target="_blank">Örnek</a></li> 
</ul>
</div>
</div>

Yukarıdaki kodu kendi isteğinize göre özelleştirerek websitenizde kullanabilirsiniz.

Özelleştirme:

TagCanvas.textFont = Yazı fontunuzu ayarlayın.
TagCanvas.textColour = Yazı rengi
TagCanvas.textHeight = Yazı boyutu
TagCanvas.outlineColour = Yazı çerçevesi rengi
width="250" : Flash etiket bulutunuzun genişliği
height="250" : Flash etiket bulutunuzun yüksekliği

Eğer isim yerine resim, logo gibi görseller kullanmak istiyosanız, <ul>...</ul> kodları arasını aşağıdaki gibi uygulayın.
Örnek:

<li><a href="Buraya etiket linkiniz" target="_blank"><img src="Buraya resim linkiniz" border="0" title="Resmin/bağlantının ismi" alt="Resmin/bağlantının ismi" width="Resmin genişliği" height="Resmin yüksekliği"/></a></li>
<li><a href="http://MeftunMede.Blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9NdQ6615yopspfEwi2vrl8nHXCVSqyBaIzwxaeM-DQSxPFD0htPqLGrIVvbgQcLAAKvYkUbzuBS16FCIPliTlFC3_0Esg32Bta_mYj532V8evVhImnbtCEQgnhV7xOEvoZEkKlK71149/s1600/Angel-MEF.png" border="0" title="Meftun LOGO" alt="Meftun LOGO" width="80" height="15"/></a></li>
<li><a href="http://Blogger.com" target="_blank"><img src="http://img2.blogblog.com/img/b36-rounded.png" border="0" title="Blogger LOGO" alt="Blogger LOGO" width="80" height="15"/></a></li>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. Kolay gelsin...