I came to know with this amazing Read More Hack of blogger!
All previous hacks were controlled manually where author can differentiate the summary length and this make the HomePage awkword due to different lengths of posts. But this hack summarises the posts with predefined and same length. All previous hacks were not applicable to all previous posts but this one applies on all posts either pervious or upcomings. The additional quality for this hack is its thumbnail show! Yes! It shows the first picture of the post as Thumbnail.
Here are the details of this hack:
Here are the details of this hack:
PART-1
First we have to add some JavaScript code in the Head Section of Template, for this login to your Website/Blog and navigate to Layout section of your appropriate Blog. Here you navigate to sub section Edit HTML and check the box just before Expand Widget Templates option.
Now search the template code for tag </head> and place the following Code just above that tag for the First Step:
Now search the template code for tag </head> and place the following Code just above that tag for the First Step:
<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; 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 Second Step search out the tag <p><data:post.body/></p> and replace the whole tag with the code given below:
<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'><img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/></a></span></div></b:if>
The job is DONE! Now first you Preview your Template and if found satisfactory then save the Template.
PART-2
Now I will tell you that how to customize the template code as per your needs and template theme.
Here in default the Thumbnail is unformatted. If you want to change the format e.g. you want the Thumbnail to be shown at left side, just replace the "no-float" with "float" from var thumbnail_mode = "no-float";.
img_thumb_height = 130; this atribute defines the hieght of the Thumbnail, where 130 is pixels.
img_thumb_width = 281 ; this atribute defines the width of the Thumbnail, where 281 is pixels.
To adjust the Thumbnail area just varry the pixels.
summary_noimg = 500 ; is default. For default; if you don't have any image in post; the summary will comparise of 500 characters, you can change the figure 500 as more or less you want.
summary_img = 400 ; shows that the summary of the post with Thumbnail will comparise of 400 characters, here you also can change the figure as per requirement.
[[[http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png]]] is the URL of the "Read More" Button used in this Hack, if you have yours then you can change the above URL with the URL of your button.
Here in default the Thumbnail is unformatted. If you want to change the format e.g. you want the Thumbnail to be shown at left side, just replace the "no-float" with "float" from var thumbnail_mode = "no-float";.
img_thumb_height = 130; this atribute defines the hieght of the Thumbnail, where 130 is pixels.
img_thumb_width = 281 ; this atribute defines the width of the Thumbnail, where 281 is pixels.
To adjust the Thumbnail area just varry the pixels.
summary_noimg = 500 ; is default. For default; if you don't have any image in post; the summary will comparise of 500 characters, you can change the figure 500 as more or less you want.
summary_img = 400 ; shows that the summary of the post with Thumbnail will comparise of 400 characters, here you also can change the figure as per requirement.
[[[http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png]]] is the URL of the "Read More" Button used in this Hack, if you have yours then you can change the above URL with the URL of your button.
