How to add Attractive Powerful Accordion(FAQ) widget to blogger

 

Add Accordion to blogger

As you all know, there are no plugins to install Accordion widget on Blogger and if you talk about WordPress then you get to see many types of plugins here. But for those who use Blogger and do not know coding language, how can they install Accordion widget on their Blogger, this question becomes a problem for them. So today we are going to give you a solution to this problem. Today we will learn how to Add Accordion widget on Blogger?



What is Accordion widget for Blogger?

Accordion widget are also known as FAQ (Frequently asked questions) widget.

Accordion widget is a kind of text content container that does not take up a lot of space in your webpage or Blopost. In which we can expand and collapse our text content in just one click. The Accordion widget is exactly like the Table of contents widget, but does not have heading jumping links.


The main purpose of Accordion widget is to tell the visitor about your Blopost or webpage, what information you have tried to convey to your readers in this Blopost or webpage and why they are reading your Blopost or webpage? How they will get benefit from this?


How Accordion Widget helps to improve seo Ranking? 

These FAQ( means Accordion) widget are also the type of schema markup.If you are aware of the new updates of Google, then you would be aware that now by searching on Google, the most frequently asked questions (Frequently Asked Questions) are visible and in this you will find many more questions related to your question. You can easily get answers of these questions by clicking on that heading.

These FAQ widget are also the type of schema markup. Through this, Google tries to give its users all the information related to that question.

As you all know how difficult it is becoming to rank blog post in Google. In this way, through this new schema of Google, we will all be helped to a great extent to rank our blog posts. By this schema google pushes up your article. Now I think it's clear how accordions are useful to improve seo rankinkg in google.


What's the benefit of Accordion widget?

Although Accordion widget has many benefits, but I would like to tell you about some of its 5 most beneficial sides.

Benefits of Accordion widget

  • Useful to decrease bounce rate.
  • Beneficial to get more organic traffic from google.
  • Makes your blog more attractive.
  • It helps to Fast load your blog.
  • It's a best way to indroduce your readers about to your webpage or blogpost.


How to Add Accordion widget to blogger?

Adding the Accordion widget to Blogger is absolutely easy. You can all add Accordion widgets to Blogger by reading some simple steps below. But now you will have the question that we will install the Accordion widget, but what does it look like? And is it also responsive?

So for this let me tell you that it is fully responsive and talk about how it is previewed, then you can see the preview by clicking on the below preview button.

Install Accordion to blogger

1). Copy the below👇 css code & paste it before ]]></b:skin> tag.

.faq-container {
  padding: 16px;
}
.question-container {
  padding: 8px;
  margin: -16px;
  position: relative;
}
.question-container .question {
  background: #222;
  color: #eee;
  font-size: 20px;
  padding: 12px;
  cursor: pointer;
}
.question {border:2px solid #fff;} 
.question-container .question-icon {
  position: absolute;
  color: #eee;
  font-size: 30px;
  font-weight: bold;
  margin-top:7px;
  right: 16px;
  pointer-events: none;
  transition: 400ms;
}
.question-icon {padding:3px;margin:2px;}
.question-container .question-icon.active {
  transform: rotate(45deg);
}
.question-container .answer {
  background: #d5ece9;
  line-height: 1.9;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: 400ms;
}
.question-container .answer.active {
  max-height: 100%;
  padding: 8px;}code-box


2). Copy the below👇 Script code & paste it before </body> tag.

 Don't paste it before </head> tag.

<script>
const questions = document.querySelectorAll(".question");

questions.forEach(question => {
  question.addEventListener("click", () => {
    let answer = question.nextElementSibling;
    let questionIcon = question.previousElementSibling;

    answer.classList.toggle("active");
    questionIcon.classList.toggle("active");
  });
});
</script>code-box


3). Copy below👇 Html code & edit question & answer according to you.

<h2>FAQs</h2>

    <div class="faq-container">
      <div class="question-container">
        <div class="question-icon">+</div>
        <div class="question">Question 1</div>
        <p class="answer">
          Answer 1
        </p>
      </div>

      <div class="question-container">
        <div class="question-icon">+</div>
        <div class="question">Question 2</div>
        <p class="answer">
          Answer 2
        </p>
      </div>

      <div class="question-container">
        <div class="question-icon">+</div>
        <div class="question">Question 3</div>
        <p class="answer">
          Answer 3
        </p>
      </div>
    </div>code-box

  • To add your question Replace Question 1 with your question.
  • To add your Answer Replace Answer 1 with your Answer.
When you change Question 1 then Add question 1's answer In Answer 1 section.

When you change Question 2 then Add question 2's answer In Answer 2 section.

Follow above steps according to your question list 'How many questions do you have?'.

If you wanted to Add more questions in accordion widget, then copy below Html code & paste it in Html code before last </div> tag.
Every time when you paste below code it increases 1 question & answer.

<div class="question-container">
        <div class="question-icon">+</div>
        <div class="question">Question 4</div>
        <p class="answer">
          Answer 4
        </p>
      </div>code-box

After writing your blog post & also after adding question, answer  in accordion, paste it (in Html section) anywhere, where you want to show accordion in your blog post.


Costumize (Techtricks99) Accordion widget.

First, we'll customize the question bar of the Accordion widget. Then, we customize answer bar bar.

Use below given instructions & shortcodes to change its background color,  font color & more.

Accordion Question Bar

  • background: #222;
  • color: #fff;
  • .question {border:2px solid #fff;}
1). Change background color #222 by your color code.
2). Change text color #fff by your color code.
3). Change border color #fff by your color code.

Accordion Answer Bar

  • background: #d5ece9;
1). Change background color #d5ece9 by your color code.

Conclusion 

So, now I think you have understood everything about "How to Add Attractive Powerful Accordion (FAQ) Widget for Blogger". If you liked this article, do share it.

By the way, I have tried to give you complete information about, how you can add Accordion widget to your Blogger. But still, if you feel that we have missed some things, then you must tell us in the comment box below.

And slso if you have any problem related to this post . So, please comment below. We will definitely help you, if it is possible by me?

1 Comments

Please Don't spam in Comment Box

Post a Comment

Please Don't spam in Comment Box

Previous Post Next Post