Read More hack for Blogger with automatic Thumbnail creator script

You might have noticed that since few weeks I have been using a strange script which enables us to summarize content and show only the summary with a thumbnail in Home Page , Archives page and Labels page.

Since some of my readers requested this hack in gtalk , so I am going to explain How to add this hack to your blogger template.

Before going into this , I would like to mention the previous versions of this created by some of my fellow Bloggers.

But these versions had some disadvantages like :

1. It can’t automatically create summaries.

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

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 Javascript in the header

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

There search for this tag : </head>

Now place the follwing 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://techieblogger.com/wp-content/uploads/2009/08/readmore.js’ type=’text/javascript’/>

then save your template.

Final step : ADD the code in post body

Now check ” Expand Widget Templates ” option in the edit html page. And then search for this tag

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

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.

it will look like this :

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.

    If you want to change the image then replace the url of the image with your own image

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

    change the tag in red to suit your style.

Hope I have explained everything in this script. if you need any other modification or help please feel free to add to gtalk. I love to help you guys.





If you like this article , then please help us by bookmarking

48 Responses to “Read More hack for Blogger with automatic Thumbnail creator script”

  1. Rajtilak Bhattacharjee 14. May, 2009 at 6:33 am

    This is a wonderful hack Rias, but there is a slight glitch. For those (like me), who uses Adsense codes inside their template to be displayed below the post, it would not be possible to display more than 3 posts on the home page. That is because the Adsense ads would be visible outside the post’s “Read more…” link. Is there a solution to that? If there is then this is the best thing that has even happened to Blogger.

  2. @ Rajtilak Bhattacharjee

    friend by showing adsense ads in Home Page , Archives Page or labels page you can't make much money since the ctr will be low and also the reader would like to jump to some link..

    so the bounce rate in homepage will be high.. It's better you can show ur ads in post pages only..

    by using
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    this tag u can show adsense ads only in post pages… i will post an article on this soon..

    regards,
    Mohamed Rias

  3. This hack is introduced during 2008 November mate my me and published various languages…
    This hack is not succeeded since i have made it on only on characters count to and eventually it failed since it does not give proper formatting and if the JS has been a Great problem in IE and so i stopped it further development…
    So it may sometimes make our blog to look not too clean…
    One more thing using this script will always load the fullpost and a part of text will be hidden by using Javascript mate..
    Thats it…

  4. @ Guidetotech

    thanks for the info.. I will fix those bugs soon.. and will release new version of this hack soon.
    regards,
    MOhamed Rias

  5. Hi
    I found an amendment from bloggertricks.com. Here’s the script I posted:
    http://testblogforska.blogspot.com/2009/05/script-for-read-more-and-post-summary.html

    It can be seen here at the blog I set up to test the template:
    http://testblogforska.blogspot.com/

    cheers
    ska

  6. Nice post Mohamed.
    I’d like to post it on my blog (an italian blog)…so can’I?

    Omar

  7. @ Dr.Denvoizer ,

    ya sure.. you can translate this post.

    regards,
    Mohamed Rias

  8. Ficou ótimo!
    Obrigado!!!

  9. thanqs for this post…

    but i want to add read more button for select post only..
    i mean read more link i want add for selected posts only ….
    pls help i struggle for this for long time…..

    This is my blog
    http://funevil.blogspot.com/

  10. thank you so much for this post, I added it to my newest blog and it works great!


    http://ladybinfo.blogspot.com/

  11. It works. but i have a few problems…ill post them once i have re evaluated everything.

    Thanks…

  12. salam
    bro i tried to add this hack but it didnt work for me πŸ™
    plz can u add this in my template :-s ??

  13. no one here to help πŸ™

  14. how can we show orginal size of image and more than one image in script

  15. great !!
    working fine for me. Some may have pb while saving their template : try to replace the quotes ‘ .
    Shokran Mohammed

  16. you can change (’) to (‘) and (DIV) to (div) because it is Incorrect

  17. thanks for this hack, but I can’t get it to work. I fixed a bunch of tag errors that blogger told me to fix. but when I preview the page, the blog posts don’t show up at all. any ideas?
    thanks.

  18. Nice post …….Its very usefull

  19. I have this hack in my site and it’s been working fine for several months. All of a sudden today the truncated posts are gone and only the full posts are showing. Is the java script down? Any ideas on how to fix this issue?

  20. @ Rajtilak Bhattacharjee

    Yo , I have updated the javascript link. Please add the script again

  21. Thanks so much for updating the script! It’s working again. I appreciate you being so quick to respond to the issue.

  22. Guys This Is My Problem:please Help me solve this , when i click save template this one appers

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

  23. It isnt Working now!

    the following Error is Showing!

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    And My Query is about the Thumbnail..

    Is their any Way to Change the thumbnail to left side??

  24. Even i am getting Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute β€œ{1}” associated with an element type β€œtype”. same error in my blog

    Please help…

  25. Hi…

    A very nice hack… But can we justify the text in summary? The alignment is not good for my blog. I think justfying the summary text will make it look good. So can you please say how to justify the text?

  26. Hello there,

    I am also getting the same error Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute β€œ{1}” associated with an element type β€œtype”. same error in my blog

    i really liked this hack but it is not working πŸ™ please help as i have long posts and i can show up only 4-5 posts in home page.

  27. Thanx Rias. The code work fine. But in first time I also get that error. after few changes code will work fine

    Find this β€œitem” and replace with “item”

    AND

    ’data:blog.pageType == "item"’ TO
    ‘data:blog.pageType == "item"’

  28. Sorry guys. My previous code is didn’t show properly in this post. so I post an image you can see here

    http://i430.photobucket.com/albums/qq26/mm9786/Edit.jpg

  29. Working great. Thanks for the widget.

  30. I have pasted the above code(first) above ,facing the error”your template could not parsed…”.pls help me to add this good hack to my blog.Thanx for a good useful post.

  31. I really like this hack and it’s working.. Thanks πŸ˜€

  32. hey, thanx for the usefull tips buddy…

    not all are correct but hey, after touch up it is work on my blog…^^

  33. for parse error just replace ` with ‘

  34. Hi Admin!
    Do you want link exchange? I have a page rank 4 and 3000 unigue visitors per day.
    Url http://shoaib01.blogspot.com/
    Titled AfghaN waRez

  35. Doesn’t

    work for you people…
    It worked evn in my blog which i simplified the code for mobile viewing
    http://blog.contactgayasri.co.cc

  36. I believe this is the best and efficient way of doing this than any other way. Check it out:

    http://praveenbattula.blogspot.com/2010/06/read-more-link-to-blogger-posts-without.html

  37. good work man its the best hack

  38. Showing Error while inserting code above

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

  39. Hi,
    I encounter the problem for Static pages in Blogger.
    It is not working on Static pages.

    http://uninorinfo.blogspot.com

    http://uninorinfo.blogspot.com/p/webmaster-about-us-contact-us-write-to.html

    The second one is a static page I created, where readmore hack effects it.

    Please tell me how to fix.
    Waiting for ur response..

  40. How can I justify the text in the summary?

  41. This is a trully wonderfull hack.Thank you so much!

  42. There’s only a small problem with pages(not posts). When you click on a page link it shows the summary of the page and the image all right but when you click on the read more it doesn’t show the whole page,just the summary again with the read more button.
    Can you please tell us how to fix this? Thx!

Leave a Reply

You must be logged in to post a comment.