New Automatic Read More Plugin for Blogger – Create Post Summary Widget with Thumbnails
This is only a 2 Step Process which will help you to show posts summaries with thumbnails on the blogger homepage,category page(label), archives and search pages. This is a very nice read more plugin from bloggerplugins .
Previously, the read more hack for blogger was good but it was clumsy and one had to manually add function span tags to the post”s html to make it work. But this read more pluging for blogger doesn”t need any tedious work. Its just install and it works like amazing.
Plus its automatically generates thumbnail for the post based on the images inside the posts which is quite cool.
How to Add Automatic Read More Plugin for Blogger – Procedure
Step 1 : First of all Edit your blogger template. Make sure its HTML Expanded.
Find this code
</head>
and replace it with
<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 230; summary_img = 140; img_thumb_height = 100; img_thumb_width = 100; </script> <script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/> </head>
Offcourse you can edit these parameters.. See below for Customizations.
Step 2 : Now Find
<data:post.body/>
Replace it with
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span> </b:if>
You Can change Read More with Continue Reading , [...] , Read Full Post, etc…
You ca also Replace “Read More” with an Image. For eg.. 
Replace Read More in the code with <img src=”http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif” align=”right” border=”0″/>
And you are done.. now you should have the post summaries.
Details which can be customized:
1. thumbnail_mode var = “float”;
If you prefer the image on top and the summary below, put “no-float”.
2. summary_noimg = 230;
Place the number of characters in the abstracts that do not contain image.
3. summary_img = 140;
Place the number of characters in the summaries with pictures.
4. img_thumb_height = 100;
Customize the height of the image-thumbnail.
5. img_thumb_width = 100;
Customize the width of the image-thumbnail.
For Any Details …. you ask in Comments.
Post by Debajyoti DasNext »
71 Responses »
Irfan Siddiqui : Thanks! This is what i was finding for my blog, now i'm going to use your trick for my blog.
Jasmine Mayfair : Thank you so much for placing it here :) And thx for your support too
Debajyoti Das : Your Welcome.... :)
Rajan Gupta : This is feature I am looking for ....earlier I have rejected many good templates as they have no such plugin.now I can select any template and amend it with the above hack .Thanks DD for a wonderful post
Daily Phones : Great widget! I have it at my blog to ;)
Irfan Siddiqui : Hey they were not accepting your trick, I mean blogger is not accepting that code they were showing an 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".
Debajyoti Das : @ Irfan - Well Thats not the Problem with The Trick or Plugin..... Its becoz of some html error.... Clear your browser Cache ...and Try again.
Debajyoti Das : Thank You Rajan.... I know you have a good taste of widgets ....
alok : i have already to you about this hack .......
Praveen : Dear Friend, Pls tell me if i do the change in html template of mine. all my gadgets will be safe. Plse tell me.. actually i am a non technical person. i m from accounts department. Thanks Praveen
Debajyoti Das : @ Praveen - You you add this Widget... nothing will happen...
Irfan Siddiqui : Don't know why but this is not working :(
Debajyoti Das : @ Irfan - I tested it Myself .... It Works Fine...
Amaresh : hi .. wht it's not working for me .. givng error :D
Debajyoti Das : ** UPDATE : The Post has been Updated Check .... Now it will Work Fine **
Amaresh : still getiing the same error "Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The element type "html" must be terminated by the matching end-tag ""."
Debajyoti Das : @ Amaresh - Try From the Beginning... because The Code is Perfect Now....
Irfan Siddiqui : @ Debajyoti das Thanks dude for updating it, now its working thank you very much. but i want to show this read more button after where i want to put in my post, how did i to do this?
Daily Phones : Cool Hack! thx men
Matthias-Müller : Sometimes it's really that simple, isn't it? I feel a little stupid for not thinking of this myself/earlier, though.
meso : perfectly fit on my blog...great job...but what i want is to have a justified or align posts...it is not align...if u can make it you will be the best! please let me know if u know and if it is free to share...thanks a lot!
Aneesh : Hi, please host the javascript files by youself.. Please dont link to mine!! http://files.bloggerplugins.org/excerpt.js
Debajyoti Das : @ Readers - Like Anish Said... You should Host the Javascript Files By yourself .... So that there is no bandwidth problem
amin : I don't know how to thank you, that was my greatest consern. thaks again mate. really
Prakash : Thanks Mate! It worked for me.
Amy : Great! I'm working on adding this to my blog now, thanks!
Joshua : Got the same problem with Irfan, but solved! Just change the bracket from Read More to Image example: align="right" to align='right'
Reshi Mahendra : i can't find this tag . I'm new in blogger. Your advice'll help me a lot,.. Thanks
Reshi Mahendra : I mean the data:post.body/ My first comment was filtered because including the (data:post.body/) tag. so i remove the tag part... Thanks Regards, Reshi Mahendra
TANUJ VERMA : good work dude
tea jukić : thank you so much, it worked out perfectly!!!!
Marshall : My dear thank you very much for your trick. and I dont know how i can thank you for that recomendable job you have done. I have been looking for this for a while and am going to share it on my blog. Chech it out! http://dyton.blogspot.om
Wayan armana : good post, i wiil try it!!!!!!!!
A.Fatih : Hi, Thank you so much for this very active "read more" script. I've used it for my combined blog . Best regards!
Debajyoti Das : @ A.Faith - Ya this is a gr8 script.....
mike : how can i make the thumbnails clickble as read more also?
Debajyoti Das : @mike - Just manually edit the javaScript... look for "img src=" and add the proper "a href=" tag as same as the title link.
deniz : Is it possible to get rid of fixed thumbnail image height*width and make it to appear same size as it's displayed within the full post?
Debajyoti Das : @deniz: Edit the height width fields in the script...
deniz : yeah, but the size and orientation of the image varies for each post. Some are vertical and some are not. That makes the thumbnail images look weird. So is it possible to edit in such a way that images appear as it's displayes in that post?
Debajyoti Das : @deniz: Thats a problem.But in the script locate the "< img src" and remove the height attribute, only keep the width. This will maintain the aspect ratio of the image. I hope you get my point. If you edit the script ... you have to upload it somewhere and call it from there.
deniz : let's see if I got the point :) I located "<img src" There were two of them. a few lines under the first one, I removed the complete line of "<img alt='' class='icon-action' height='18' " That didn't change anything though.
Debajyoti Das : @deniz: Wrong... edit this file http://blogergadgets.googlecode.com/files/excerpt.js . Remove height="'+img_thumb_height+'px" after the finding < img src
deniz : sorry for lae response, it took me a while to figure out what to do :) I removed the height part and uploaded the file to some upload website and called it within the html script from that link as you said. but it resulted as a "read more" link under the full post, without summerizing it.
Debajyoti Das : @deniz: This wasn't supposed to be... it worked fine when i tried.... may be there was an error in the script... Try fromk the beginning... just remove the height.
deniz : yep, that's what I'm doing, still having the problem. Hey, is it possible that the upload website I've used is causing the problem? should I upload to googlecodes or somewhere else?
Debajyoti Das : @deniz: I don't think so... Try the original script ... From now on use a square image as your first image in your post....
Tom : Thanks 4 share, it's a good widget :)
Nooks n Corners : Wonderful script. Exactly what I am looking for. Thanks very much!
Krishnakant Sonakiya : Thanks for your help friend. Though, that image html is not working fine. It doesn't parse the code and I had to stick with 'Read More' (plain text) rather than cool looking image.
Debajyoti Das : @Krishnakant : You can replace the code with your own image path... and it will word fine ... in fact you can use < button > Read More </ button > (remove spaces)
Animesh : Hi, Thanks for the code. This is what I was looking for and it is working perfectly fine. I just see a problem with this. It summarizes other pages as well and "read more" option does not work as well. Though it works perfectly well for the home page. Please see it on this page... http: //animeshkmishra. blogspot .com/p/about-this-blog.html
Nature Blog Site : It works!!! Thanks a lot!
Bird : Hi, it works wonderfully well as you can see here on my blog. BUT, I have a couple of little questions pls: 1. How can I keep the first post on the homepage as a full post pls? i.e. - have all the older posts as summaries, EXCEPT for the latest post please? 2. How can I have the text "wrap around" the image on the post summaries pls? ANY help would be greatly appreciated! :) Thanks again!
demetris : i've done those but i want the exapnded post not to be shown on the main page but be shown when someone clicks on read more?how can i do this?
Aaron Stuesser : I like this trick, but all of my pictures are rectangular and they seem to be getting "squished" to fit into the square frame. Is there a way to have the pictures be cropped so that they will fit in the square frame right?
debajyoti : @Aaron Stuesser: Ya you have to manually edit the javascript... and remove either on of the fixed width or height... then it won't look squished
ArrowFX : Hi I like and already used the trick. However, there is one minor problem here. Please understand that I am not a programming savvy. This trick works well on the regular post. But, in the static page it can't show the rest of the post. When we click the 'Continue Reading' it will only refresh the page. I think it is because the page has only one destination: http://yourblog.blogspot.com/p/yourblog.html Therefore, when the 'Read more' is clicked it will only lead to the same page. Please help me. Thank you
Raul : yes, this is trouble in the static page...
Jayrweblog : I already used this trick, and it's working fine, thanks!
WME : Is there a way to customize which part of the main post text is captured for the Summary text? Right now it automatically pulls the first 240 characters, but I want to be able to pull out other areas of text in the summary (not just the first part).
rose : hey thank you for share this It's work but,I would like to change img_thumb_height = 100; or width how to show image thumb 100% Fit,Image contrast. I mean. Shrink the picture down. But to see the whole picture 100%
SERKAN : How do I make the thumbnail clickable so that it behaves like the Read More button? I tried your method but I want this auto. Please help me. How can I do?
Maia : This was nice and many thanks for it, but all the sudden the script vanished. It's a 404 error. Any idea what' going on?
Aswin : An Error occurs.The error shown is given below Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute "{1}" associated with an element type "src".
Bintang : This tut is good and works well. However, when I move to another menu-tab (another post), and then back to the previous post with "read more", the expression "...read more" disappears from the page. Can you explain sir, how come?
David : We were using a similar script until we got too frustrated with the lack of customization ability, and the fact that the thumbnail images were always messed up. So we coded a better script that provides more customization and fixes the thumbnail issues!
Kapil : I am using this Trick. But after using this trick now I can't see my Blog pages completely.After clicking on the read more it It shows my post completely but it isn't showing my Blog pages.It only shows my blog pages summary.Help me please.
Harry : I'm really inspired together with your writing abilities and also with the layout in your weblog. Is that this a paid topic or did you modify it your self? Either way keep up the nice quality writing, it is rare to look a nice weblog like this one these days..
TonyMo : Is there a way to make the thumbnail variable size, so that it doesn't distort the images from the blog if they are landscape/portrait?
french montana : Hi just wanted to give you a brief heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different web browsers and both show the same results.
» Leave a Reply