How to Add Accordion Widget in Blogger

Hello friends! Today in this article we are going to talk about adding an Accordion widget in Blogger Post. And how to add the Accordion widget in Blogger. Friends, we will know all these things in this article. So stay with us and know more details in this article.


What is a Blogger?

Friends, if you are a blogger or do blogging. So obviously, you must be using a platform to do blogging. Many people use WordPress, but some people use Blogger Platform. Blogger is a free platform just like WordPress.


If you use Blogger.com, then you do not need to take any hosting if you are a new blogger or a beginner. So let me tell you that in this Blogger platform you get free lifetime use of .blogspot subdomain free. You have to use many widgets to customize Blogger.

$ads={2}

What is Blogger Accordion Widget?

I am going to tell you about Accordion Widget. If you are aware of search engine updates, then you will know about this FAQ (Frequently Asked Questions). It is also a type of Schema. And this widget was only possible through the plugin in WordPress.


But right now I have made this widget available for blogger also in free. If you want to use this widget, then read this article at the end.


Benefits of Accordion Widget

Now we have to know that what are the benefits of this Accordion Widget? It has become very difficult to rank articles on Google nowadays. So this is a new trick by Schema Markup. Google nowadays makes the article highly ranked due to this.


If you are a WordPress user, then you will get to use a lot of plugins. But you can not use any type of Plugin in Blogger. So in Blogger too, it has now become possible with the help of coding script. Maybe this will help you to rank the article.


How to Add Accordion in Blogger?

We know that what is the Accordion Widget. So now we are going to talk about how we can add this widget to blogger post. And also know that Create Accordion Widget in Blogger.

$ads={2}

Different people search for different things. But they all have the same meaning. So below I have given some steps.


Step 1 - First you have to log in to Blogger.com Dashboard.

Step 2 - Now you have to click on Theme >> Customize >> Advance >> Add CSS.

Sep 3 - Copy the below code


.accordion {      

            background-color: #ffffff;      

            color: #444;      

            cursor: pointer;      

            padding: 18px;      

            width: 100%;      

            border: 3px solid #ff0f0f; 

            border-radius: 14px 14px 14px 14px; 

            color: #25991C;

            font-family: Lobster,cursive;

            font-size: 20px;   

            text-align: left;      

            outline: none;      

            font-size: 15px;      

            transition: 0.4s;      

        }      

        .active,      

        .accordion:hover {      

            background-color: #f5f507;      

        }      

        .panel {      

            padding: 0 18px;      

            display: none;      

            background-color: white;      

            overflow: hidden;      

        }      


Step 4 - Paste this code in the CSS box and Save it.

Step 5 - Now click on the new post then click on Pencil icon and then HTML view.

Step 6 - Paste the below given HTML & JS code and edit as per your choice. 


<body>    

        <h2>Article Details FAQs</h2>

<button class="accordion"><h3> Section 1 </h3></button>  

        <div class="panel">

    

            This is section 1<br />

    

        </div>

<br />

<br />

<button class="accordion"><h3> Section 2 </h3></button>    

        <div class="panel">

    

            This is section 2<br />

    

        </div>

<br />

<br />

<button class="accordion"><h3> Section 3 </h3></button>    

        <div class="panel">

    

            This is section 3<br />

    

        </div>

<br />

<br />

<script>      

        var acc = document.getElementsByClassName("accordion");      

        var i;      

        for (i = 0; i < acc.length; i++) {      

            acc[i].addEventListener("click", function () {      

                this.classList.toggle("active");      

                var panel = this.nextElementSibling;      

                if (panel.style.display === "block") {      

                    panel.style.display = "none";      

                } else {      

                    panel.style.display = "block";      

                }      

            });      

        }          

        </script>    </body></div>


Conclusion

How did you like this article of Create Accordion Widget in Blogger? You must give us your feedback in the comment box below. If you have any suggestions and you should share with us, then you can share also in the comment box below.



Post a Comment

Please do not enter any spam link in the comment box.

×