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

September 08, 2020
What is Blogger, What is Blogger Accordion Widget, Benifits of Accordion Widget, How to Add Accordion in Blogger, Blogger Accordion Widget FAQs



    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 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 blogger also. So if you want to use this widget, then you must use this widget.

    Benifits 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 pluging. 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.
    Accordion Widget Full Tutorial

    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 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 of all, you have to login to Blogger's Dashboard.
    Step 2 – Now you have to click on Theme> Customize> Advance> Add CSS. After copying the code given below, 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 are given below by going to New Post HTML & JavaScript Code Paste 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");      
        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>

    [sp_easyaccordion id=”4415″]
    Tags:

    Post a Comment

    0 Comments