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...
