En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Websiteleri için Flash Animasyonlu Etiket Bulutu Oluşturma

web siteleri icin flash animasyonlu etiket bulutu
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. Bu eklenti hem HTML websitelerinde, hemde bloggerda kullanılabilir. 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://meftunmede.github.io/javascripts/excanvas.js"></script>
<script type="text/javascript" src="http://meftunmede.github.io/javascripts/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://www.meftunmede.com" target="_blank"><img src="http://3.bp.blogspot.com/-LSJ3N520eUY/UA8cgERhjpI/AAAAAAAAAII/2Z2i4wCMD8w/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...

2 yorum:

  1. bu etiketleri alt alta mı eklemek lazım aynı kare içinde birden fazla etiket olması için
    nasıl aynı kutu içine ata biliyoruz

    YanıtlaSil
  2. Evet alt alta. <ul>...</ul> Kodları arasına. <li><a href="http://örnek.com/örnek.html" target="_blank">Örnek</a></li> gibi. 10 taneyse 10'unuda alt alta örnekteki gibi yazın. Kolay gelsin.

    YanıtlaSil

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

 
  • Meftun Apart

    Meftun Apart Fethiye

    Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

  • Meftun Mede Blogger

    MEDE Blogger Tema Yardım

    Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

  • Sitemap sayfası oluşturma

    Sitemap sayfası oluşturma

    Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

  • hit arttırma

    Sitenizin hitini arttırın!

    Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

  • internetten para kazan

    İnternetten para kazan !

    Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!