[img]http://4.bp..com/-hSzSoAVgwMo/Vp7KoVB0ppI/AAAAAAAATNQ/BETgLRO1WvQ/s1600/read%2Bmore.jpg[/img]
By adding the Automatic Read More Hack or Automatic Read More Script to your blogger blog will make the home page of your blog look more professional and organised. This trick am about teaching you will show the title of the post, a short summary of the post and a thumbnail (photo), the photo will be the first photo uploaded in the post. Then, there will be a Read more or Continue Reading link which when clicked will take you to the entire post.

READ ALSO: How Google Adsense Approved Me With Just 8 Blog Posts

Now to add this to your blogger blog...

=====> Login to your Blogger Dashboard, go to Template, Back Up your Template and click on Edit HTML.

=====> Click anywhere inside the template and find the code highlighted below using CTRL + F

<data:post.body/>

After hitting the Enter key and you will find this code more than one, please stop at the third one.

=====> Now replace the code above with the one below.....

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

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

====> Now search for the </head> tag in the template and paste the 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 != &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>

====> Now this is where the main tweaking comes from, 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, modify the 160 (height) and 180 (width) values in yellow.

READ ALSO: How To Transfer Money From UBA To Another Bank Using Umobile App

=====> Now click on Save Template, view your blog and see how the change has taken place.

That's it, I hope this helps?

Kindly subscribe to the blog to receive my latest updates and don't forget to share it with your friends using the share buttons.

Thanks for reading my first post of year 2016.

Source:http://www.jacobakpene.com/2016/01/how-to-add-auto-read-more-script-with.html

cc lalasticlala

Nairaland has turned some of the scripts to their similes, kindly go to the link to apply the tutorial on your blog. Thanks.

I already have dat in my template. Thanks for posting