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

how to make mouse trail on blogger blog
কোন কোন ওয়েবসাইটে ভ্রমণ করতে গিয়ে নিশ্চয় উপরের ছবির মতো একটি দৃশ্য দেখেছেন। একটু মনোযোগ দিয়ে দেখুন- মাউস পয়েন্টারটির পাশে একটি বাক্য আকাবাঁকা হয়ে ছুটে চলছে। মাউসের পয়েন্টারটি যেখানেই নিয়ে যান না কেন বাক্যটি লেজের মতো জুড়ে আছেই। এরকম একটি মজার ও আকর্ষণীয় ইফেক্ট আমরা ব্লগার.কম ব্লগে খুব সহজে তৈরি করতে পারি।
  • ব্লগারে লগইন হয়ে 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.
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

সফটওয়ার ও ওয়েবওয়ারের বিভিন্ন টিপ্‌স, টিউটোরিয়াল, হ্যাক্‌স, টেমপ্লেট বা থিম্‌স ইত্যাদি নিয়েই আমি ব্লগ লিখছি। আমার প্রধান আগ্রহ ব্লগিং টিপস। এছাড়াও প্রযুক্তির বিচিত্র বিষয় নিয়ে মত বিনিময়, সমস্যা ও তার সমাধান এবং আলোচনা করার জন্য এই ব্লগ খুলেছি। আশা করি আপনি নিরাশ হবেন না। এই ব্লগের সব লেখাগুলো যেকোন মিডিয়ায় এই লাইসেন্সের আওতায় প্রকাশ করতে পারবেন। বিস্তারিত পড়ুন....

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger