TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly সাইটে শীর্ষ বোতামে স্ক্রোল যুক্ত করবেন?

1

উপরে স্ক্রোল করা একটি সহজ এবং দরকারী বৈশিষ্ট্য যা ওয়েবপেজের শীর্ষে নিচে থেকে যে কোন জায়গায় যেতে ব্যবহৃত হয়। আপনি বেশিরভাগ সাইটের ডান নিচের কোণে একটি উপরের তীর চিহ্ন লক্ষ্য করেছেন এবং তীরের ছবিতে ক্লিক করে আপনাকে সেই পৃষ্ঠার শীর্ষে নিয়ে যাওয়া হবে। এটি বিশেষত দীর্ঘ সামগ্রীযুক্ত পৃষ্ঠাগুলির জন্য একটি দরকারী বৈশিষ্ট্য। এই নিবন্ধটি ব্যাখ্যা করে কিভাবে আপনার বিনামূল্যে Weebly সাইটে উপরে বা পিছনে শীর্ষ ফাংশনে স্ক্রোল যোগ করা যায়। আপনার Weebly সাইটটি অপ্টিমাইজ করার জন্য 200 টিরও বেশি বিনামূল্যে Weebly টিউটোরিয়াল শিখুন ।

উপরে বা পিছনে শীর্ষ বোতামে স্ক্রোল যোগ করার সাথে জড়িত পদক্ষেপগুলির সারাংশ এখানে দেওয়া হল:

  1. উপরের জাভাস্ক্রিপ্ট ফাইলে স্ক্রোলটি ডাউনলোড করুন এবং সংশোধন করুন।
  2. আপ তীর ছবিটি ডাউনলোড করুন।
  3. আপনার Weebly সাইটে জাভাস্ক্রিপ্ট এবং ইমেজ ফাইল আপলোড করুন।
  4. সমস্ত পৃষ্ঠায় শীর্ষে স্ক্রোল যুক্ত করুন।
  5. নির্দিষ্ট পৃষ্ঠায় শীর্ষে স্ক্রোল যুক্ত করুন।

আসুন প্রতিটি ধাপ বিস্তারিতভাবে আলোচনা করি।

ধাপ 1: স্ক্রিপ্ট ফাইলটি ডাউনলোড করুন এবং সংশোধন করুন

  • জিপ ফাইলটি ডাউনলোড করুন এবং "scrolltopcontrol.js" নামে একটি জাভাস্ক্রিপ্ট ফাইলে বের করুন।
  • নোটপ্যাড বা টেক্সট এডিটের মতো এডিটরে ফাইলটি খুলুন এবং img src = "up.png” কোডটি দেখুন।
  • নীচের হিসাবে আপনার Weebly সাইটের চিত্র পথ দিয়ে এটি প্রতিস্থাপন করুন:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • পরিবর্তিত ফাইলটি সংরক্ষণ করুন।

ধাপ 2: আপ তীর ছবি ডাউনলোড করা

ধাপ 3: আপনার Weebly সাইটে ফাইল আপলোড করা

  • আপনার Weebly অ্যাকাউন্টে লগইন করুন এবং উপরের ফাংশনে স্ক্রোল যোগ করতে চান এমন সাইটটি নির্বাচন করুন।
  • Weebly এডিটরে "থিম" ট্যাবে যান এবং তারপর " HTML/CSS সম্পাদনা করুন " বোতামে ক্লিক করুন।
  • "সম্পদ" ট্যাবে "+" আইকনে ক্লিক করুন, ড্রপডাউন থেকে "আপলোড ফাইল (গুলি) নির্বাচন করুন এবং পরিবর্তিত" scrolltopcontrol.js "ফাইলটি আপলোড করুন।
  • একই ভাবে "up_arrow.png" ইমেজ ফাইল আপলোড করুন।
  • আপনার থিমটি সংরক্ষণ করুন, যদি আপনি এই প্রথমবার আপনার সাইটে ফাইল আপলোড করেন তাহলে আপনাকে আপনার সাইটের জন্য একটি নতুন থিমের নাম লিখতে বলা হবে। একটি নতুন থিমের নাম লিখুন এবং আপনার পরিবর্তনগুলি সংরক্ষণ করুন।

এখন আপনি প্রায় সম্পন্ন এবং শীর্ষ বৈশিষ্ট্য স্ক্রোল যোগ করার জন্য দুটি বিকল্প বাকি আছে:

  1. সাইটের সব পেজে যোগ করুন।
  2. শুধুমাত্র নির্দিষ্ট পাতায়।

কিভাবে Weebly সাইটে শীর্ষ বোতামে স্ক্রোল যুক্ত করবেন?

Weebly সাইটে ফাইল আপলোড করা হচ্ছে

ধাপ 4: সমস্ত পৃষ্ঠায় শীর্ষে স্ক্রোল যোগ করা

নীচের কোডটি অনুলিপি করুন এবং "youritename.weebly.com" কে আপনার প্রকৃত Weebly সাইটের নাম দিয়ে প্রতিস্থাপন করুন।

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Weebly সম্পাদকের "সেটিংস" ট্যাবে যান এবং " এসইও" বিভাগের অধীনে "হেডার কোড" বাক্সে কোডটি পেস্ট করুন যেমনটি নীচের ছবিতে দেখানো হয়েছে।

কিভাবে Weebly সাইটে শীর্ষ বোতামে স্ক্রোল যুক্ত করবেন?

Weebly সাইট বাড়িতে কোড যোগ করুন

আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং নীচে স্ক্রোল করার সময় নীচের ডান কোণে একটি তীর বোতাম দেখতে আপনার সাইটটি প্রকাশ করুন। আপনি আপনার সমস্ত পৃষ্ঠায় উপরের তীর চিত্রটি দেখতে পাবেন এবং ছবিতে ক্লিক করলে আপনাকে আপনার সাইটের শীর্ষে নিয়ে যাবে।

সতর্কতা: যদি স্ক্রল ফাংশন কাজ না করে, তাহলে "হেডার কোড" বিভাগের পরিবর্তে "ফুটার কোড" বিভাগে কোড পেস্ট করার চেষ্টা করুন।

ধাপ 5: নির্দিষ্ট পৃষ্ঠায় শীর্ষে স্ক্রোল যোগ করা

Weebly সম্পাদকের "পৃষ্ঠাগুলি" ট্যাবে যান এবং আপনি যে পৃষ্ঠাটি স্ক্রোলটি শীর্ষ ফাংশনে যুক্ত করতে চান তা নির্বাচন করুন। "উন্নত সেটিংস" লিঙ্কে ক্লিক করুন এবং উপরের কোডটি " হেডার কোড " বক্সে পেস্ট করুন যেমনটি নীচের ছবিতে দেখানো হয়েছে। আপনার প্রকৃত Weebly সাইটের নামের সাথে "youritename.weebly.com" প্রতিস্থাপন করতে ভুলবেন না।

কিভাবে Weebly সাইটে শীর্ষ বোতামে স্ক্রোল যুক্ত করবেন?

একক Weebly পৃষ্ঠায় কোড যোগ করুন

পরিবর্তনগুলি সংরক্ষণ করুন এবং আপনার সাইটটি প্রকাশ করুন। নির্দিষ্ট পৃষ্ঠাটি খুলুন এবং দেখুন যে তীর বোতামটি এখন আপনার পৃষ্ঠার নীচের ডানদিকে কোণায় রাখা হয়েছে যখন নিচে স্ক্রোল করা হচ্ছে।

ব্যাক টু টপ টেক্সট ব্যবহার করে

যদি আপনি একটি ছবির পরিবর্তে পাঠ্য ব্যবহার করতে চান তাহলে শুধু একটি " এম্বেড কোড " উপাদান ব্যবহার করে আপনার পৃষ্ঠার নীচের কোডটি যোগ করুন ।

<a href="#top">Back to Top</a>

আপনি আপনার সাইটের পাদলেখের মধ্যে "ব্যাক টু টপ" যোগ করতে "সেটিংস" ট্যাবের "এসইও" বিভাগের অধীনে "ফুটার কোড" বাক্সে এই কোডটি ব্যবহার করতে পারেন। ব্যবহার করুন এবং
ট্যাগ অনুযায়ী পাঠ্য সারিবদ্ধ করতে।

দ্রষ্টব্য: #টপ এর পরিবর্তে আপনি আপনার পৃষ্ঠার যেকোনো HTML নোঙ্গর ব্যবহার করে সেই অবস্থানে স্ক্রল করতে পারেন।

"স্ক্রল টু টপ" কন্ট্রোলের টার্গেট ডেস্টিনেশন পরিবর্তন করা

যখন আপনি উপরের তীরটিতে ক্লিক করেন, স্ক্রোল বারটি ডিফল্টরূপে পৃষ্ঠার শীর্ষে স্থানান্তরিত হবে। আপনি যদি অন্য কোন অবস্থানে যেতে চান তাহলে .js ফাইলের ভিতরে "scrollto" অ্যাট্রিবিউট পরিবর্তন করে আপনি এটি নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ “scrollto: 0” কে “scroll: 100” এ পরিবর্তন করলে স্ক্রল বারটি 100 পিক্সেল উপরের অবস্থানের নিচে চলে যাবে। আপনি নীচের দুটি ধাপ ব্যবহার করে আপনার পৃষ্ঠায় সংজ্ঞায়িত যে কোনও উপাদানতে অবস্থানটি সরাতে পারেন।

  • ধাপ 1 – উপাদানটি সংজ্ঞায়িত করুন – উদাহরণস্বরূপ একটি এইচ 2 ব্যবহার এম্বেড কোড উপাদান সংজ্ঞায়িত করতে এবং নীচের কোডটি যুক্ত করুন:
<h2 id="movehere">Move the Scroll bar here </h2>
  • ধাপ 2 – তারপর স্ক্রোলটো হিসেবে অ্যাট্রিবিউট পরিবর্তন করুন।
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

যখন আপনি উপরের তীর বা উপরের লিঙ্কে ক্লিক করবেন তখন এটি স্ক্রোল বারটিকে H2 শিরোনামের অবস্থানে নিয়ে যাবে।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত