Designed By: @anutrickz
Version: 1.0.2-beta

[NEW] Stylish FAQ Accordion Widget for Blogger | Optimize Your Blog Post

 Stylish FAQ Accordion for Blogger

Stylish FAQ Accordion for Blogger


Hello friends! Welcome to your anutrickz.blogspot.com blog. So in this article today we are going to talk about how to add Accordion in Blogger Post | Create Accordion Widget in Blogger.

Description

FAQ Accordion is a simple, easy to apply and customize instrument to demonstrate a list of the most popular questions with answers on a personal website. An adaptive widget with simple design gives you a chance to share extensive information about your offers, pay customer attention to the advantages of your products


What is Accordion ?

Accordion is a type of button when you click this button the content appear in it and again when you click this button the content disappear.

Advantages of Accordion.

  •  Accordion makes your blog post more clean and informative.
  •  Accordion makes your blog post SEO optimised.
  •  Google uses Accordion in FAQ section.


How to Add Accordion in blogger ?

  • Login to blogger dashboard
  • Then go to Edit html
  • Now add this below css Above </head> tag


<style>
  summary { font-size: 1.25rem; font-weight: 600; background-color: #fefefe; color: #333; isolation: isolate; padding: 1rem; margin-bottom: 1rem; box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6; border-radius: 0.25rem; text-align: left; cursor: pointer; position: relative; } details > summary::after { position: absolute; content: "+"; right: 20px; } details[open] > summary::after { position: absolute; content: "-"; right: 20px; } details > summary::-webkit-details-marker { display: none; } details[open] summary ~ * { animation: sweep .5s ease-in-out; animation: sweep .5s ease-in-out; box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6, 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset; isolation: isolate; margin-bottom: 1rem; background-color: #fefefe; padding: 1rem; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} }
</style>

  •  Save the theme
  • Now go to that post where u want to add this widget 
  • In the html mode add this below html code

<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>

  • Save the post then Go to the post, to see your new plugin.
Have questions about applying this? Leave a message.

 Download Codes

Video tutorial


contact us: