Mouse hareketlerine baloncuklar ekle

Hayirli sabahlar guzel dostlarim..oncelikle header altina menu nasil eklenir postumu dun yayinlayamadigim icin evvela tatli arkadasim Bilgenin gemisi'nden ardindan da bekleyip de postun bir turlu yayina girmedigini gorup uzulen dostlarimdan ozur dilemek istiyorum..
Blogumdaki degisiklerden de izleyenlerim icin bir kac soz eklemek sart gibi gorunuyor..fikirleriniz benim icin onemlidir daima..
Daha once yayinlarimi ozetli bir sekilde sergiliyordum..bu gun postlarimi acmaya karar verdim..size gore hangi sekil daha kullanisli dostlarim?..Lutfen belirtirseniz cok sevinirim..

Gecelim bugunku sirin eklentimize..
An itibari ile bloguma girdiginizde dikkatinizi cekti mi bilmem ama mouse hareketlerinde pembe baloncuklar havalanmaya basliyor :)
Bu guzelligi bloglariniza eklemek isteyeceginizi dusundum..
Cogu kez ozelden kullandigim ozellik ve eklentilere dair sorular ve talepler almaktayim..eminim buna da talep gelecektir..dolayisiyla siz istemeden vermek istedim..

Su sekilde ekleyecegiz..

Kumanda panelimizden Yerlesim diyerek karsimiza cikacak olan tablodan Gadget ekle'ye tiklayip icindeki pencerede bir cok eklenti goreceksiniz bunlarin arasindan HTML/Javascript yazani tiklayip sececegiz..ust karede gorundugu uzere..

Secimimizi yaptiktan sonra karsimiza bos bir pencere cikacaktir bu pencerenin icine alttaki kodlari eklemeliyiz..

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;

function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;

function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;

function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

</script> 

Kaydet diyerek eklentimizi sablonumuzun en alt kismina uygun bir yere surelim..
Onizleme yaparak tekrar Kaydet deyip cikalim..baloncuklarin tadina varalim..

Ne hos olur degil mi?

Guzel fikirlerinizi bekliyorum..lutfen yukarida sordugum soruma da bir cevabinizi cok gormeyin olur mu?..

Sevgilerimle..

Mouse'a imlec veya yazi eklemek

Hayirli sabahlar tekrar tekrar gunaydin sevgili dostlarim..Sinopee kuzusunun bir sorusu post olma hakkini kazandi..
Mouse'a imlec hareketli minik bir ikon nasil eklenir?..diye sormustu..
Mouse'a imlec eklemek icin kolay bir yol aradim ama bulduklarim hepsi sablonun HTML kodlarindan yapiliyor canlarim dolayisiyla cok dikkatli olmanizi istiyorum ek olarak ONIZLEME yapmadan lutfen Kaydet demeyin olur mu?..

An itibari benim mouse'um hareket edince minik minik oklar serptigini fark edeceksiniz..Fiyuvfit cancazimin ise karizmatik bir biyigi var gormek icin bloguna ugrayin buradan:Fiyuvfit

Nasil yapilir?..hemen anlatmaya calisacagim lutfen dikkatli olmakla beraber sablonunuzun yedegini almayi unutmayin..o nasil yapilir diyorsaniz kolayca yedeklemek icin Kumanda panelinden Sablon diyoruz ardindan sag ust kosede bulunan Yedekle/Geri yukle secenegine tikliyoruz..belirledigimiz yere sablonumuzun dosyasini-yedegini kaydediyoruz..

Her hangi bir sorunla karsilasirsaniz yedegimizin kodlarini sablonun kodlar kismina yapistirarak sorunu hallediyoruz :)

Imlec nasil eklenir?

Kumanda panelimizden Sablon-ardindan HTML'yi Duzenle secenegine tiklayarak Devam et diyoruz..

ctrl+f  diyerek ]]></b:skin>kodunu aratiyoruz..

Bulduktan sonra hemen ustune asagidaki kodu yapistiriyoruz..

body, a, a:hover {cursor: url(http://www.funutilities.com/files/cursors/1/291A5A7C7246973F2B9E29132545BD4/wait.gif), progress;}

ONIZLEME yapip hersey yolundaysa KAYDET diyoruz..

Kod icerisinde bulunan resim yukaridaki kirmizi kalptir..daha fazlasi icin asagidaki siteleri ziyaret edebilir begendiginiz imlecin linkini kodun icerisindeki resim linki ile  degistirebilirsiniz..

Siteye ulasmak icin logoya tikla

Yazi nasil eklenir?

Bu daha da kolay aslinda,mouse'unda imlec degil de yazi belirsin isteyenlerin yapmasi gerekenler sunlardir:

Kumanda panelimizden Yerlesim diyoruz..

Yerlesim kismindan Gadget ekle diyoruz..

Eklentiler listesinden HTML/Javascript eklentisini seciyoruz..

Bunu hazir ettik buraya kadar hersey tamam..


Asagidaki kodlari kopyalayarak..

<script language="javascript">

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='ARZU ETTIGIN YAZI....';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

 

Kodu daha once actigimiz HTML/Javascript eklentisinin icine yerlestiriyoruz.

Mor daire icine alinan yere arzu ettigimiz yaziyi ekledikten sonra Kaydet deyip cikiyoruz..

Bu tur eklentileri blogunuzun en alt kismina yerlestirmeniz blogunuzun islevselligini etkilemeyi onleyecektir canlarim..

Onizleme yaparak hersey yolundaysa Kaydet deyip cikiyoruz..

Not not:

Bilgili dostlarima fazla detayli gelebilir anlatimim ama bana oyle geliyor ki ozellikle yeni baslayanlar icin boylesi daha faydali dolayisiyla yorduysam affiniza siginiyorum...

Soru ve dusuncelerinizi yorum kutusuna birakabilirsiniz canlarim..yanit ve cevaplar aksam saatleri verilecektir..

Sevgilerimle..