Automatic read more with image hacked for blogger

Automatic read more with image hacked for blogger:You have to specify the number of characters after which the post will be truncated. If you select it as 500, then all your posts in the home page will show only first 500 characters.
And moreover this hack has already been modified to show the first image from the post, as a thumbnail along with the truncated post.

I called this hack as Automatic read more with image hacked for blogger, because through this hack you not only add the "Read More" tag to your posts, but it also optimizes your "Archive pages" (Feb 2008, Oct 2008, etc.) for search engines and
also for your readers.

Instructions to follow:

STEP 1:
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box.

Now find (CTRL+F) this in the template code:

</head>

And immediately ABOVE/BEFORE that, paste this code:

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>

You may change the numbers in blue, as per your wish. If a post doesn't have images then the length of the summary will be 500.
If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:
width= 120, and
height= 100.

STEP 2:
Now again in the template, find (CTRL+F) this:

<data:post.body/>

Then REPLACE that line, with this code:

<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;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Save the template and make your readers and search bots happy !

---

NOTE: Although the JavaScript file has already been uploaded and linked in the code in STEP #1, but as a backup I suggest you to download and save a copy of it:

BackUp - STEP 1:
Download this file: read-more_auto.js

Download Link

BackUp - STEP 2:
Upload the file to
MyDataNest (Recommended),
NOTE: Edit & save the folder properties at your MyDataNest account as "Hidden" and NOT as "Private".
And copy the DIRECT LINK to the file.

The code

Now let us see how to customize the code to suit your style :

• var thumbnail_mode = “no-float”;
By default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option ” float ” instead of “no-float”.
• summary_noimg = 500 ;
This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.
• summary_img = 400 ;
If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.
• img_thumb_height = 130;
This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.
• img_thumb_width = 281 ;
This tag decides the width of the Thumbnail image to be shown.

ADDING READ MORE IMAGE

 

The author of this hack haven’t included any read more buttons in this hack. But I have modified the code and have included a image to link to the full post. If you want to change the image then replace the url of the image with your own image or if you don’t need any read more button , then replace the code in final step to this one :

<b:if cond=’data:blog.pageType == “item”‘> <p><data:post.body/></p> <b:else/><DIV expr:id=’”summary” + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</SCRIPT> <div style=’clear: both;’/><div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’>Read More…</a></span></div> </b:if>
change the tag in red to suit your style.

Hope I have explained everything in this script. if you need any other modification or help please feel free to add to comments.