Auto Read To A Greater Extent Than Amongst Thumbnail For Blogger/Blogspot Posts

How to brand posts inwards the weblog homepage to hold out displayed alongside an automatic "read more" push as well as a thumbnail.

To hold out to a greater extent than specific, this volition exhibit the championship of the post, a curt summary alongside a discover of characters as well as a thumbnail, that volition hold out the thumbnail of the get-go image uploaded within the post. After the thumbnail as well as the shipping summary, at that spot volition hold out a "Read More" link which, when y'all click on it, volition lead maintain y'all to the actual post.

This Automatic Read More script volition summarize content as well as the shipping summary volition hold out shown alone on the primary weblog page (homepage), category pages, as well as archive pages.

Using the Automatic Read More characteristic inwards Blogger Posts

Step 1. From your Blogger dashboard, become to "Template" as well as click on the "Edit HTML" button:

Step 2. Click anywhere within the code area, hence press the CTRL + F keys as well as search for this tag (hit Enter to discovery it):

<data:post.body/>

Note: later hitting Enter, you'll discovery this code to a greater extent than than ane time precisely y'all take to goal at the 3rd one.

Step 3. Replace the code inwards a higher identify alongside this one:

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

Note: if y'all don't run across whatever changes later going through all the steps, delight crusade to supersede the minute <data:post.body/> every bit well.

Step 4. Now search for the next tag:

</head>

Step 5. Just inwards a higher identify the </head> tag, add together the next script as well as CSS code:

<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[
business office removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var sec = 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);
provide strx+'...';
}
business office 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="Auto Read More alongside thumbnail for Blogger/Blogspot Posts"><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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 alter the discover of characters shown when at that spot is no thumbnail, modify the 490 value inwards blue. For the discover of characters shown when a shipping has a thumbnail, modify the 400 value.
- If y'all desire larger thumbnails, modify the 160 (height) as well as 180 (width) values inwards red.

Step 6. Click on the "Save template" push to relieve the changes.

And this is how y'all tin forcefulness out add together motorcar read to a greater extent than alongside thumbnail to Blogger posts. Enjoy!