ব্লগে যুক্ত করুন লোডিং ইফেক্ট

এই ঈদের বন্ধে একটা লাভ হয়েছে। বেশ কয়েকটা লেখা লিখতে পেরেছি। ব্লগস্পটে তৈরী করুন হোমপেজ(ওয়েলকাম পেজ) অথবা আন্ডার কনশস্ট্রাকশন পেজএর আগে লাস্ট কবে লিখেছিলাম মনে করতে পারছি না।
এবারের পোস্ট ব্লগে তৈরী করুন লোডিং ইফেক্ট।
খুব সহজেই তৈরী করে ফেলুন আপনার ব্লগে পেজ লোডিং ইফেক্ট। যারা সল্প গতির নেট ব্যবহার করে থাকেন তাদেরকে পেজ লোডিং জিনিষটা আর নতুন করে বোঝাবার কিছু নেই।(যেমন আমার। নেটে বসে দাঁত দিয়ে নখ কাটতে কাটতে সময় চলে যায় আমার। ব্রাউজ করার সময় পাই না )তাদের জন্য এটা খুবই ভালো একটি টিউটোরিয়াল। টিউটোরিয়ালটি শুরু করার আগে একবার ডেমো দেখে নেই চলুন।

(বিঃদ্রঃ ডেমো পেইজে খুব বেশি ইমেজ রাখা হয়নি। সেকারনে আপনার বোধহয় সল্প সময়ের জন্য লোডিং ইফেক্টটা দেখতে পারবেন।)
আর এই টিউটোরিয়ালে যে কোড ব্যবহার করব তা আপনার ব্লগে ব্যবহার করতে কোন সমস্যা নেই। কেননা আমাদের এই কাজের জন্য অতি সল্প পরিমানে কিছু জাভা স্ক্রিপ্ট কোড টেম্পলেটে ব্যবহার করতে হবে। তবু নিরাপত্তার খাতিরে এবং সকলের পছন্দ-অপছন্দের পার্থক্যের কারনে আমি সবাইকে পরামর্শ দিবো টিউটোরিয়ালটি ফলো করার আগে আপনার ব্লগের টেম্পলেটটি (ড্যাশবোর্ড>লে আউট>এডিট এইচ টি এম এল> ডাউনলোড ফুল টেম্পলেট– চিত্র দ্রষ্টব্য) ডাউনলোড করে নিন।

এবার শুরু করা যাক।
প্রথমেই আপনার ব্লগে যে Gif ইমেজটি অর্থাৎ প্রি লোডিং ইমেজ যেটি সেটি সিলেক্ট করে নিতে হবে। সেক্ষেত্রে Ajaxload অথবা Preloader থেকে ভাল ইমেজ বানিয়ে নিতে পারবেন বলে আশা করি। আর যদি আমি যে গিফ ইমেজটি ব্যবহার করেছি সেটি ব্যবহার করতে চান তাহলে ডেমো পেইজে গিয়ে গিফ ইমেইজটির লিঙ্ক দেখতে পাবেন। সেখান থেকে লিঙ্কটি কপি করে নিন।

১.প্রথমেই আপনার পিসি থেকে একটি নোটপ্যাড খুলুন। এবং নিম্নোক্ত জাভাস্ক্রিপ্ট টুকু কপি করে তাতে পেস্ট করুন।

var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById(“loading”).style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility=”hidden”;}
else if (ns6||ie4) ld.display=”none”;
}

এর একটি নাম দিন। এবং সেটি কোন একটি সার্ভারে আপলোড করে দিন। আপনি যদি আপলোডের ঝামেলা পোহাতে না চান তাহলে আমি আমার ব্যবহার করা লিঙ্ক টি দিয়ে দিতে পারি (সেক্ষেত্রে একটা ধন্যবাদ আমাকে দিতেই হবে )
আমার আপলোড করা টেক্সট ফাইলটির লিঙ্ক হলো

http://www.mydatanest.com/files/kangalini/32250_vbc58/pageloader.txt

উল্লেখ্য আমি এটাকে pageloader.txt নামে আপলোড করেছি।
২.আপনার গিফ ইমেজটির লিঙ্ক প্রয়োজন হবে (আপনি যদি নিজের গিফ ব্যবহার করতে চান সেক্ষেত্রে)। আপনার ইমেজ Photobucket,Geocities অথবা Imageshack এ হোস্ট করে লিঙ্কটি জেনে নিন।
৩.লে আউট>এডিট এইচ টি এম এল এ যান। এক্সপান্ড টেম্পলেট ইউডজেট এ ক্লিক করবেন না। (ডান পাশে ডাউনলোড ফুল টেম্পলেটের নিচে দ্রষ্টব্য)।

৪. <body> লেখাটি খুজে বের করুন। (CTRL+F) এর সাহায্য নিতে পারেন।

৫.<body>এর পরিবর্তে নিম্নোক্ত লেখাটি সংযোজন করুন।

৬.উপরোক্ত <body onLoad=’init()’> লেখাটির নিচে নিচের লেখাটি কপি করে পেস্ট করে দিন।

<div id=’loading’ style=’position:absolute; width:100%; text-align:center;

top:600px;’>
<img border=’0′

src=’http://4.bp.blogspot.com/_XXrP_Jobycw/SaVbxXxj47I/AAAAAAAAAMw/SAjIz

A0hzSE/s320/icon_inprogress.gif’/></div>
<script

src=’http://www.mydatanest.com/files/kangalini/32250_vbc58/pageloader.txt’

type=’text/javascript’/>

আর যদি আপনি নিজেই টেক্সট ফাইলটি আপলোড করে থাকেন তাহলে আপনাকে উপরের কোডটির বদলে নিচের কোডটুকু ব্যবহার করতে হবে।

<div id=’loading’ style=’position:absolute; width:100%; text-align:center;

top:600px;’>
<img border=’0′ src=’http://আপনার গিফ ইমেজের লিঙ্ক.gif’/></div>
<script src=’http://আপনার আপলোড করা টেক্সট ফাইলের লিঙ্ক.txt’ type=’text/javascript’/>

৭. সেভ করুন।
আপনার যখন কাজ করবে না কিংবা লোডিং সম্পন্ন হয়ে যাবে তখন এটি আর কাজ করবে না, অর্থাৎ লোডিং সম্পন্ন হবার সাথে সাথে গিফট ইমেজটি চলে যাবে।

হ্যাপি ব্লগিং

পুনশ্চঃ

নিচের ইমেজটিও চাইলে ব্যবহার করতে পারেন ।