Automatic Read More hack for Blogger with automatic Thumbnail creator script

first of all i would love to thanx ritesh for this great script

You have seen many a times the Read More Widget made by Hackosphere was very popular but was not able complete most of needs.

1. Major Problemwe have to add this code always.
Type your summary hereType rest of the post here
2. This feature can be available only for future posts.That is if you already have 50 posts in your blog and then after that you are adding this hack to your template then you need to add the above tag in each and every previous 50 posts to make this hack working. But it's a tedious process.
3. Can't create Thumbnails automatically This hack can't create automatic thumbnails for posts.Now a new version has been developed by my blogger friends. I would like to share that new version of read more hack with you all.
Read More hack with automatic Thumbnail creator script This hack has overcome all the drawbacks of the previous version of read more hack. This hack is developed by Blogsphera . ( Translated version ).Let's see the installation instructions :
Adding the JavascriptTo add the javascript files to the header , first login to your blogger account. Then navigate to Layout section of your blog and then move to EDIT HTML sub tab and check " Expand Widget Templates " option in the edit html page.

then search for </head>

Now place the following code above that tag </head> :

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js' type='text/javascript'/>

Then Add This Codesearch for this tag <p><data:post.body/></p> or <data:post.body/>

Now replace that whole tag with the code below

<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p><b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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'><img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/></a></span></div></b:if>

You can now preview your template and then save it.
Customizing 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.

http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png

If you want to change the image then replace the url of the image with your own imageor 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>

source :http://www.techieblogger.com/

after all thanx to ritesh for this great trick and tutorial

As a 17 Year Old Student,The Only Income i rely is my Pocket money.Bearing The Running Costs Of This Site Is Really Very Difficult.We Provide Enormous Information About Internet.To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.

Kindly Bookmark and Share it: