How To Add FAQ Accordion In Blogger Post 2023?

नमस्कार दोस्तों, आज के इस ब्लॉग पोस्ट में हम जानने वाले हैं की आप किस प्रकार एक Stylish FAQ Accordion अपने ब्लॉगर में कैसे ऐड कर सकते हैं। यह देखने में भी काफी सुंदर लगता है और यूजर इक्स्पीरीअन्स भी बेहतरीन होता है। इसको ऐड करने के लिए आपको कुछ कोड कॉपी और पेस्ट करने होंगे। 

नीचे आपको कुछ कोड दिए हुए हैं जिसमे एक कोड CSS है और दूसरा कोड HTML है सबसे पहले आपको CSS कोड को कॉपी करना है और उसको अपने ब्लॉगर थीम में </body> या </head> के ऊपर पेस्ट कर देना है। 

इसके बाद आपको HTML Code Copy करना है, उसको अपने ब्लॉगर पोस्ट या ब्लॉगर पेज में लेजाकर पेस्ट कर देना है। अपने हिसाब से आप इस कोड के टेक्स्ट को बदल सकते हैं। <summary> में आपको सवाल लिखना है और <div class="$(function(AT-FAQ)"> में आपको Answer लिखना है। 

इसके बाद आपको पोस्ट को पब्लिश कर देना है, जिसके बाद successfully code save हो जाएगा और आपका stylish faq accordion आपके पोस्ट में ऐड हो जाएगा।

How To Add Accordion Codes in blogger Posts

Step by Step Add CSS Code

• Copy This CSS Code
• Go To Blogger Dashboard 
• Click On Theme Section 
• Click On 
• Paste The Code Above </head>
• Save Now

CSS

<style>
  summary { font-size: 1.25rem; font-weight: 600; background-color: #fefefe; color: #333; isolation: isolate; padding: 1rem; margin-bottom: 1rem; border: solid #0000ff59 2px; border-radius: 0.25rem; text-align: left; cursor: pointer; position: relative; } details &gt; summary::after { position: absolute; content: &quot;+&quot;; right: 20px; } details[open] &gt; summary::after { position: absolute; content: &quot;-&quot;; right: 20px; } details &gt; summary::-webkit-details-marker { display: none; } details[open] summary ~ * { animation: sweep .5s ease-in-out; animation: sweep .5s ease-in-out;  isolation: isolate; margin-bottom: 1rem; background-color: #0000ff0d; padding: 1rem; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }
    
</style>

Step by Step Add HTML Code

• Copy The HTML Code
• Go To Blogger Dashboard
• Click On New Post or Existing Post
• Click On Pencil icon 
• Click on html view
• paste this code
• Publish The Post

HTML

<details>
  <summary>FAQ 1 : What is Lorem Ipsum?</summary>
  <div class="$(function(AT-FAQ)">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  </div>
</details>
<details>
  <summary>FAQ 2 : What is Lorem Ipsum?</summary>
  <div class="$(function(AT-FAQ)">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  </div>
</details>
<details>
  <summary>FAQ 3 : What is Lorem Ipsum?</summary>
  <div class="$(function(AT-FAQ)">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  </div>
</details>

Now You Have Added The FAQ Accordion Successfully

Frequently Asked Question

FAQ 1 : क्या ब्लॉगर की वेबसाईट में FAQ Schema लगा सकते हैं?

जी बिल्कुल, इंटरनेट पर कई सारे टूल हैं जहां पर आप FAQ Schema Generate कर सकते हैं, जिसके बाद उस कोड को अपने ब्लॉगर पोस्ट में पेस्ट करके schema ऐड कर सकते हैं।

FAQ 2 : FAQ Accordion के क्या फायदे हैं?

FAQ Accordion के कई सारे फायदे हैं, जैसे यूजर को जानकारी पढ़ने में आसानी होती है, आप अपने ब्लॉग पेज में accordian की मदद से जरूरी टेक्स्ट को ही Show कर सकते हैं इत्यादि।

FAQ 3 : ब्लॉगर पोस्ट में schema कैसे चेक करें?

इसके लिए आपको Google Rich Result वेबसाईट पर जाना होगा, वहाँ आपको अपने ब्लॉग पोस्ट के यूआरएल को डालना होगा, फिर test url पर क्लिक कीजिए। कुछ सेकंड बाद आपके सभी schema की जानकारी आपको मिल जाएगी।