Subscribe my YouTube channel: Click to Subscribe!

How to create Accordion FAQ design on Blogger Website | Latest Accordion FAQ Script for Blogger | satyakipathshala.in

The Accordion Beautiful FAQ Section gives a beautiful look to your website with a great user experience. And, it is also free to use.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Create Accordion FAQ design on Blogger Website: Hello! Everyone. I am here with a new article that might be really helpful to you. In today's article, I will show you How to create a beautiful Accordion FAQ section for a Blogger Website.

How to create Accordion FAQ design on Blogger Website | Latest Accordion FAQ for Blogger | satyakipathshala.in
Accordion FAQ Section for Blogger

What is the Accordion FAQ Section for Blogger

FAQ really helps to rank your blog on Google search results. You might have seen on many websites that after finishing the article they use FAQ (Frequently Asked Questions) in their post. For eg. you have read the article and you might have some questions regarding that.

Then you might get the answers in the FAQ section of that article. FAQ also works as Schema Markup that helps your article to rank on Google. I'll give you the complete tutorial on FAQ Schema Markup in another blog post.

Related Posts

Here I will show you how to create Animated FAQ Section for your blog. If you want to see a demo then see the bottom side of the post. You will get an idea of what I am talking about. There you will see the animated FAQ section of that post.

The Accordion Beautiful FAQ Section gives a beautiful look to your website with a great user experience. And, it is also free to use. You might have seen on Google when you search for any query, Google also shows the result of People Also Ask.

faq-schema
FAQ_Schema

That is the FAQ section. While searching on Google you will see that on the search page FAQ Schema is visible under that website link, which means they are using FAQ Schema.

How to add Accordion FAQ Section on Blogger Website

Before applying any changes to the website, it is recommended the back up your theme.

STEP 1: Go to Blogger Dashboard.
STEP 2: Click on Edit HTML.
STEP 3: Now copy the below CSS code and paste it before </style> tag or </head> tag and save the theme.
CSS
.arn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.arn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.arn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.arn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.arn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.arn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.arn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.arn .cont ul, .arn .cont ol{padding-left:13px}
.arn .cont li{padding:0}
.arn .cont a{text-decoration:none;color:#08102b}
.arn .cont a:hover{text-decoration:underline}
.arn p:first-child{margin-top:0}
.arn p:last-child{margin-bottom:0} 
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
.darkMode .arn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .arn .cont, .darkMode .arn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}
STEP 4: Now copy the below Accordion FAQ HTML Script on the Blogger Post where you want to apply this Accordion Section.
HTML
<!--[ Accordion by satyakipathshala ]-->
<div class='arn'>
  <!--[ Accordion 1 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
      <label class='acTtl' for='offaccor1'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_1</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 2 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
      <label class='acTtl' for='offaccor2'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_2</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 3 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
      <label class='acTtl' for='offaccor3'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_3</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 4 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
      <label class='acTtl' for='offaccor4'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_4</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>
That's all! You have made a post using Accordion FAQ Section.

Custom Modification of Code

  • If you want any color modifications then edit the CSS source codes.
  • In <span>Accordion_Title_4</span> write the Title.
  • Now within the <p>...</p> tag write the content.

Conclusion

So, how did you find this article 'How to create Accordion FAQ design on Blogger Website'. Let me know in the comment section. I'll see you soon in the next post.

Post a Comment

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.