Auto Read More Summary Without Jquery & CSS for Blogger Blog

Today, I gonna to discuss about Auto read more summary widthout any jquery and css file codes.

Auto Read More Summary

How to add Blogger post summaries and thumbnails :

Here's my step-by-step guide to the easiest solution for post summaries and thumbnails with Blogger: 

Step 1 - Back up your template!

It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries and thumbnails on non-item pages

The next stage is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design>Edit HTML and check the Expand widget templates box and search for the following line of code:

<data:post.body />

Replace this line with the following code:

 <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Preview the change to your template and you'll see that your posts will appear in a format similar to this:

As seen in the screenshot above, the thumbnail appears above the summary. We can align the thumbnail more cohesively to the left or right of the summary by adding CSS to our template.

At this stage, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your site.

Step 3 - Add CSS to align the thumbnail image

While still on the Design>Edit HTML section of your dashboard, search for the following line:

</b:skin>

Immediately before this line, paste the following CSS statement:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text like this:

If you would prefer to align your thumbnail image to the right, paste the following code instead:

.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated thumbnails!

Resource : Blogger Buster