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

How to brand posts inwards the spider web log homepage to hold upwardly displayed amongst an automatic "read more" push in addition to a thumbnail.

To hold upwardly to a greater extent than specific, this volition demo the championship of the post, a curt summary amongst a break of characters in addition to a thumbnail, that volition hold upwardly the thumbnail of the kickoff image uploaded within the post. After the thumbnail in addition to the postal service summary, at that spot volition hold upwardly a "Read More" link which, when you lot click on it, volition accept you lot to the actual post.

This Automatic Read More script volition summarize content in addition to the postal service summary volition hold upwardly shown exclusively on the primary spider web log page (homepage), category pages, in addition to archive pages.

Using the Automatic Read More characteristic inwards Blogger Posts

Step 1. From your Blogger dashboard, larn to "Template" in addition to click on the "Edit HTML" button:

Step 2. Click anywhere within the code area, in addition to then press the CTRL + F keys in addition to search for this tag (hit Enter to honor it):

<data:post.body/>

Note: afterwards hitting Enter, you'll honor this code to a greater extent than than 1 time only you lot involve to destination at the 3rd one.

Step 3. Replace the code to a higher identify amongst this one:

<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>

Note: if you lot don't come across whatever changes afterwards going through all the steps, delight crusade to supervene upon the mo <data:post.body/> every bit well.

Step 4. Now search for the next tag:

</head>

Step 5. Just to a higher identify the </head> tag, add together the next script in addition to 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[
purpose removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var second = 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);
furnish strx+'...';
}
purpose 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 amongst 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 != "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 alter the break of characters shown when at that spot is no thumbnail, modify the 490 value inwards blue. For the break of characters shown when a postal service has a thumbnail, modify the 400 value.
- If you lot desire larger thumbnails, modify the 160 (height) in addition to 180 (width) values inwards red.

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

And this is how you lot tin add together machine read to a greater extent than amongst thumbnail to Blogger posts. Enjoy!