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

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

2

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

Weebly এর জন্য Accordion কন্টেন্ট স্লাইডার

অ্যাকর্ডিয়নের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

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

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

Weebly এর জন্য বুটস্ট্র্যাপ অ্যাকর্ডিয়ন

লিপি:

আপনার পৃষ্ঠার ফুটার কোড বিভাগের অধীনে নীচের স্ক্রিপ্ট যোগ করুন:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

আপনার পৃষ্ঠার হেডার কোড বিভাগের অধীনে নীচের বুটস্ট্র্যাপ CSS লিঙ্ক করুন:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML:

এই উদাহরণে আমরা ব্যবহার করেছি, নিম্নলিখিত বিবরণ সহ তিনটি স্লাইডার:

  1. প্রথম স্লাইডে দুটি কলাম রয়েছে। একটি কার্ড ইমেজ সহ এবং অন্যটি কার্ড ব্লক সহ। এই বিভাগটি কার্ড গ্রুপ লেআউট ব্যবহার করে তৈরি করা হয়েছে।
  2. দ্বিতীয় স্লাইডে একটি বিপরীত কার্ড রয়েছে।
  3. একটি কার্ড ব্লকের ভিতরে পাঠ্য উপাদান সহ তৃতীয় স্লাইড।

ইমেজ ইউআরএল এবং ডামি টেক্সট কন্টেন্ট আপনার নিজের সাথে প্রতিস্থাপন করা নিশ্চিত করুন।

<div id="accordion" role="tablist" aria-multiselectable="true"> <!-- First Section --> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Section 1 with Card Image and Card Block </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div class="card-group" style="margin:20px;"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card Title</h4> <p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p> </div> </div> </div> </div> </div> <!-- Second Section --> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Section 2 with Inverse Card </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card card-inverse" style="background-color: #333; margin:20px;"> <div class="card-block"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> </div> </div> <!-- Third Section --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Section 3 with Text Inside Card Block </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> <!-- Add More Sections Here --> </div>

তিনটি স্লাইডার বিভাগ বোঝার উদ্দেশ্যে মন্তব্য সহ হাইলাইট করা হয়েছে এবং আপনি কোডের ব্লক যোগ করে এবং সেই অনুযায়ী আইডি এবং href বৈশিষ্ট্য পরিবর্তন করে আরো বিভাগ যোগ করতে পারেন। মনে রাখবেন বুটস্ট্র্যাপ একটি কাঠামো যা ওয়েবলির অন্যান্য উপাদানগুলিকে প্রভাবিত করতে পারে। আপনার Weebly থিমের উপর ভিত্তি করে আপনাকে CSS সামঞ্জস্য করতে হতে পারে।

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

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