মাউসের লেজ তৈরি করার পদ্ধতি

কোন কোন ওয়েবসাইটে ভ্রমণ করতে গিয়ে নিশ্চয় উপরের ছবির মতো একটি দৃশ্য দেখেছেন। একটু মনোযোগ দিয়ে দেখুন- মাউস পয়েন্টারটির পাশে একটি বাক্য আকাবাঁকা হয়ে ছুটে চলছে। মাউসের পয়েন্টারটি যেখানেই নিয়ে যান না কেন বাক্যটি লেজের মতো জুড়ে আছেই। এরকম একটি মজার ও আকর্ষণীয় ইফেক্ট আমরা ব্লগার.কম ব্লগে খুব সহজে তৈরি করতে পারি।

• ব্লগারে লগইন হয়ে Layout> Page Elements ট্যাবে যান।
• একটি HTML/ Javascript গেজেট নিন।

• <script language="javascript">
  
  // ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
  var text='Welcome to Bangla Hacks';
  
  var delay=30; // 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=12; // 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 name="txt'+i+'" top="-100" left="0" width="'+txtw+'" 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>

  
  
• এই গেজেটে উপরের কোডটুকু সম্পূর্ণ কপি করে পেস্ট করে দিন। we will learn how to add mouse trail on a blogger blog.
  
• গেজেটটি সেভ করুন।
• ব্যাস হয়ে গেল।
• সেভ করার আগে Welcome to Bangla Hacks লেখাটি পরিবর্তন করে নিতে ভুলবেন না যেন
• কয়েকটি তথ্যঃ
  
• ব্লগ সম্পূর্ণ লোড না হলে কোডটি কাজ শুরু করবে না।
• কোডের একেবারে উপরের দিকে থাকা কয়েকটি মান পরিবর্তন করতে পারবেন।
  
• var delay=30; // 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=12; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
  var beghtml='<span ><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
  var endhtml=''; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.
• উপরের অংশটিতে প্রয়োজনীয় পরিবর্তন করতে পারবেন। বাকী অংশে হাত দেয়ার দরকার নেই। সমস্যা হতে পারে।
  
• এখানে ver delay=30, var Xoff=0, var Yoff=30, var txtw=12 ইত্যাদি মানগুলো পরিবর্তন করে দিন।
• ভাসমান বাক্যটির রঙ পরিবর্তন করতে চাইলে <span style="color:#00436e;"> অংশটুকুতে পরিবর্তন আনুন। বিভিন্ন রঙের কোড জানতে কালার চার্ট শীর্ষক পোস্টটির সহায়তা নিন।
• যদি উপরের কোড কাজ না করে তাহলে এই লিংক থেকে কোডযুক্ত জিপ ফাইলটি ডাউনলোড করুন। ফাইল সাইজ ১.৩ কিলোবাইট।
  

Just copy the code on a HTML/ JavaScript gadget from layout>page elements tab and save.