How To Add Automatic Readmore And Thumbnail Hack in Blogger

We use Read More or Expandable Post hack in blogger to show small sized post summary on home page. Read More Function helps us to reduce the loading time of our blog and also it gives some more page impressions if we have huge direct traffic to the home page. Look at my home page you can find a difference in the posts showing here and when you visit on the post item page. In old type of expandable post function we use span and full post function Automatic Read more and Thumbnail Function is based on Java script. We have to setup it once according to our need and rest is taken care by the Java script it self. It's cut automatically and if we insert image, it appears as a small thumbnail.

How to setup Automatic Read more And Thumbnail Hack in Blogger

1. First Of all go to " Layout" click " Edit HTML"
2. Before any next step please take a Full back of your template.
3. Tick on " Expand Widget Templates"
4. Find </head> code
5. Copy and Paste below JavaScript under </head> code

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://cebong.ipit.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Note in this code we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

6. Find this code

<data:post.body/>

7. Replace with this code below

<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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more “<data:post.title/>”</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Save and Check your Blog.

Please Note Before editing download java script file and upload it to your own hosting server because our Bandwidth limit is exceeded and causes not proper function of this hack. You can use yahoo's Free Geocities Hosting . Please Click here to download the Java File

After Downloading The File Please Change this find " http://cebong.ipit.googlepages.com/read-moreotomatis.js " and replace it with your file link.

(Source)