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
ગુજરાતી ન્યુઝ 24/7
Wednesday 13 January 2021