Promote Your Business With Us -
Mail Now
×

How to Add Accordion in Blogger | Create Accordion Widget in Blogger

byAdmin
0
Hello friends! Welcome to your Onlinewebbeast.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. And this can be Accordion Widget Blogger Post me Kaise Lagaye. So we will know all these things in this article. So stay in this article and know more in full details.
How to Add Accordion in Blogger | Create Accordion Widget in Blogger

What is Blogger?

So friends if you are a blogger or assume that you blogging. So obviously, you must be using a platform to do blogging. Just like many people use WordPress, almost the same people use the Blogger Platform. Let me tell you that Blogger is a free platform.
If you use Blogger.com, then you do not need to take this hosting. Also 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 in subdomain free. So you have to use many widgets to customize Blogger.

What is Blogger Accordion Widget?

So here 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 ). So this is also a type of Schema. By the way, this widget was only possible through the plugin in WordPress.
But right now I have made this widget available for bloggers also. So if you want to use this widget, then you must use this widget.

Benefits of Accordion Widget

So friends now know what are the benefits of this Accordion Widget? So let me tell you that it has become very difficult to rank articles on Google nowadays. So this is a new trick by Schema Markup. Google nowadays gets the article ranked highly because of it.
By the way, if you are a WordPress user, then you will get to use a lot of plugs. But any type of Plugin is not used in Blogger. So in Blogger too, it has now become possible with the help of coding. Maybe this will help you to rank the article.

How to Add Accordion in Blogger?

So friends above, we know what this Widget is. So now we are going to talk about how we can add this widget to our blogger blog or blogger post. So we also know that Create Accordion Widget in Blogger |
Also, different people search for different things. But they all have the same meaning. So below I have given some steps. And I have also made this video tutorial available.
Step 1 - First you have to log in to Blogger's Dashboard.
Step 2 - Now you have to click on Theme> Customize> Advance> Add CSS. After copying the below-given code, paste it in this Add CSS Box and save it.
.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 3 - Now you have to go to the New Post and paste the below given HTML & JavaScript code and edit as per your choice. This is a very simple process.

<body>    
        <h2>Article Full 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");      
        were in;      
        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>

Tags:
Previous Post Next Post