Bumerang - Yazarkafe

İmlecinizle Hareket Eden Animasyonlu Not

İmlecinize ışıltı vermeyi daha önce anlatmıştık şimdi ise imlec ile hareket eden mesaj yada notunuzu blogunuza eklemeyi anlatacağız.Örnek olarak blogunuza gelen ziyaretçi imleci hareket ettirdiğinde peşinden hoş geldiniz yazısı çıkacak.bu yazının rengini, tipini ve boyutunu da yaptığımız anlatımla kendinize göre düzenliyebileceksiniz.

İmlec efektini blogunuza eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşşağıdaki kodu kopyalayıp yapıştırıyoruz.
<!-- Start Gadget Code From http://www.blogokulu.blogspot.com/ -->
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "MESAJINIZI BURAYA YAZIN";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
<!--End Gadget Code From http://www.blogokulu.blogspot.com/ -->

KOD İÇERİSİNDE:
MESAJINIZI BURAYA YAZIN:Bu kısma imlec ile hareket eden yazınızı notunuzu yazabilirsiniz. 
color:#FF0080;Bu kodu değiştirerek imlec ile hareket eden yazının rengini değiştirebilirsiniz.Renk kodları için Tıklayın.
Başka değişiklik yapmak istediğiniz bir yer olursa yorumlar kısmından bize yazabilirsiniz.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

5 yorum:

  1. ÇOK EĞLENCELİ :) teşekkürler

    YanıtlaSil
  2. YA SIK KULLANILAN SİMGE NASIL RESİM EKLİCEZ KARE BİR RESİM DEĞİL DİYOR ,??

    YanıtlaSil
  3. SİLEMİYORUM NASIL SİLİCEM !! 
    http://blogokulu.blogspot.com/2012/03/animasyonlu-flash-etiket-bulutu.html 

    YanıtlaSil
  4. yazı boyutuyla oynayabiliyor muyuz?

    YanıtlaSil
  5. var size = 24; değerini değiştirerek yazı boyutunu değiştirebilirsiniz.

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...