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

Weebly এ Accordion কন্টেন্ট টগল উইজেট কিভাবে যোগ করবেন?

1

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

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

CSS অ্যাকর্ডিয়ন নীচের মত দেখতে হবে।

Weebly এ Accordion কন্টেন্ট টগল উইজেট কিভাবে যোগ করবেন?

Weebly CSS Accordion Widget

অ্যাকর্ডিয়ন উইজেটের জন্য CSS

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

<style> /* Heading Style Start */ .accordion-heading { background-color: lightgreen; display: block; padding: 10px; position: relative; cursor: pointer; font-size: 20px; font-weight: 500; } /* Heading Style End */ /* Body Style Start */ .accordion-body { max-height: 0; margin-bottom: 2px; overflow: hidden; font-size: 16px; line-height: 1.5; text-align: justify; background-color: lightgrey; transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; } /* Body Style End */ .accordion { border: 1px solid white; margin: 0 auto; list-style: none; overflow: hidden; } .accordion > * + * { border-top: 1px solid white; } .accordion-input:checked ~ .accordion-body { background-color: lightgrey; padding: 10px; max-height: 1000px; transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; } .accordion-input:checked ~ .accordion-heading > .accordion-heading-btn { transform: rotate(0); } .accordion-heading-btn { display: block; width: 30px; position: absolute; top: 10px; right: 0; pointer-events: none; transition: transform .3s ease; transform: rotate(-180deg); text-align: center; font-size: 14px; line-height: 1; } .accordion-input { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1; overflow: hidden; position: absolute; left: -9999px; } </style>

আপনি "সেটিংস> এসইও> হেডার কোড" বিভাগের অধীনে সিএসএস যোগ করতে পারেন অথবা সাইট লেভেলে অ্যাকর্ডিয়নের জন্য "ট্যাগ ছাড়া" main.less "ফাইলে যোগ করতে পারেন।

Weebly এ Accordion কন্টেন্ট টগল উইজেট কিভাবে যোগ করবেন?

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

অ্যাকর্ডিয়নের জন্য এইচটিএমএল

আপনি যে পৃষ্ঠায় সিএসএস অ্যাকর্ডিয়ন যোগ করতে চান তাতে " এম্বেড কোড " উপাদানটির নীচে নীচের এইচটিএমএল কোডটি অনুলিপি করুন এবং আটকান । আপনার প্রয়োজন অনুযায়ী হেডিং এবং বডি কন্টেন্ট প্রতিস্থাপন করুন। আমরা মন্তব্য সহ প্রতিটি ব্লক হাইলাইট করেছি এবং আপনি আপনার অ্যাকর্ডিয়নের জন্য অতিরিক্ত ব্লক যুক্ত করতে ব্লকটি কপি/পেস্ট করতে পারেন।

<div> <ul class="accordion"> <!-- First Block of Accordion Start --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item1" /> <label for="item1" class="accordion-heading">This is a first heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <!-- First Block of Accordion End --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item2" /> <label for="item2" class="accordion-heading">This is a second heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item3" /> <label for="item3" class="accordion-heading">This is a third heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item4" /> <label for="item4" class="accordion-heading">This is a fourth heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> </ul> </div>

অপশন কাস্টমাইজ করা

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

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

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