How to add read more in blogger post? HTML Code

How to add read more in blogger post

If your website is in blogger, and now you want to have a read more button or a learn more button inside the article of your website, then you are reading the right article. Here I will tell you How to add read more in blogger post?

Why do we add the read more button in a blog post?

If you want your users to be able to see only part of your entire article. For example, when you want any user to read your article, then only see the first two paragraphs of that article. If that user wants to read the entire article, then he has to click on the button of Read More, and only then he will be able to read the entire article.

How to add read more in blogger post

Step 1: Firstly, open your blogger website dashboard, and go to the theme option.

Step 2: Under the Theme option you see Customize button on your right side. Click the drop option and download a backup of your theme.

Step 3: After creating a backup, go to the Edit HTML option. And now you should edit the theme.

Step 4: Click on the code section and search </head> by using ctrl+f .

How to add read more in blogger post
How to add read more in blogger post

Step 5: Now you can put some code above of </head> tag. Copy this code and paste.

<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>
How to add read more in blog post
How to add read more in blog post

Step 6: Now You can find </body> tag.

Step 7: Put the code above the tag. copy code..

<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>
How to add read more in blog post html
How to add read more in blog post html

Step 8: Now you can save the theme.

Step 9: And the last is, to write a post. after writing open it in HTML view.

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

        <div class="container">

Step 10: Put this code above the paragraph where you want to put the read more button.

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

Step 11: Put this code end of the article.

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

How to add read more in blog post by video

You can also read this article: How to add notification bar in WordPress only 5 steps
How to remove ?m=1 from URL in blogger 2022 method

how to add read more button in blogger, how to add read more in blogger, read more button, how to add read more button in blog post, how to add read more in blogger post, how to add read more button in html, How to add read more button in blogger post create read more botton by html read more link, read more html code,

Leave a Comment

Your email address will not be published.