Blogger Tip: "Read More" Hack, Automatic Summary and Thumbnail Script

Updated: May 21st, 2011

If you’ve observed my old blogger template when the site was on Blogger, it has a "Read More" link after every post on the main page with a nice icon.  Previously many bloggers tried to create such scripts, but they were either laborious or untidy. Now the present script performs better than all the previous blogger "Read More" hacks for creating summary of posts on the main page. The earlier versions had some disadvantages like, it was needed to add the following tag in all post pages while writing new posts. 

Type your summary here
<span id=”fullpost”>
Type rest of the post here
</span>
 
So if you already have some posts in your blogger say for e.g 100 posts, you need to edit all those posts again. So the restriction for this hack is that, this will work only for the future posts and you need to add the above code for every post. Also this script cannot create automatic thumbnails for the posts. This is a restriction of this script. Now there is a new script, sourced from TechieBlogger, where you can have an automated thumbnail for every post and automatically size the content of a post into a summary with a nice "Read More" icon at the end of each summary.


The installation instructions for this new script are as follows.
 
Basic Step : Add JavaScript to the Header


To add the javascript to the header, first you need to login to blogger and goto "Layout" and the "Edit HTML" sub tab. First backup your template, by downloading to your computer. Then find tag </head> in the TEMPLATE code. Just before the  </head>, insert the following code. 

——— Code Start ————
<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://techieblogger.com/wp-content/uploads/2009/08/readmore.js’ type=’text/javascript’/>
 
——— Code End ————
 
Since the .js script in red color is executed from the "TechieBlogger" site, it may take up valuable resources on the site. So it’s better to download the .js script in red color and upload it to a file-sharing site, which can allow .js scripts. You can google for sites which allow to upload .js scripts.

Note: After inserting the following code, if you get any HTML or Template errors, just replace the single quotes in the above code, with single quote using your keyboard. This problem I faced when I tried to copy from the author post, as the code was not formatted correctly. This only refers to single quote problems. Other template problems, you need to solve yourself.

Then , save your template.

Final Step: Add the following code in Post Body

Now, check "Expand Widget Templates" option in the "Edit HTML" page and search for this tag.

<p><data:post.body/></p>

Replace, the whole tag with the following code.

————  Code Starts —————-

<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>

————  Code Ends —————-

You can download the "Read More" image & upload to your favourite hosting site, as otherwise, it may cause resource hog on the present link.

Note: If you find the same problem of single quote in your template, just replace all single quotes in the above code with single quote from your keyboard. Also, sometimes, you may find 2 or more occurrences of , in your template or HTML code. Just replace the first occurrence of that code. If you still have errors, just do a trial and error with 2nd and other occurrence. You can now preview your blog and save it. You should now see your homepage like this.

rm1 Blogger Tip: "Read More" Hack, Automatic Summary and Thumbnail Script













Customizing the Code


We can also customize the  code in the BASIC STEP  to suit your needs.
  • 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 your 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.

     

    Customizing "READ MORE" IMAGE

     

    Suppose, if you don’t like the image at the end of summary, you can define your own image icon and upload it to a host and replace the red url link with your own link. Also if you don’t like the image or you feel it is un-necessary, you can replace the code in the FINAL STEP with the following code.

    —–Code Starts ——-

    <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>

    —–Code Ends ——–

     

    You can replace the "Read More" with any other text you like.

    Hurray, you learnt another important tip on hacking blogger template.

     

    Technorati Tags:

    ,,,,,,,,,,,

    ,,,,,,,,,,,

    ,,, ,,,,,,,,,

    ,,, , ,,,,,,

    ,,,, ,,, ,,,

    ,,,   ,

  • share save 256 24 Blogger Tip: "Read More" Hack, Automatic Summary and Thumbnail Script

    Related posts:

    1. Related Posts for Blogger : Widget Inserts Automatically
    2. Windows Live Writer! Blogger
    3. Windows 7: Customize Thumbnail previews in your taskbar
    4. Autopatcher: No Need of Automatic Update: Download updates and install them on many computers.
    5. Beware of iPad Malware in the form of iTunes Update
    6. Caret Browsing in Google Chrome
    7. Windows 7! Show Desktop Icon
    8. Ownership and Google Adsense.