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

Weebly সাইটে কিভাবে ব্রেডক্রাম্ব যোগ করবেন?

0

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

সম্পর্কিত: ওয়ার্ডপ্রেস সাইটে কিভাবে ব্রেডক্রাম্ব যোগ করবেন?

ব্রেডক্রাম্বের উদাহরণ

নীচে একটি অনুভূমিক এবং উল্লম্ব ব্রেডক্রাম্ব কেমন হবে তার একটি উদাহরণ দেওয়া হল।

Weebly সাইটে কিভাবে ব্রেডক্রাম্ব যোগ করবেন?

ব্রেডক্রাম্বসের উদাহরণ

আপনি দেখতে পাচ্ছেন, এটি ম্যাপে "আপনি এখানে!" পিন বোর্ডের মতো পুরো সাইটের মধ্যে বর্তমান পৃষ্ঠার আপেক্ষিক অবস্থান প্রদান করে।

ওয়েবেলি এবং ব্রেডক্রাম্ব

Weebly আপনার সাইটে যোগ করার জন্য ডিফল্ট ব্রেডক্রাম্ব উপাদান সরবরাহ করে না । যাইহোক, আপনি কাস্টম CSS/HTML ব্যবহার করতে পারেন এবং ম্যানুয়ালি প্রতিটি পৃষ্ঠায় ব্রেডক্রাম্ব ুকিয়ে দিতে পারেন। এখানে আমরা আপনাকে ছয়টি ভিন্ন CSS স্টাইল ব্রেডক্রাম্ব দেখাব যা আপনি আপনার Weebly সাইটে যোগ করতে পারেন।

দ্রষ্টব্য: মনে রাখবেন, এগুলি সহজ এবং ম্যানুয়াল ব্রেডক্রাম্বস। এটি স্কিমার অংশ নয় এবং তাই সার্চ ইঞ্জিনগুলি ওয়ার্ডপ্রেস ওয়েবসাইটের মত সার্চ ফলাফলে তাদের দেখাবে না ।

আমরা শুরু করার আগে, একটি ব্রেডক্রাম্বের পূর্বশর্ত হল আপনার পৃষ্ঠাগুলিকে একটি কাঠামোগত পদ্ধতিতে রাখা। যদিও ব্রেডক্রাম্ব অনুযায়ী পৃষ্ঠাগুলি সাজানোর কোন প্রয়োজন নেই, আমরা দৃ strongly়ভাবে সুপারিশ করি যে "পৃষ্ঠাগুলি" ট্যাবের অধীনে প্রয়োজনীয় অনুক্রম বজায় রাখতে এবং সেই অনুযায়ী আপনার নেভিগেশন সারিবদ্ধ করুন। আমরা একটি উদাহরণ কাঠামো দিয়ে ব্যাখ্যা করব "হোম> সাইট বিল্ডিং> উইবেলি> উইবেলি টিপস অ্যান্ড ট্রিকস> এই পৃষ্ঠা"। ব্রেডক্রাম্ব তৈরির জন্য সংশ্লিষ্ট লিঙ্ক সহ পাঁচটি ব্লকের প্রয়োজন।

ব্রেডক্রামগুলি সাধারণ সিএসএস এবং এইচটিএমএল কোড ব্যবহার করে, তাই সিএসএস কোড স্টাইলশীটে যোগ করতে হবে এবং এইচটিএমএল কোডটি প্রয়োজনীয় পৃষ্ঠায় এম্বেড করতে হবে। যেহেতু আপনাকে একাধিক পৃষ্ঠায় ব্রেডক্রাম্বস রাখার প্রয়োজন হতে পারে, তাই নীচে দেখানো হিসাবে "থিম> এডিট এইচটিএমএল / সিএসএস > স্টাইল> মেইন.লেস" এর অধীনে সিএসএস কোড যুক্ত করার পরামর্শ দেওয়া হচ্ছে :

Weebly সাইটে কিভাবে ব্রেডক্রাম্ব যোগ করবেন?

Weebly এ প্রধান CSS ফাইল সম্পাদনা

বিষয়বস্তুর উপরে " এম্বেড কোড " উপাদান ব্যবহার করে একটি পৃষ্ঠায় HTML কোড োকানো হবে ।

স্টাইল 1 এবং 2

শৈলী 1 এবং 2 ব্রেডক্রাম্বের নিচে দ্বিতীয় স্টাইলের জন্য কোডের সামান্য সংযোজন সহ সাধারণ CSS ক্লাস ভাগ করে।

সিএসএস ব্রেডক্রাম্ব স্টাইল ১

CSS ব্রেডক্রাম্ব স্টাইল 2

স্টাইল 3, 4, 5 এবং বোনাস 6

CSS ব্রেডক্রাম্ব স্টাইল 3

CSS ব্রেডক্রাম্ব স্টাইল 4

সিএসএস ব্রেডক্রাম্ব স্টাইল ৫

বোনাস CSS ব্রেডক্রাম্ব স্টাইল 6

উপরের সমস্ত ব্রেডক্রামের জন্য CSS / HTML কোড পেতে নিচের বাটনে ক্লিক করুন এবং প্রতিটি স্টাইলের জন্য CSS কোড হাইলাইট করা হয়েছে।

এই ব্রেডক্রাম্বসের জন্য চারটি ছবি প্রয়োজন যা আপনি নিচে ডাউনলোড করে আপনার Weebly সাইটে আপলোড করতে পারেন। CSS এর ভিতরের ছবির URL গুলিকে আপনার নিজের URL গুলি দিয়ে প্রতিস্থাপন করতে ভুলবেন না।

দ্রষ্টব্য: ডাউনলোড করা CSS এ ব্রেডক্রাম্বস স্টাইল 1, 2, 3 এবং 4 যথাক্রমে উপরে দেখানো হিসাবে 3, 4, 5 এবং 6 উদাহরণ উপস্থাপন করে। আপনার নিজের ইউআরএল দিয়ে ছবির লিঙ্কগুলি প্রতিস্থাপন করতে ভুলবেন না।

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

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