সাইটের জন্য "আপ" বোতামের মতো একটি ফাংশন ইন্টারনেট সংস্থানকে এর দর্শকদের জন্য আরও সুবিধাজনক করে তোলে। এটি আপনাকে সহজেই পৃষ্ঠার যেকোনো স্থান থেকে পৃষ্ঠার শীর্ষে যেতে সাহায্য করে। এটি অনলাইন স্টোর এবং বড় নিবন্ধ সহ সাইটগুলির জন্য আবশ্যক যেগুলির জন্য দীর্ঘ স্ক্রোল করা প্রয়োজন৷
এটা কিসের জন্য
এই মুহুর্তে, বেশিরভাগ সাইটে "আপ" বোতামের মতো কোনও ফাংশন নেই এবং এতে সমালোচনামূলক কিছুই নেই। কিন্তু এর ব্যবহার ইন্টারনেট রিসোর্স এবং এর দর্শকদের জন্য অনেক সুবিধা নিয়ে আসতে পারে।
দর্শকদের জন্য সুবিধা
এটি প্রায়শই ঘটে যখন কোনও ইন্টারনেট সংস্থানের পৃষ্ঠাটি প্রচুর পরিমাণে তথ্য দিয়ে লোড হয়, যখন একটি তথ্যমূলক নিবন্ধ অনেক জায়গা নেয় এবং আপনাকে মাউসের চাকা দিয়ে পৃষ্ঠাটি স্ক্রোল করতে হয়। এটি ছাড়াও, নিবন্ধের শেষে এটি সম্পর্কে অনেক মন্তব্য থাকতে পারে।
যখন একজন দর্শক একটি নিবন্ধ পড়েন, তখন পৃষ্ঠাটি নীচে স্ক্রোল করতে ক্লান্তিকর কিছু নেই, কিন্তু যখন পাঠ্যটি শেষ হয়ে যায় এবং আপনাকে উপরে যেতে হবে, তখন এটি কিছুটা ক্লান্তিকর হতে শুরু করে। বেশীরভাগ লোকই দীর্ঘ সময়ের জন্য স্ক্রোল করতে খুব অলস হবে, এবং তারা কেবল সাইটটি বন্ধ করে দেবে, এর বিস্তৃতির চারপাশে আরেকবার হাঁটার পরিবর্তে।
বোতামটি ব্যবহার করেতাৎক্ষণিকভাবে পৃষ্ঠার শীর্ষে যেতে হলে সাইটে সময় কাটানো আরও সুবিধাজনক হয়।
ইন্টারনেট সম্পদের জন্য সুবিধা
সম্পদটির জন্য ইতিবাচক দিকগুলি অতীতের কারণগুলি থেকে আসে, কারণ সহজ সাইট নেভিগেশন আচরণগত কারণগুলিকে উন্নত করে কারণ সমস্ত দর্শক তাদের কর্মে আরও সক্রিয় হবে এবং অন্য পৃষ্ঠাগুলিতে চলে যাবে৷
এইভাবে, এই আচরণগত কারণগুলি সাইটের প্রতি সমস্ত সার্চ ইঞ্জিনের মনোভাবকে প্রভাবিত করে এবং অনুসন্ধান ফলাফলে অবস্থানের উন্নতির দিকে পরিচালিত করে৷
কিভাবে সাইটে "আপ" বোতামটি নিজেই তৈরি করবেন
আরও ডিল করা হচ্ছে। শুধুমাত্র কয়েকটি অত্যন্ত সহজ ধাপ অনুসরণ করে আপনি যেকোনো CMS-এ যেকোনো সাইটের জন্য স্ক্রোল আপ বোতাম তৈরি করতে পারেন:
- ছবি তৈরি;
- একটি স্ক্রিপ্ট তৈরি করা হচ্ছে;
- বাটন স্টাইল তৈরি করুন;
- সাইটে যোগ করা হচ্ছে।
বোতামের ছবি
সাইটে একটি "আপ" বোতাম যোগ করতে, প্রথমে আপনাকে নিজেই আইকনটি তৈরি করতে হবে, ক্লিক করা হলে, ব্যবহারকারী পৃষ্ঠার শীর্ষে চলে যাবে৷ এটি করার জন্য, আপনি রেডিমেড বিকল্পগুলি ব্যবহার করতে পারেন, যার মধ্যে আপনি সর্বদা সবচেয়ে উপযুক্ত একটি বেছে নিতে পারেন।
বোতামের চেহারা উন্নত করার জন্য, আমাদের কিছু উন্নতি করতে হবে, যথা, একটি স্প্রাইট তৈরি করতে যা আমাদেরকে CSS-এর উপর ভিত্তি করে পটভূমির ছবিগুলিকে একত্রিত করতে দেয়, যার ফলে সেগুলি থেকে একটি অ্যানিমেশন তৈরি করা যায়৷
গ্রাফিক কাজের জন্য, আপনি যেকোনো সম্পাদক ব্যবহার করতে পারেন। কিন্তু সবচেয়ে সুবিধাজনক বিকল্প একটি অনলাইন পরিষেবা হবে।PIXLR, যেহেতু এখানে ডাউনলোড করার কিছু নেই এবং আপনি এটি সরাসরি আপনার ব্রাউজারে ব্যবহার করতে পারেন।
শুরু করতে, প্রদর্শিত সম্পাদক উইন্ডোতে, "কম্পিউটার থেকে ছবি আপলোড করুন" ক্ষেত্রটি নির্বাচন করুন৷ উদাহরণ হিসেবে রকেটের ছবি ধরা যাক।
যদি নির্বাচিত আইকনের মাত্রা খুব বড় হয়, তাহলে আপনাকে ছোট আকারের সমন্বয় করতে হবে। এটি করতে, উপরের মেনুতে যান এবং "সম্পাদনা" ক্ষেত্রটি নির্বাচন করুন এবং "ফ্রি ট্রান্সফর্ম …" এর পরে
পরবর্তী, বিশেষ মার্কারগুলি ছবির পাশে প্রদর্শিত হবে, যা সরানোর মাধ্যমে আপনি ছবির আকার পরিবর্তন করতে পারবেন৷ অনুপাত বজায় রাখতে, আপনি Shift কী ব্যবহার করতে পারেন, যা ধরে রেখে আপনাকে নীল মার্কারগুলি সরাতে হবে। এই ধাপগুলির শেষে, একটি রকেটের একটি চিত্র পাওয়া যায়৷
পরবর্তী ধাপটি হল স্তরটির একটি অনুলিপি তৈরি করা।
এখন আপনাকে নতুন স্তর থেকে রকেটের ছবি কিছুটা উপরে সরাতে হবে। এটি করার জন্য, বাম মেনুর দ্বিতীয় কলামে অবস্থিত মুভ টুল এবং কীবোর্ডের উপরের তীরটি ব্যবহার করা সুবিধাজনক হবে।
এখন আমাদের উপরের ছবিটিকে কালো এবং সাদা করতে হবে। এটি উপরের মেনুতে "সংশোধন" - "হিউ / স্যাচুরেশন" আইটেমটি ব্যবহার করে করা যেতে পারে। সম্পূর্ণ ডিস্যাচুরেশনের জন্য, স্যাচুরেশন স্লাইডারটি -100 সেট করা উচিত। এই ক্রিয়াটি আপনাকে এমন একটি প্রভাব তৈরি করার অনুমতি দেবে যেখানে "উপর" বোতামটি আপনি এটির উপর ঘোরার সময় কালো এবং সাদা থেকে রঙে পরিণত হবে৷
চূড়ান্ত স্পর্শ হল দুটি ছবির চারপাশে অতিরিক্ত স্থান অপসারণ। এটি করার জন্য, বাম মেনু থেকে "ক্রপ" আইটেমটি নির্বাচন করুন এবংআমরা একটি আয়তক্ষেত্রে শুধুমাত্র দুটি রকেট নির্বাচন করি। ক্রপিং সঞ্চালনের জন্য, এন্টার কী টিপুন।
ফলাফলটি এমন একটি চিত্র যাতে কোনো অতিরিক্ত ফাঁকা স্থান নেই৷ আপনাকে ফলস্বরূপ চিত্রটির প্রস্থ এবং উচ্চতা লিখতে হবে, কারণ এই ডেটাগুলি পরবর্তী ধাপে কার্যকর হবে৷
সংরক্ষণ করতে, আপনাকে "ফাইল" - "সংরক্ষণ করুন" এ ক্লিক করতে হবে, যেখানে বাম অনুচ্ছেদে "মাই কম্পিউটার" আমরা চিত্রটির নাম লিখি (শুধুমাত্র ইংরেজি বিন্যাস), বিন্যাসটি নির্বাচন করুন (এতে কেস, PNG) এবং "হ্যাঁ" বোতামে ক্লিক করুন।
"আপ" বোতামের স্ক্রিপ্ট সহ ফাইল
এই ক্ষেত্রে আপনাকে স্ক্রিপ্ট লিখতে হবে না। সমাপ্ত কোডে কিছু সংশোধন করে সর্বজনীন সংস্করণ ব্যবহার করা সম্ভব হবে।
এটি করার জন্য, আপনাকে যেকোনো কোড এডিটর ডাউনলোড করতে হবে। সবচেয়ে জনপ্রিয় এবং বিনামূল্যের বিকল্প হল নোটপ্যাড++। এটি ইনস্টল করার পরে, আপনাকে এই কোডটি কপি এবং পেস্ট করতে হবে:
| $(ডকুমেন্ট)।রেডি(ফাংশন(){ $(উইন্ডো).স্ক্রোল(ফাংশন () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} অন্য {$('scroller').fadeOut();}});$('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); মিথ্যা রিটার্ন করুন;}); }); |
পরবর্তী, উপরের মেনুতে ক্লিক করুন "ফাইল" - "এভাবে সংরক্ষণ করুন …", তারপরে আমরা কোডটি.js ফরম্যাটে সংরক্ষণ করি। এর পরে, আপনি একটি FTP সংযোগ ব্যবহার করে স্ক্রিপ্ট ফাইল এবং ছবি আপলোড করে আপনার সাইটে এই কোডটি ব্যবহার করতে পারেন৷
সাইটে ইনস্টল করুন
সাইটের জন্য স্ক্রোল আপ বোতাম সেট করতে, আপনাকে রাখতে হবেপ্রয়োজনীয় স্থান কোড। আপনাকে ট্যাগের আগে এটি লিখতে হবে।
CSS দিয়ে একটি বোতাম স্টাইল তৈরি করা
প্রায়শই, সাইটের জন্য "উপর" বোতামটি নীচে অবস্থিত ("ফুটার")।
নিম্নলিখিত কোড অবশ্যই সাইটের style.css ফাইলে যোগ করতে হবে:
|
/আপ বোতাম/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/নেটিভ ইমেজ পাথ/ width:39px;/ বোতাম প্রস্থ/ উচ্চতা:96px;/50% বোতামের উচ্চতা/ নিচের:5px;/স্থির অবস্থানে নীচের প্যাডিং/ বাম:89%;/বাম দিকে সরান/ }.scrollTop:hover{ background-position:0 -108px; } /ব্যাকগ্রাউন্ড অফসেট/" |
এই ক্ষেত্রে, সেই ছবির প্রস্থ এবং উচ্চতা ডেটা প্রয়োজন হবে। এটি কেবলমাত্র কোডে প্রাপ্ত ডেটা প্রবেশ করতে রয়ে যায় এবং সাইটের জন্য "আপ" বোতামটি প্রস্তুত হবে! আর কি?
ওয়ার্ডপ্রেস সাইটের জন্য আপ বোতাম
এই CMS-এর জন্য, "আপ" বোতামটি প্লাগইনগুলি ব্যবহার করে তৈরি করা যেতে পারে, পাশাপাশি স্বাধীনভাবে।
প্লাগইন পদ্ধতিটি সবচেয়ে সুবিধাজনক এবং ইনস্টল করা সহজ, কারণ এটির জন্য আপনাকে শুধুমাত্র ইনস্টল বোতামে ক্লিক করতে হবে এবং প্লাগইন মেনুতে সমস্ত কার্যকারিতা কনফিগার করতে হবে৷
পরেরটির পছন্দটি সতর্কতার সাথে যোগাযোগ করা উচিত, কারণ এটির সাথে সাইটে ভাইরাস অর্জন করা সহজ হবে। সবচেয়ে জনপ্রিয় এবং প্রমাণিত বিকল্প হল একটি প্লাগইন যার নাম স্ক্রোল ব্যাক টু টপ। আপনি Wordpress প্লাগইনগুলির জন্য আদর্শ অনুসন্ধান ব্যবহার করে এটি ডাউনলোড করতে পারেন৷
এই এক্সটেনশন আছেএকাধিক কার্যকারিতা, এবং এটি একটি Wordpress সাইটের জন্য "আপ" বোতামটি কাস্টমাইজ করা খুব সহজ হবে৷ সমস্ত মান পরিবর্তন করার প্রয়োজন নেই, আপনাকে কেবল সাইটের পৃষ্ঠায় বোতামটির উপস্থিতি এবং অবস্থান কনফিগার করতে হবে।
আপনি দেখতে পাচ্ছেন, প্লাগইনগুলির সাথে বোতাম সেট আপ করা খুবই সহজ৷ কিন্তু একটি গুরুত্বপূর্ণ সূক্ষ্মতা রয়েছে, যা হল প্রতিটি ইনস্টল করা প্লাগইন CMS লোড করে। এটি ইন্টারনেট সংস্থানের গতিকে প্রভাবিত করতে পারে। এই কারণেই বেশিরভাগ সাইটের মালিকরা কোডে সরাসরি সমস্ত পরিবর্তন করার চেষ্টা করেন, তৃতীয় পক্ষের এক্সটেনশনের সাহায্যে নয়। আপনি একটি এইচটিএমএল সাইটের জন্য একটি "আপ" বোতাম তৈরি করতে পারেন, যা খরচ কমিয়ে দেবে৷
সমস্ত Wordpress সিস্টেম ফাইল পরিবর্তন করার আগে, আপনাকে তাদের ব্যাক আপ করতে হবে। তারপরে আপনি উপরে বর্ণিত আপনার নিজস্ব বোতাম তৈরি করতে সমস্ত পদক্ষেপ অনুসরণ করতে পারেন৷
জুমলার জন্য "উপর" বোতাম
CMS জুমলা ওয়ার্ডপ্রেসের মতো প্লাগইন ইনস্টল করতেও সমর্থন করে। জুমলা 3-এ একটি সাইটের জন্য "আপ" বোতামের সবচেয়ে সফল সংস্করণ হল একটি এক্সটেনশন যার নাম টপ অফ দ্য পেজ৷
এই CMS-এ, "এক্সটেনশন ম্যানেজার" এর মাধ্যমে যেকোনো প্লাগইন ইনস্টল করা যাবে। এর জন্য আপনার প্রয়োজন:
- ইন্টারনেটে প্লাগইনটি ডাউনলোড করুন;
- এক্সটেনশন ম্যানেজারে "ব্রাউজ" বোতামে ক্লিক করুন;
- ডাউনলোড করা সংরক্ষণাগার নির্বাচন করুন;
- "ডাউনলোড" ক্লিক করুন এবং ইনস্টল করুন।
এখন আপনাকে এটি "প্লাগইন ম্যানেজার" এ সক্রিয় করতে হবে। এই জন্যআপনাকে এই বিভাগে যেতে হবে, প্লাগইন খুঁজতে হবে এবং এর স্থিতি "সক্ষম"-এ স্যুইচ করতে হবে।
পরবর্তী ধাপটি হল একই বিভাগটি ব্যবহার করে সমস্ত এক্সটেনশন প্যারামিটার কনফিগার করা যেখানে আপনাকে এই প্লাগইনটির ডানদিকে "বেসিক প্যারামিটার" খুঁজে বের করতে হবে৷
পৃষ্ঠার শীর্ষে নিম্নলিখিত কার্যকারিতা রয়েছে:
- রান ইন/ অ্যাডমিনিস্ট্রেটর - শুধুমাত্র ইন্টারনেট রিসোর্সে নয়, জুমলা সিএমএস প্যানেলেও বিকল্পটি সক্রিয় করা।
- বোতামের অবস্থান প্রকাশ করুন - উপরের বোতামটি প্রদর্শিত হওয়ার জন্য ব্যবহারকারীকে কত পিক্সেল রিওয়াইন্ড করতে হবে।
- বাটন টেক্সট বাদ দিন - বোতামে টেক্সটের উপস্থিতি।
- সর্বদা শীর্ষে - সাইটের পৃষ্ঠাটি সর্বদা তার শীর্ষ থেকে প্রদর্শিত হবে৷ পৃষ্ঠায় একটি নির্দিষ্ট স্থানে স্ক্রোল করার জন্য অ্যাঙ্কর ব্যবহার করার সময়, এই বিকল্পটি সক্ষম করার প্রয়োজন নেই৷
- মসৃণ স্ক্রোল - পৃষ্ঠা স্ক্রোল করা আরও মসৃণ করে তোলে।
- স্ক্রোলের সময়কাল - যে সময়টির পরে পৃষ্ঠাটি সম্পূর্ণরূপে শুরুতে চলে যাবে।
- স্ক্রোল ট্রানজিশন - স্ক্রোলিংয়ে আরও ভিজ্যুয়াল এফেক্ট যোগ করে।
- ট্রানজিশন ইজিং - পৃষ্ঠার শীর্ষে আন্দোলনকে "দুর্বল করা"৷
- লিঙ্ক লোকেশন - আইকনের অবস্থান। ডিফল্টরূপে, বোতামটি নীচের ডান কোণায় অবস্থিত৷
- শৈলী ব্যবহার করুন – স্বতন্ত্র বোতাম শৈলী, যা নীচের ক্ষেত্রে সেট করা যেতে পারে। যদি একটি নেতিবাচক মান পরিবর্তন করা হয়, তবে সমস্ত শৈলী সেটিংস সাইটের সক্রিয় থিম থেকে নেওয়া হবে৷
- লিঙ্ক স্টাইল - আপনার বোতাম শৈলী পরামিতি প্রবেশ করার জন্য একটি ক্ষেত্র।
"উপর" বোতামের শৈলী কাস্টমাইজ করতে, আপনার অবশ্যই কমপক্ষে ন্যূনতম থাকতে হবে৷সিসিএস জ্ঞান। অন্যথায়, আপনার শেষ পরামিতিটির মান "না" এ স্যুইচ করা উচিত।
আরেকটি গুরুত্বপূর্ণ বিষয় হল যে আইকনের সাধারণ শিলালিপিতে ইংরেজি লেখা থাকে: শীর্ষে ফিরে যান। এই ধরনের টেক্সট একটি রাশিয়ান-ভাষা সাইটে উপস্থিত হতে পারে না, তাই আপনার প্লাগইন প্যারামিটারে এটি নিষ্ক্রিয় করা উচিত অথবা এটি রাশিয়ান ভাষায় পরিবর্তন করা উচিত।
এই শিলালিপি পরিবর্তন করতে, আপনাকে FTP ব্যবহার করে সাইট সার্ভারে যেতে হবে বা হোস্টিং-এ বিল্ট করা ফাইল ম্যানেজার। এরপর, "/administrator/language/en-GB/" ডিরেক্টরিতে আপনাকে "en-GB.plg_system_topofthepage.ini" নামে একটি ফাইল খুঁজে বের করতে হবে।
টেক্সট পরিবর্তন করার আগে, আপনার এই নথির এনকোডিং UTF-8 এ পরিবর্তন করা উচিত। এটি রাশিয়ান অক্ষরগুলির স্বাভাবিক প্রদর্শন তৈরি করবে৷
পরে আমরা নিম্নলিখিত লাইনটি পাই:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="শীর্ষে ফিরে যান"" |
এবং উদ্ধৃতি চিহ্নের বাক্যাংশটি রাশিয়ান ভাষায় পরিবর্তন করুন। আপনি বাক্যাংশ ব্যবহার করতে পারেন যেমন "উপর!", "উপরে!" অথবা "উপর!"।
শেষে, আপনাকে পরিবর্তিত ফাইলটি সংরক্ষণ করতে হবে এবং জুমলার সাইটের জন্য "আপ" বোতামটি পরীক্ষা করতে হবে।
Ucoz এর জন্য উপরের বোতাম
Ucoz-এ সাইটের জন্য "আপ" বোতামটি কোড ইনজেকশন ব্যবহার করে করতে হবে, যেহেতু এই CMS-এর জন্য প্লাগইন সংযোগ করা অসম্ভব। যাইহোক, এর জন্য সিস্টেম ফাইলগুলির দীর্ঘ অধ্যয়ন এবং প্রয়োজনীয় লাইনগুলি অনুসন্ধানের প্রয়োজন নেই, আপনাকে সঠিক জায়গায় একটি ছোট কোড পেস্ট করতে হবে৷
আমাদের ইনস্টল করতেপ্রয়োজন:
- "কন্ট্রোল প্যানেল -> ডিজাইন -> ডিজাইন ম্যানেজমেন্ট (টেমপ্লেট) -> সাইটের নীচে যান;
- স্ক্রিপ্টটি ঢোকান (প্রকল্পের অফিসিয়াল ওয়েবসাইটে এবং তৃতীয় পক্ষের সংস্থান পাওয়া যাবে)।
উপসংহার
এর পরে, নীচের ডানদিকে একটি আইকন প্রদর্শিত হবে, ব্যবহারকারীকে পৃষ্ঠার একেবারে শীর্ষে নিয়ে যাবে৷
আপনি দেখতে পাচ্ছেন, যেকোনো CMS-এর জন্য ব্যাক বোতাম সেট আপ করা বিশেষ কঠিন ছিল না। আপনি একটি স্বয়ংক্রিয় ইনস্টলেশন পদ্ধতি (প্লাগইন) এবং একটি ম্যানুয়াল উভয়ই ব্যবহার করতে পারেন। যাইহোক, পরবর্তী বিকল্পটি সবচেয়ে উপযুক্ত, কারণ এটি সাইটের কর্মক্ষমতাকে বিরূপভাবে প্রভাবিত করে না।
আপনি একটি HTML সাইটের জন্য "ব্যাক টু টপ" বোতামটি ব্যবহার করতে পারেন সাইটের সম্পদের খরচ কমাতে, কারণ প্রচুর পরিমাণে এক্সটেনশন সম্পদের কার্যক্ষমতার উপর নেতিবাচক প্রভাব ফেলতে পারে। একটি "আপ" বোতাম প্লাগইন সাইটের পৃষ্ঠাগুলির লোডিং সময়কে ব্যাপকভাবে প্রভাবিত করতে সক্ষম হবে না, তবে বেশিরভাগ ক্ষেত্রে ব্যবহারকারীর সিএমএসে কমপক্ষে এক ডজন প্লাগইন ইনস্টল করা আছে। এই ক্ষেত্রে, যেকোনো প্লাগইন সাইটের পৃষ্ঠাগুলির কার্যক্ষমতাকে বিরূপভাবে প্রভাবিত করতে পারে।
