How To Add Read More in Blogger Step-by-Step Guide

Spread the love

Hi guys in this article, I will talk about how to add read more in blogger. You know guys a lot of bloggers want to add a read more button in their blogger blog but they don’t know how to add it.

But don’t worry I will help you after reading this post you are capable of easily adding a read more button so let’s start.

How To Add Read More in Blogger Step by Step

Follow the given below steps:

1. First, open blogger and go to the theme section

2. You can see the drop-down menu right side of customizing button click the drop-down menu, click the backup button, and click the download button.

3. After taking a backup again click the drop-down menu and click edit HTML

4. Click anywhere in coding and press ctrl+f

5. After pressing ctrl+f you can see the search bar type in search bar </head>

6. Copy the given code and paste it above </head>

<style>
*{
    padding: 0;
    margin: 0;
}



.read-more-container{
    display: ;
    flex-direction: column;
    color: #111;
    gap: 1rem;
}

.container{
   
}

.read-more-btn{
    color: #0984e3;
}

.read-more-text{
    display: none;
}

.read-more-text--show{
    display: inline;
}
    </style>

7. Again press ctrl+f and search </body> tag

8. Copy given code above </body> tag

<script>

const parentContainer =  document.querySelector(&#39;.read-more-container&#39;);

parentContainer.addEventListener(&#39;click&#39;, event=&gt;{

    const current = event.target;

    const isReadMoreBtn = current.className.includes(&#39;read-more-btn&#39;);

    if(!isReadMoreBtn) return;

    const currentText = event.target.parentNode.querySelector(&#39;.read-more-text&#39;);

    currentText.classList.toggle(&#39;read-more-text--show&#39;);

    current.textContent = current.textContent.includes(&#39;Read More&#39;) ? &quot;Read Less...&quot; : &quot;Read More...&quot;;

})
  
  </script>

9. Now save the theme and go to the post section

10. Open any post in HTML view and paste the given below code top of the post.

<div class="read-more-container">

        <div class="container">

11. Copy the below code and paste it where you want to add the read more button.

<span class="read-more-text">

12. Now paste the given code in the post end.

<span class="read-more-btn">Read More...</span>
        </div>

Conclusion:

Here I completely explain to you how you can add a read more button in blogger and if you are correctly followed so can easily add a read more button.

I hope you like this post.

Leave a Comment