Auto Read To A Greater Extent Than Alongside Thumbnail For Blogger/Blogspot Posts
How to brand posts inwards the weblog homepage to live on displayed amongst an automatic "read more" push clit in addition to a thumbnail.
To live on to a greater extent than specific, this volition demonstrate the championship of the post, a brusque summary amongst a pose out of characters in addition to a thumbnail, that volition live on the thumbnail of the offset image uploaded within the post. After the thumbnail in addition to the postal service summary, at that spot volition live on 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 live on shown alone on the master copy weblog 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 thus press the CTRL + F keys in addition to search for this tag (hit Enter to uncovering it):
<data:post.body/>Note: later hitting Enter, you'll uncovering this code to a greater extent than than 1 time merely you lot quest to cease at the tertiary one.
Step 3. Replace the code inwards a higher identify amongst this one:
<b:if cond='data:blog.pageType != "static_page"'>Note: if you lot don't run across whatever changes later going through all the steps, delight assay to supersede the minute <data:post.body/> equally well.
<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>
Step 4. Now search for the next tag:
</head>Step 5. Just inwards a higher identify the </head> tag, add together the next script in addition to CSS code:
<script type='text/javascript'>Note:
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
component subdivision 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);
furnish strx+'...';
}
component subdivision 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>
- To alter the pose out of characters shown when at that spot is no thumbnail, modify the 490 value inwards blue. For the pose out 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 clit to salvage the changes.
And this is how you lot tin plough over the axe add together machine read to a greater extent than amongst thumbnail to Blogger posts. Enjoy!
