How To Add Auto Read More With Thumbnail To Your Blogger Blog

The auto read more script helps you to make your blog homepage look neat by summarizing post content and adding a thumbnail. Then, there will be a Read more or Continue Reading link which when clicked will take you to the entire post.

How To Add Auto Read more:

Note: Before trying out this tutorial make sure you backup your blog template.

Step 1. Login to your blogger dashboard and navigate to Template section;

Step 2. Click on Edit HTML

Step 3. Click anywhere inside the code area then press ctrl + F to find this code

<data:post.body/>

Step 4. Hit Enter Key. You will fin this code more than once but you have to stop at the third one.

Step 5. Replace the above code with the line of code below

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

If you did not notice any changes after applying the above code, kindly replace the second <data:post.body/> tag too with the code above

Step 6: Now search for the </head> tag in the template and paste the line of code below immediately above it.

<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; } </style> </b:if> </b:if>

Note:

-to change the number of characters shown on the homepage there is no thumbnail (photo) modify the 490 value in red.

-to change the number of characters shown on the home page when there is a thumbnail or photo in the post, modify the 400 value in red and if you want larger or smaller thumbnails.

Step 7: Click on save template button to save the modifications you just made.

I hope this tutorial helps you successfully add this script to your template.