In this posting I will try to explains how to create automatic read more for each post for Blogger and applied to all post no exception . There are several ways to make this automatic feature, usually this automatic feature are added under post blog or articles in Homepage.This Automatic function itself is one of the ways to make the homepage more dynamic, simple, and stylish with the caption, image transition effects and has a brief description that can be adjusted in length making it easier for visitors to read the article as desired.
While this automatic version, the size of the image has the interesting transition effects as well as the size can be adjusted as needed. Recommend for Post, at least should have one picture though, but that’s optional, this works fine with or without image inside the post.
Add Read More Function Automatically In Blogger
To add this function only takes a few minutes. Auto read more on the front page has several versions, and for the following version is a lite weight. The First Picture in the post will be used as image thumbnail automatically but you can also choose not to show thumbnail. This read more articles can be modified as needed, explained in the description bellow.Here are the step by step applying auto read more in Blogger. Note: for those who have created another version before, it must be removed first. Then use following.
1. Log in to Blogger.
2. Click the Template, Backup template as needed.
or this tutorial can be tested using other experimental blog.
3. Click on Edit HTML.
4. Click Anywhere with Left mouse key 1 x in box template.
5. Click Ctrl + F (In order to speed up the search code), And find this code
</head>Add the code in the search box, then enter to search.
6. Add the following code above the
</head>CSS and Javascript Auto Read More
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes or no
summary_noimg = 300; //if no image
summary_img = 250; //with image
img_thumb_height = 165;
img_thumb_width = 280;
</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){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!-- Auto read more End -->Note: Try first without editing.
Blue color is to set the number of article description (snippet).
Green color is to setting width and height of the image (it must be same).
7. Then Search this Code
<data:post.body/>The code above usually there are 2 (in original blogger template), first for mobile version and second is web version, Search for the web version, usually the second with 2x enter in the search box. But if you have implemented another version may be there are 3 (you have to erase the previous version first).
8. Remove the second code of
<data:post.body/> and Replace with this code.HTML
<!-- Auto read more Start -->
<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 class='read-more'>
<a expr:href='data:post.url'>Read More »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more End -->"Read More" text also can be changed as desired.
9. Preview it first, if it works then continue Save Template, and see the results.
Hopefully can be useful.
