Easy Tricks - Add Auto Read More Break With Blogger Snippet

Easy Tricks - Add Auto Read More Break With Blogger Snippet

Introduction

Hello, Everyone Happy New Year 2021, This will be my second post this year. Yesterday when I was trying to fix my blog and was trying to avoid the previous Javascript technique to add read more button on every post on the homepage.

What previous javascript technique was doing is it was fetching the whole post and then trimming and extracting the text or image from it because we are doing it from front-end. We have to get all the data from the Blogger Server then only we can modify it. if you got my point this trick was not optimizing the blog performance instead this was just to make the appearance better.

Thanks to Blogger new snippet feature now we can leave everything on blogger to do server-side and with the perks of improved performance and less code we can make it looks how we want.

Why I'm sharing this trick now? 

Because I got to know about this Yesterday when I was trying to find a better way to achieve this thanks to an answer on StackOverflow where they answered a question similar to mine and I got this and I modified a bit to make it even better.

I will share the link to StackOverflow answer at the end so that you can also see and upvote that answer.

Now coming back to the trick - you may have few questions like

Whether you need to play with the template code?

Yes, You are required to edit the template and make few changes, But if you are a newbie and don't know how to edit the template my advice is to create a backup before editing so incase if the template gets break then you can restore the backup.

Whether This Trick will add Read More Button in All Blog Posts?

Yes, Thanks to blogger new snippet feature you can add Read More button break button on all the posts automatically without any extra javascript.

Features of New Blogger Snippet

  • Control the Snippet length- Yes, you can control the snippet length
  • Control the ellipsis at the end - Yes, you can hide or show the three dots at the end of the snippet,
  • Preserve the Links in the post - You can Show links as the link or plain text on the homepage,
  • Preserve the Line breaks - You can preserve the line-breaks from the post as it is in the snippet or remove it.

What About the Featured Image?

Yes, We are going to make the first image of every post as the featured or cover image. It is included in this post.

Adding the code

Firstly go to Blogger → Template → Edit HTML and press CTRL + F and search for the code 

 <data:post.body/> 

This expression will appear two to three times try the second one and replace it with the given code below.

 <b:if cond='data:blog.pageType not in {&quot;static_page&quot;, &quot;item&quot;}'>
     
    <b:if cond='data:post.firstImageUrl'>
      <div class='PostCover'>
      <img expr:src='data:post.firstImageUrl' itemprop='image' expr:alt='data:post.title'/>
          </div>
    </b:if>
    
      <p class='PostSinppet' itemprop='description'>
  <b:eval expr='snippet(data:post.body, {length: 300, linebreaks: false, links: false})'/>
      </p>
      
  <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
<b:else/>
  
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</b:if>

Customization:

Change the length of the snippet - If you want to limit or increase the length of the characters in the snippet then change the red highlighted number from 300 to your desired number.

No Featured Image - If your blog is already showing the featured image and you only want the Readmore not the image then remove the entire area highlighted in orange colour.

Remove Extra Readmore - If you found two Readmore buttons are appearing search for 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

 Remove if you found these lines two times (don't remove from the above code 😅)

Any Other Help - In Case of any code break or help to style the tags, Don't hesitate to use my contact page to send me the message will try to help you as fast as possible.

Bonus - (Optiona; Styling not Required)

Find the code:

]]></b:skin>

Paste the below code before 

.jump-link a{color: rgb(248 249 250)}

.jump-link{
width: 100%;
padding: 10px 0px;
background-color: rgb(52 58 64);
text-align: center;
color: rgb(248 249 250);
border-radius: 4px;
margin: 20px 0px;
transition: all 0.5s;
}

.jump-link:hover{
box-shadow: 0px 0px 2px 2px gray;
  }

Styles Customization 

Background-Colour: Change the Green Highlighted text if you want to change the background colour of the Read More button

Text Colour: 
 Change the Light Blue Highlighted text if you want to change the Text colour of the Read More button

Live Demo: All Blogger Tricks

Conclusion:

Thanks for following with me hopes you got a good looking Read More Break button on every post in Homepage, Labels Pages.

If you break your code or unknowingly did something then please restore your backup and don't mess with the code ask me in your comments or message me through the contact page.

Thanks to the StackOverflow answer by Prayag Sharma you can visit or upvote his answer here. 

Answered By Prayag Sharma