How to add automatic read more in Blogger

The default Blogger template don’t have the auto read more future, unless you put it by yourself using “insert jump break” in your blog new post. Now I will guide you how to do it automatically.


STEP 1: 
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box. 
Now find (CTRL+F) this in the template code:

</head>

And immediately ABOVE/BEFORE that, paste this code:

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 450; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='https://sites.google.com/site/markjue92/home/read-more_auto.js' type='text/javascript'/>

You can edit the numbers in red, if desired. If a post does not have photos, the length of the summary is 500. If a message contains image and text length will be 450, and the first image displayed will have the following dimensions: 

width= 120, and 
height= 100. 


STEP 2:  
Once again in the template, find (CTRL+F) this: 

<data:post.body/>

Then REPLACE that line, with this code:

<b:if cond='data:blog.pageType == "item"'> <data:post.body/><b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/><b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div><script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");</script> <div style='clear: both;'/> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More...<data:post.title/> </a></span></b:if></b:if>

You can edit the blue words above with your own words or you can place a picture. by putting this link:

<img src="Your-Picture-link" />

Save the template and ready to see the effect by clicking “View blog”.