Show Orignal Size of the Image in Summary of Post/Readmore [ Blogger ]

Here is the solution for those bloggers, Who want to Show orignal size of the image with specifed number of characters. This is Rehacked "Readmore.." which adds "Read More..." expandable link automatically to all their posts with orignal size of the image ('No resizing of images').
View Demo here

In old readmore hack, 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 also you have to specify to resize the images  in your post. If you select it as width:200, height:150, then all your posts first image will be resized to your specifed size.

But this image resizing will effect on some photo based blogs, for example if your blog niche is games downloading, you should need to show the full size of the game screen short to your reader for attract and some message about  the game....

Instructions for fresh install:
(if you already have installed "Read More" hack see below for How to re-hack?)

Step 1: 

Download this file: Readmore_Rehacked.js

Step2:
Upload the file to any host site that allows .JS like HotLinkFiles.com,
BOXSTR.com
or your own host.


Step3:

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 src="http://softwareroxer.110mb.com/summary-posts_edited.js" type="text/javascript"/>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 50;
summary_img = 50;
img_thumb_height = max-width;
img_thumb_width = max-height;
</script>
<script type="text/javascript">

Step 4:
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 != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'><img src='http://saer.sm.googlepages.com/readmorenow.png'/></a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Finally preview and save the template.



Instructions for who already have a Read more hack on their blog:


Step 1: 

Download this file: Readmore_Rehacked.js

Step2:

Upload the file to any host site that allows .JS like HotLinkFiles.com,

BOXSTR.com

or your own host.

Step3:

Log in to Blogger, go to Layout -> Edit HTML, and unmark the Expand Widget Templates box. to make it easy.

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

summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;

The numbers are may veary so look for similar to this on you template.

after this 4 or 6 lines or above these 4 or 6 lines you can find the script source link of the JavaScript file, Just replace the link with your link (that is where you upload the rehacked readmore.js file). this script will work with same codes for old readmore hack, no need to edit .

(Note: if you have any problem change img_thumb_height to "max-height", img_thumb_width to "max-width")

Thats it!