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

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

3

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

Weebly এ FAQ উইজেট যোগ করার 2 টি উপায় আছে।

  • Weebly FAQ অ্যাপ ব্যবহার করে
  • কাস্টম FAQ উইজেট সন্নিবেশ করান

উভয় পদ্ধতিরই তাদের নিজস্ব সুবিধা এবং অসুবিধা রয়েছে। আপনি একটি একক পৃষ্ঠায় প্রশ্নোত্তর বিভাগ যোগ করার জন্য FAQ উইজেট ব্যবহার করতে পারেন অথবা একটি ডেডিকেটেড FAQ পৃষ্ঠা তৈরি করতে পারেন।

1 Weebly FAQ অ্যাপ

Weebly এর অ্যাপ সেন্টারের মাধ্যমে একটি বিনামূল্যে FAQ অ্যাপ অফার করে।

  • আপনার Weebly অ্যাকাউন্টে লগইন করুন এবং আপনি যে সাইটের FAQ যোগ করতে চান তার সাইট সম্পাদকের কাছে যান।
  • অ্যাপ সেন্টারে নেভিগেট করতে "অ্যাপস" ট্যাবে যান।
  • "FAQ" অনুসন্ধান করুন এবং Weebly FAQ অ্যাপটি খুঁজুন।
  • বিবরণ দেখতে অ্যাপটিতে ক্লিক করুন এবং অ্যাপটিকে আপনার সাইটে সংযুক্ত করতে "যোগ করুন" বোতামে ক্লিক করুন।

ডিফল্ট Weebly FAQ অ্যাপ

  • "সংযোগ" বিকল্পে ক্লিক করে প্রম্পট নিশ্চিত করুন।

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

Weebly FAQ অ্যাপ যুক্ত করুন

  • আপনার সাইটে FAQ অ্যাপটি সফলভাবে ইনস্টল হয়ে গেলে আপনি নীচের মতো একটি সাফল্যের বার্তা দেখতে পাবেন।

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

সফলভাবে ইনস্টল করা যোগ করুন

এখন, "বিল্ড" ট্যাবে যান এবং বাম সাইডবারে "ইনস্টল করা অ্যাপস" বিভাগে FAQ অ্যাপটি উপলভ্য আছে তা দেখতে নিচে স্ক্রোল করুন। আপনার পৃষ্ঠায় একটি প্রায়শই জিজ্ঞাসিত প্রশ্ন সন্নিবেশ করতে উপাদানটিকে টেনে আনুন এবং ড্রপ করুন।

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

Weebly এ FAQ বিভাগ সন্নিবেশ করান

অ্যাপটি FAQ হিসাবে তিনটি ডামি প্রশ্ন এবং উত্তর যুক্ত করবে । আপনি উপলব্ধ বিকল্পগুলি দেখতে উপাদানটিতে ক্লিক করতে পারেন। আপনি ডিফল্ট Weebly FAQ অ্যাপের সাথে নিম্নলিখিতগুলি করতে পারেন:

  • প্রশ্নোত্তর বিভাগে যোগ করা আইটেমের সংখ্যা নির্বাচন করুন
  • সহজ, বাক্স বা উপাদান শৈলী বিন্যাস নির্বাচন করুন
  • শিরোনাম এবং বিষয়বস্তুর জন্য পটভূমির রং সেট করুন
  • ফন্ট এবং টেক্সট রঙ কাস্টমাইজ করুন

দুর্ভাগ্যবশত, Weebly FAQ অ্যাপ আপনাকে শিরোনাম এবং উত্তর উভয় বিভাগের জন্য শুধুমাত্র পাঠ্য সামগ্রী যোগ করতে দেয়। আপনি ছবি বা মানচিত্র দেখানোর জন্য FAQ উপাদানটির ভিতরে অন্যান্য উপাদান টেনে আনতে পারবেন না। চূড়ান্ত সমাপ্ত FAQ উইজেট নীচের মত কিছু দেখাবে।

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

Weebly FAQ উদাহরণ

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

Weebly এর জন্য 2 কাস্টম FAQ উইজেট

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

কিভাবে Weebly এ FAQ উইজেট যুক্ত করবেন?

কাস্টম উইজেটের তিনটি অংশ আছে – স্ক্রিপ্ট, CSS এবং HTML।

2.1। FAQ উইজেটের জন্য স্ক্রিপ্ট

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

<script> jQuery(function() { var $ = jQuery; var faqTitle = $( ".faq h3" ); var answerFaq = $(".response"); faqTitle.click(function(e) { e.preventDefault(); $(this).toggleClass('titleopen').next().slideToggle().toggleClass('open-close'); }); $( "#showall" ).click(function(e) { e.preventDefault(); faqTitle.addClass('titleopen'); answerFaq.slideDown().addClass('open-close'); }); $( "#hideall" ).click(function(e) { e.preventDefault(); faqTitle.removeClass('titleopen'); answerFaq.slideUp().removeClass('open-close'); }); }); </script>

2.2। FAQ উইজেটের জন্য CSS

আপনার Weebly পৃষ্ঠার "পৃষ্ঠা> আপনার পৃষ্ঠা নির্বাচন করুন> SEO সেটিংস> শিরোনাম কোড" বিভাগে নীচের CSS যোগ করুন।

<style> .faq_container{ background: #f5f5f5; padding: 20px; border: 1px solid #e5e5e5; border-radius: 10px; } #show_hide_wrap{ text-align: right; } #show_hide_wrap p{ font-size: 16px; } #showall, #hideall{ display: inline-block; background: #fff; border: 2px solid rgba(86, 77, 77, 0.18); padding: 5px 5px; line-height: 1.5; margin-bottom: 20px; font-weight: bold !important; height: 25px; } #showall{ margin-right: 20px; } #showall:hover, #hideall:hover{ background: #707070; color: #fff; } .response{ display: none; } ul.faq, ul.faq li{ list-style: none !important; } .faq h3{ background: #fff; padding: 10px 10px; border: 1px solid #e5e5e5; } .faq h3:hover, .faq h3.titleopen{ background: #808080; color: #fff; } .faq h3:after{ content: '+'; float: right } .faq h3.titleopen:after{ content: '-' } .faq_qtn{ cursor: pointer; -webkit-transition: color .2s ease, background .2s ease; -moz-transition: color .2s ease, background .2s ease; -o-transition: color .2s ease, background .2s ease; transition: color .2s ease, background .2s ease; } .para { padding-top: 20px; padding-right: 30px; font-size: 18px; text-align: justify; line-height: 30px; padding-left: 30px; } </style>

2.3। FAQ উইজেটের জন্য HTML

পৃষ্ঠায় এম্বেড কোড এলিমেন্টের ভিতরে নিচের HTML কোডটি যোগ করুন। নমুনা এইচটিএমএল কোডটিতে তিনটি প্রশ্ন এবং উত্তর রয়েছে, মনে রাখবেন আপনার নিজের সাথে ডামি কন্টেন্ট প্রতিস্থাপন করুন। আপনি অতিরিক্ত যোগ করে আরো প্রশ্ন এবং উত্তর যোগ করতে পারেন

ট্যাগ.

<div class="faq_container"> <div id="show_hide_wrap"> <div id="showall" class="faq_qtn">SHOW ALL</div> <div id="hideall" class="faq_qtn">HIDE ALL</div> </div> <ul class="faq"> <!-- This is the first Q&A --> <li> <h3 class="faq_qtn">This is a first question of FAQ Module</h3> <div class="response"> <p class="para">Here is the answer to the first question.</p> </div> </li> <!-- This is the second Q&A --> <li> <h3 class="faq_qtn">Here goes your second question of FAQ Module</h3> <div class="response"> <p class="para">Here is the answer to the second question.</p> </div> </li> <!-- This is the third Q&A --> <li> <h3 class="faq_qtn">Here is a third question of FAQ Module and you can add as many as questions</h3> <div class="response"> <p class="para">Here is the answer to the third question.</p> </div> </li> <!-- Add additional questions --> </ul> </div>

আপনার সাইটটি প্রকাশ করুন এবং "সব দেখান" এবং "সমস্ত লুকান" বোতামের সাথে লাইভ FAQ দেখুন। আপনি প্রশ্নগুলিকে পুনর্বিন্যাস করে, রঙ পরিবর্তন করে এবং ফন্টের আকার সমন্বয় করে অফলাইনে FAQ কাস্টমাইজ করতে পারেন।

দ্রষ্টব্য: FAQ কোডটি আপনার সাইটের অন্যান্য কোডগুলির সাথে বিরোধ করতে পারে। অতএব, আমরা "সেটিংস> এসইও> হেডার/ফুটার কোড" বিভাগের অধীনে সাইট স্তরের পরিবর্তে পৃষ্ঠা স্তরে কোড যোগ করার সুপারিশ করি। উপরন্তু, একটি পৃষ্ঠায় একটি প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী ব্যবহার করুন, অন্যথায় শৈলীগুলি গোলমাল এড়াতে আপনাকে CSS শ্রেণীর নাম পরিবর্তন করতে হতে পারে।

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

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