Blogger Auto Read more with thumbnail

Update Feb 2010:  Prevent read more from being applied to Blogger (static) Pages by adding static page conditional tag.

auto read more with thumbnailExpandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.

Not too long ago I wrote a tutorial on how to make a “conventional” read more, this time around we will make an auto read more with thumbnail. Before we go on, let me highlight the differences between conventional and auto read more.

(Blogger’s own read more -the jump break, can be classified as conventional read more)

 

Conventional read more vs. auto read more

Conventional read more Auto read more with thumbnail
Uses HTML Javascript
Need to insert code in post. Post is untouched.
Length of each snippet can be customized. Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added. Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post). The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet. Only loads the snippet.

 

Applying auto read more

Here we go:

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Check the  Expand Widget Templates check box on top right of the HTML window.
  5. In the code window, look for </head> line.
  6. Add the Read More code below right after that line.
    <!-- Auto read more script Start -->
    <script type='text/javascript'>
    var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
    summary_noimg = 430; //summary length when no image
    summary_img = 340; //summary length when with image
    img_thumb_height = 200;
    img_thumb_width = 200;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){ 
     if(strx.indexOf("<")!=-1)
     {
      var s = strx.split("<"); 
      for(var i=0;i<s.length;i++){ 
       if(s[i].indexOf(">")!=-1){ 
        s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
       } 
      } 
      strx =  s.join(""); 
     }
     chop = (chop < strx.length-1) ? chop : strx.length-2; 
     while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
     strx = strx.substring(0,chop-1); 
     return strx+'...'; 
    }
    
    function createSummaryAndThumb(pID){
     var div = document.getElementById(pID);
     var imgtag = "";
     var img = div.getElementsByTagName("img");
     var summ = summary_noimg;
            if(thumbnail_mode == "yes") {
     if(img.length>=1) { 
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
      summ = summary_img;
     }
     }
     var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
     div.innerHTML = summary;
    }
    //]]>
    </script>
    <!-- Auto read more script End -->
  7. After that, find this line: <data:post.body/>
  8. Replace the line with this code:
    <!-- Auto read more Start -->
    <!-- http://www.BloggerSentral.com -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Read more ...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->
  9. Click Preview. If it works, then click Save Template.

 

Customizing the snippet

You can customize the read more by changing the values of the variables below:

  1. thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
  2. summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
  3. summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
  4. img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
  5. You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.

That’s it, enjoy!


Before you leave:
  • Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
  • Any suggestion, question or comment? Please post it in the comments below.

229 comments to "Blogger Auto Read more with thumbnail"

«Oldest ‹Older 1 – 200 of 229 Newer› Newest»
Greenlava November 19, 2009 at 7:08 PM    

A reader asked how to apply auto read more only on archive and labels page. Here is the answer,

In step 8, insert this code after line 5:
[b:if cond='data:blog.url == data:blog.homepageUrl']
[data:post.body/]
[b:else/]
and
[/b:if] after line 10.

Replace "[]" with "<>".

Unknown November 19, 2009 at 8:31 PM    

Excellent ! You are first blogger that helped me with that problem. I tried to contact authors of those scripts and no one answered.

I got this to work, on both labels pages and archive pages, just like i want. But (!) i already have bloggers "read more" option enabled and used on every page, so, when i add your piece of code, it shows me two "read more" links. Posts without bloggers --more-- tag works just fine. You can check my test blog here http://novitest.blogspot.com/2009_11_01_archive.html and see how first post have two "read more" links.

Thanks once again. Best regards

Greenlava November 19, 2009 at 9:14 PM    

Саша Стефановић,
Here's my suggestion:
1. Use the original auto read more code in step 8, without modification. What this will do is applies read more to all pages, except individual pages.
2. Preventing duplicate read more's. If you don't want to go back to your posts and remove Blogger jumpbreak one by one, you can simply disable it. Here's how,
Find this code inside your template:
[b:if cond='data:post.hasJumpLink']
[div class='jump-link']
[a expr:href='data:post.url + "#more"'][data:post.jumpText/][/a]
[/div]
[/b:if ]


just remove it or enclose it in comments tag, like this:
[!--
the code in here
--]


Replace "[]" with "<>".

Unknown November 19, 2009 at 10:58 PM    

OK, that can be done that way too. But the problem is with my main blog where i want to implement this. http://svuci.blogspot.com. As you can see, I put image first, then one (two, three or more) sentence and then I put <-more-> blogger tag. So, if user what to read more, he can click there and he have whole post.

So, if i implement your hack for "show more" i need to put exact limit of number of characters to show before "read more" link (or i'm wrong). So, this isn't best option for me now.

I would be happy if I can continue to work with bloggers hack for "more" option only on index page (main blogger page), and use your hack on archive and labels pages.

This sounds too much complicated, but i think it's possible somehow.

Greenlava November 20, 2009 at 12:38 AM    

Саша Стефановић,
Now we're at it, it's not complicated at all. Just add a conditional tag in Blogger jumpbreak code so that it will only be active on homepage. Like this:
[b:if cond='data:blog.url == data:blog.homepageUrl']
[b:if cond='data:post.hasJumpLink']
[div class='jump-link']
[a expr:href='data:post.url + "#more"'][data:post.jumpText/][/a]
[/div]
[/b:if ]
[/b:if ]

I think that should do it.

Unknown November 20, 2009 at 1:02 AM    

Eh ... that's what i'm talking about. This works excellent. Thank you, thank you, thank you.

Big *thumbs up* for you.

Maybe you should write new tutorial with how to do this. I found many people asking on different blogs/forums this same thing.

THANK YOU !!!

Jeketb December 1, 2009 at 3:18 PM    

excellent tutorial. now my blog look more professional than before.

thank you very much

Unknown December 10, 2009 at 10:54 PM    

Hi i copied the code as per your instructions, but i am not able to get it to work. Don't know where i am going wrong. Please do check out http://a2zvegetariancuisine.blogspot.com/, thanks in advance.

Unknown December 10, 2009 at 11:14 PM    

Sorry got it to work, one question if i want to expand the space meaning if you check out my blog you will understand. It is kind of cramped and also can i put email me or other icons in thumbnail itself.

Greenlava December 12, 2009 at 1:53 PM    

A 2 Z Vegetarian Cuisine,
I agree it does look cramped. May I suggest other ways to make it less crampy?
1. Lose the border lines in the main column.
2. Move the bookmark button to be in the same line as the email link.
3. Align post footer and Adsense link with the post.
4. Adjust vertical margins to "loosen" the post area.
5. You made a label out of post tile. Is that necessary?

That's just my two cents. If you need help doing any of those, post here or email me.

Loveena Raj December 21, 2009 at 9:26 PM    

I just wanted to say - THANK YOU :) Works perfectly on my blog.

Greenlava December 22, 2009 at 12:30 AM    

My pleasure Loveena :)

Jerry H December 22, 2009 at 12:11 PM    

I've following all the step but result this error messages

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "type" associated with an element type "null" must not contain the '<' character.

what's wrong?? please help me..

Greenlava December 22, 2009 at 1:49 PM    

Jerry H,
Did you copy the code correctly? As explained in FAQs?

Jerry H December 22, 2009 at 2:17 PM    
This comment has been removed by the author.
Greenlava December 22, 2009 at 8:23 PM    

Jerry H,
This code should work on any template.

Jerry H December 23, 2009 at 12:17 AM    

I've try it one again and it's work!!
The problem was on the Setting > Site Feed > Allow Blog Feeds. I set it to "full" (before was "short")
Thank's Greenlava...

Nguyễn Đạt Tài December 31, 2009 at 3:29 PM    
This comment has been removed by the author.
ScientiaMag February 8, 2010 at 7:44 AM    

Really very useful.. I have implemented here - http://www.scientiamag.com/

Rosie March 12, 2010 at 3:58 AM    

I've been asking this question for weeks now - I tried it out on one of my testblogs before I try it on the main one but its still not working. I want to have static pages without readmore and summaries. When I put in your code and take out my automatic readmore codes its still the same - I can't get a whole static page - I just get it as a summary with readmore - I click on the readmore and it does nothing!

Greenlava March 12, 2010 at 5:57 AM    

@Rosie
What's your test blog's url?

Rosie March 12, 2010 at 6:35 AM    

Hi there - since I last was here I tried something different and didn't put any code in the first bit but took alittle of the code and put it just after the post data bit of the html






but it still puts the small thumbnail picture up and any words that I have written as a summary - I don't want those bits on it.

http://lnbtest1.blogspot.com/p/testing-static-pages.html

you can see on the static page it shows the hearts that I used to break up the photos and the thumbnail. I don't want to see that.

Greenlava March 13, 2010 at 10:06 PM    

@Rosie
I can't view your test blog, it's private.

Teacher Jim May 18, 2010 at 8:34 AM    

Thank you, thank you so much for such a clear explanation. I used your code to fix another template (WoodMag) that had the summary hack but it wouldn't work on 'pages'.

Now working on another template (d'Bluez) but instead of data:post.body, it has a widget. I'm not sure how to change that. Any ideas?
(http://zopalamtov.blogspot.com)

Teacher Jim May 18, 2010 at 11:17 PM    

Oops, forgot to expand my widgets to find data:post.body. Such a simple thing and I thought I had done it. So, answered my own question. [smile]

Thanks again for your article. Such a wonderful addition to any blog.

Depois da Chuva May 19, 2010 at 11:14 PM    

Great! I've searched for help in other million blogs and this was the only one that really helped me. Thank you.
BTW, I loved the other posts I've read...

Greenlava May 20, 2010 at 12:23 PM    

@Depois da Chuva
My SEO is that bad huh? hehe
Stay updated by subscribing.

harfy June 4, 2010 at 6:09 PM    

Hi
The hack is wonderful and I so much need to use it but there seems to be a problem: whenever I apply it some strange numbers appear here and there on the page. I have marked them with green word 'here' in this picture. Could you please solve this so that I can use the code. Thanks. I am looking forward to hearing from you.
http://i45.tinypic.com/1686cra.jpg

Greenlava June 4, 2010 at 7:14 PM    

@harfy
That's because you copied the code direct fron this page.
Properly copy the code by clicking the <> icon on top right corner of the code.

Liezmaya July 1, 2010 at 12:44 AM    

wow Thanks, it works dude.

FMM July 1, 2010 at 12:52 AM    

Greenlava, what a great tutorial...it works all but with my static pages. I cannot get them to open up...they stay in the 'read more' form. See my example: http://www.postyourgiveawaylinkys.com/p/submit-your-giveaway-linkys.html

Could you please help figure this out? I appreciate it.

Greenlava July 1, 2010 at 1:57 AM    

@Djungjunan
You're welcome. Thanks for stopping by.

@FMM
That's weird. The code was especially revised to prevent that very problem from happening. Could you copy and paste the code in step 8 one more time and see what happens?

Anonymous,  July 4, 2010 at 4:45 PM    

Hai there, i just setup my new blog, and it's already had autosummary post but when i try to add pages, it doesn't display properly because of the autosummary. Can u tell me how to only had the sutosummary works in the main page and full display in the individual page? thanx

Greenlava July 4, 2010 at 8:58 PM    

@Anonymous
Find the second part of the auto read more code (similar to the one in step 8) in your template. Replace that code with the one from this tutorial.

Musicalhouses July 7, 2010 at 8:34 PM    

Hello Greenlava! This is by far the best Auto Read more tutorial I've come across - the code works, it's not messy, it doesn't mess up my static pages, and your instructions are really clear! I've favourited this page! :D Anyway, I'm having a slight problem with this script. When I include it, on my front page it looks great, but when I click to the individual post page, I get this weird rectangle of brown space just below the title and the "Posted by" line. You can see it in this post: http://makeupandmyopia.blogspot.com/2009/04/shu-uemura-pink-collection-and-random.html

The rectangle only seems to appear when I insert the auto read more code. Is there anyway I could get rid of that odd rectangle? Thanks! :)

Greenlava July 9, 2010 at 6:55 AM    

@Musicalhouses
I suspect this read more code clashes with one of the existing (jQuery?) scripts in your template. I'm not sure how, but similar problems were reported here.

Naeem July 10, 2010 at 8:17 PM    

Thank You Very very much. It works.:)

Thank you again.:)

MysticSeaMaiden July 11, 2010 at 6:08 PM    

This is the one way I found that work. When click read more it opens to just the blog posting and if you want to go back to blog homepage you have to click you back button. I know it has to be me. I like for the read to expand without leaving the front page of blog. If that made any sense and tysm for doing this you rock

Greenlava July 12, 2010 at 6:25 AM    

@Naeem
You're very very welcome :)

@FacetiousMuse
Perhaps you want to look into this hack by Hackosphere.

Anonymous,  July 17, 2010 at 3:12 AM    

Hey, Greenlava, was wondering if you could help me out a bit. I've been messing with the code and I still can't seem to get it to work the way I need it to. My blog is located here: http://thephilly5.blogspot.com

What I am trying to do is keep the main page just the way it is, but in my stand alone pages, I'd like to remove the slider and just add text there instead for my "about" page, ect. When I add it, it cuts off.

I have used your code and it has worked fairly well, but it squashes together all of my text as well, leaving no break points. Also, I can't for the life of me figure out how to remove my slider from the stand alone pages.

I have deleted the code for now so you can see exactly what I am dealing with. Could you please help?

Thanks,
Mike

Greenlava July 17, 2010 at 2:26 PM    

@Mikey Five
Your template was made before Blogger introduced standalone pages. That's why you're having these problems.
The solution is to exclude the slider and read more from standalone pages, using conditional tags.
1. The slider -the easiest method is to hide it on standalone pages. Read Apply different layout/styling to static pages. You want to replace the code in line 4 and 5 (of that tutorial) with just this code:
#slider-container { display:none !important;}

2. Read more -read my previous reply

Anonymous,  July 18, 2010 at 4:11 AM    

@Greenlava

Thank you very much for the help! The slider code works great, it is gone from all of my static pages.

I'm only running into 2 minor problems now.

In this tutorial it says to find the data:post.body/ code, but when I search for it in my template, it can't be found.

Also, even though the code works, my titles on my stand alone pages are kind of off to the right a little bit and I'm not really sure why.

You can see what I mean at:
http://thephilly5.blogspot.com/p/about.html

That is my "about" page.

Again, thanks for the help and if you can figure this out for me my blog will be perfect!

Thanks again for the help!

Greenlava July 18, 2010 at 10:38 AM    

@Mikey Five
Email me

games and movies for free July 18, 2010 at 5:35 PM    

thank you as a games and movie blog i require a short description and thumbnail image,perfectly works on my blog

Anonymous,  July 19, 2010 at 2:19 AM    

@Greenlava

E-mail sent, hope to hear from ya! Thanks again!

Musicalhouses July 23, 2010 at 4:05 AM    

Thanks Greenlava for your response! Not only are your posts helpful, you're also really responsive in your comments! I managed to sort out the bit with the odd brown box, turns out it was some stupid lousy html skills on my part! It seems to work fine on my site now! :D

One last question and I promise I won't bug you anymore: I notice that when I use your (excellent) auto-summary script, the "you may also like" linkwithin script shows up under all my post summaries on the front page. I'd like them to show on individual post pages but not the front page. Is there anyway I could do this? (e.g. by moving the link within script)? Thanks again for all your help!

Musicalhouses July 23, 2010 at 4:57 AM    

Oops sorry for spamming your board - I figured out how to not show the linkwithin link on my main page thanks to one of your other posts on how to display widgets only on specific pages! I just made that widget viewable only on an item page! Thanks so much! :D

khaled July 29, 2010 at 4:41 PM    

good tutorial.

Thank you so much for this post!

and Thanks for sharing...

And I have a simple observation

As you add the code Classic

<span class='more' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

And it can use the css

To give a beautiful property on the Read more

How? Very simple

Just before this tag

]]></b:skin>

Add this code

.more{
border: 1px solid #cccccc;
padding: 4px;
background: #f4f4f4;}


nice can be visite this blog.Thank you again

Selina August 13, 2010 at 5:24 AM    

Hi Greenlava. I tried your code to fix my problem with static pages, but all i managed to do is to remove the read more link and button. My static pages are still thumbnailed and not the full posts. Im using customized version for read more link so i dont know if that can make problems. This is how my code looks like now

[b:if cond='data:blog.pageType == "item"'>
[data:post.body/>
[b:else/>
[b:if cond='data:blog.pageType == "static_page"']
[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 class='rmlink' style='float:right;padding-top:2px;'][a expr:href='data:post.url'] [img src='http://3.bp.blogspot.com/_sunpK_FtO1E/SmLBFL8iCQI/AAAAAAAAAIY/AMxVeymd5ZQ/s1600/readmore.png'/][/a][/span]
[/b:if]
[/b:if]

Thank you

Greenlava August 16, 2010 at 10:25 AM    

@Selina
Salam 1Malaysia,
Your readmore works fine. The problem is caused by another hack. The small-boxed posts effect on your homepage, well that effect is applied to your static pages too.
Here's how to fix that:
Find this code (look a few lines below ]]>< /b:skin>):
[style]
#main-wrapper {
float: left;
width: 675px;
margin: 0;
padding: 0;
}
.post {
background:#fff url(http://3.bp.blogspot.com/_sunpK_FtO1E/SmLpQomgPcI/AAAAAAAAAJk/9FklGNoNPxw/s1600/box-bgr.gif) repeat-x top;
float: left;
width: 307px;
height:275px;
margin-bottom:5px;
margin-right:5px;
padding:10 px;
overflow:hidden;
border:1px solid #cfcfcf;
}
[/style]

I'm going to refer to this code as THE SNIPPET.
THE SNIPPET is probably enclosed with a conditional tag, like this:
[b:if cond='data:blog.pageType != "item"'>
THE SNIPPET
[/b:if]

To fix your problem, you want to add static pages to the condition, like this:
[b:if cond='data:blog.pageType != "item"'>
[b:if cond='data:blog.pageType != "static_page"']
THE SNIPPET
[/b:if]
[/b:if]

Good luck

Selina August 16, 2010 at 1:12 PM    

Worked like a charm, thank you very very much :). Linked to you.

Munix™ August 25, 2010 at 11:28 AM    

thank you very much.. its working on blogger page too! thanks, luv u

Greenlava August 25, 2010 at 1:59 PM    

@Munix™
You're welcome.

MindDoser September 23, 2010 at 3:00 PM    

hello there.
i have a little question:
The default numbers of the posts at each page (for me) with auto read mode is 7.
Can i change the max number of the posts at each page?For example:i want 10 posts per page or more etc.
Thanks in advance :)

Greenlava September 24, 2010 at 12:28 PM    

@MindDoser
The number of posts appearing on homepage depend on two things:
1. Your "Show at most" setting in Settings > Formatting tab.
2. Your(on homepage) post sizes. Larger post sizes => fewer post count.
To reduce (on homepage) post sizes, use Blogger read more method. You should see an increase in post count. However the read more snippet won't look as good.

Liliana October 20, 2010 at 4:13 AM    

Yes it worked for me too, and previous one I tried from someone else ''ruined'' my static pages. This is wonderful I was looking for this solution for days. Couple of photos look a bit funny though but overall I am very happy, thanks very MUCH.

Greenlava October 20, 2010 at 10:53 AM    

@Liliana
You're welcome. I'm glad you made it :)

softwareandblog October 25, 2010 at 7:33 PM    

i think this post is very good.

Greenlava October 25, 2010 at 11:32 PM    

@softwareandblog
Thanks. Do come back :)

Rizwan November 29, 2010 at 1:28 PM    

very nice and clean blog with straight forward and unambiguous instructions
Cheers!
http://www.amoledscreen.net

Tom December 1, 2010 at 11:44 PM    

Is there a way to set up the auto read more to show a video on the main page before the read more? All the videos I post show up after the read more. If not is there a way to do this with another script?

Greenlava December 3, 2010 at 12:25 AM    

@Tom
I'm afraid the answer is no :(
However you can do it manually, using Blogger jump break. Just make sure you insert the jump break after the video.

rfs December 6, 2010 at 10:35 PM    

thanks for this great post. i've followed this guide and manage to get my post to have 'Auto Read More'... cheers!

Greenlava December 7, 2010 at 12:21 AM    

@rfs
You're welcome :)

Anonymous,  December 11, 2010 at 4:21 AM    

i have same problem too see my blog http://keyendra.blogspot.com/p/contact-us.html

the page cannot full appear in my blog, i need them looks like a post.

i was do everything for static_page but i cant resolve my problem..



thank you.

Regards Keyendra

Greenlava December 11, 2010 at 9:45 PM    

@Keyendra
Go to Design > Edit HTML and locate your auto read more code. Then enclose the code in a conditional tag to exclude it from static page, like this:

[b:if cond='data:blog.pageType != "static_page"']
[script type='text/javascript']var thumbnail_mode =
.
.
the rest of your read more code
.
.
//]]>
[/script]
[/b:if]

ODARA December 29, 2010 at 5:47 AM    

Hi,

The code works perfectly but I wanted to know if there's a way to keep the thumbnail centered above the summary? Where it would appear like this..

Thumbnail
Summary
Read More

Is it possible for the thumbnail to remain the same size as the original photo(s) w/o changing its dimensions? Where as it would just show the first photo (in its original size ) only then summary and read more ?

Any help would be appreciated! Thank you so much!

Greenlava December 29, 2010 at 2:39 PM    

@ODARA
I'm unable to post the code here
View the answer here on Facebook.

ODARA December 29, 2010 at 4:56 PM    

@Greenlava Thank You So Much !!! It works perfectly! Exactly what I wanted, you are awesome ! :o)

300 mb movies January 4, 2011 at 11:02 PM    

Very good tutorial.

and i appreciate u for replying to every comments

Is there a way to show the second image in a post as thumbnail.

Tanx in advance.

Greenlava January 6, 2011 at 9:19 PM    

@300 mb movies
I think this would work:
Add one more img tag (< img .... />) in step 6 line 35 right after the existing img tag, but use img[1] instead of img[0]

300MB UNiTED January 8, 2011 at 3:59 AM    

Thank u very much lava ,
we can add any image as thumbnail

ODARA January 8, 2011 at 7:08 AM    

Hi Greenlava,

My apologies for bothering you again, the code & the fix you gave me works perfectly but now it's only showing 4 posts on the main page where as I have it set to show 5. It shows 5 on the older pages and beyond. Just not the main page, I've tried setting it to different numbers but still only 4 post show on the main page, it was working correctly the first few days idk what happened.Could it have been something I implemented ? Here's my website www.gimmethatglow.com so you can take a look at what I mean.

Warmest Regards,

Greenlava January 8, 2011 at 12:51 PM    

@ODARA
Did you notice the phrase "Show at most" when you set the number of posts?
The actual no. of posts shown on index pages is based on the amount of content inside the respective posts. Big content means small no. of posts. (Blogger calls this process auto pagination).

ODARA January 8, 2011 at 1:27 PM    

Yes, "show at most" was there and I set it to 5 posts per page. So when the content is shorter they will more likely appear ?

Greenlava January 8, 2011 at 4:57 PM    

@ODARA
Yes thst's right.

shani January 14, 2011 at 5:29 AM    

Hi,
I have tried your hack but unfortunately its not working on my templete. perhaps its because my templete is premium and Locked for additional formatting. i do not have enough knowledge of XML.
My templete is Converted by wordpress temps and its premium too.
can you help me about how can i fix this problem because sometimes my posts are long and they do not look so good at my blog, any way.
Please if you can help me with this your Help will be truly appreciated

Scott Fitsimones January 25, 2011 at 9:44 AM    

Hi, I was wondering if I could show social network share buttons in there. Somewhat like Mashable has done. Any advice? Also, the image is stretched or squeezed in most cases. Could a maintain the proportions but shrink it? Thanks

Greenlava January 25, 2011 at 1:32 PM    

@Teens
To keep the thumbnail proportions, set
img_thumb_height = "";
in line7.
Go here for Mashable-like social bookmarking buttons

Scott Fitsimones January 27, 2011 at 8:57 AM    

I still want the thumbnail to be smaller, and maintain proportions. When I tried that the thumbnail was to actual size.

Greenlava January 27, 2011 at 2:18 PM    

@Teens
Only set thumb height to "". Keep the width as it was.

gavee February 7, 2011 at 11:43 PM    

greenlava...how make summary: justify and change words"Read More.." With image? many thanks for your time.

Greenlava February 8, 2011 at 9:14 PM    

@gavee
To use image, replace "Read more ..." with [img border="0" src="PUT IMAGE URL HERE"/]

gavee February 8, 2011 at 11:58 PM    

Thanks Lava, Read more image was applied, but summary text still align-left,not justify.
You can see what I mean at:
http://ac-elektrik.blogspot.com

Greenlava February 9, 2011 at 6:44 AM    

@gavee
Go to Design > Template Designer > Add CSS, add this code:
.post-body {text-align:justify;}
and press Enter key.

gavee February 9, 2011 at 12:31 PM    

Greenlava...Thank you very much...

RAVI KUMAR February 16, 2011 at 3:35 AM    

thanks for this tutorial . i had used this in my blog -http://infochek.blogspot.com/

thanks again.

Syeikh Azzikri February 16, 2011 at 3:58 AM    

Hi Greenlava,

Great tips. I've tried this hack and its work fine but i want the thumbnail align with post text. Please take a look at my test blog and u will understand.

Look forward for your early reply.

Thanks very much...

Greenlava February 16, 2011 at 9:08 PM    

@RAVI KUMAR
You're welcome.

@Syeikh Azzikri
Add this snippet in a the custom CSS box
.art-PostContent {padding-top:1em;}
.art-PostContent img {margin:0;}

Syeikh Azzikri February 17, 2011 at 5:34 AM    

Greenlava,

thanks so much for your kind attention...
I really appreciated it and will put your link to my blog
http://darul-azzikri.blogspot.com/

thanks again...

Unknown February 19, 2011 at 5:36 PM    

thanks green lava menjadi la

kyo_9 February 21, 2011 at 12:29 AM    

thanks Greenlava..

I have a problem finding data:page.blog in my edit html site.. is there something I can do for the no 8.?

Greenlava February 21, 2011 at 7:49 AM    

@kyo_9
No.8 is the code for you to paste, not to find. What you need to find is [data:post.body/]

kyo_9 February 24, 2011 at 9:21 AM    

orait bro.. thanks!

Unknown March 1, 2011 at 8:31 AM    

Thanks! It's work on me! Yeah! ;D

Azmee @ Buka-rahasia March 2, 2011 at 9:02 AM    

thankk you very much, Greenlava. I've tried so many tutorials about auto readmore and this one works perfectly for my blog, it doesn't affect the static pages. But I want to make the "Read more ..." float to the right side, please tell me where I should put in the rule. Thanks!

Greenlava March 2, 2011 at 11:06 AM    

@Azmee @ Buka-rahasia
Use inline CSS to apply float:right to the a tag in line 12, like this:
[a class='more' style='float:right;' expr:href='data:post.url']Read more ...[/a]

spk March 2, 2011 at 3:20 PM    

Mr Green Lava,
It's working ! but if you look at my blog home page you'll observe that the summary of the posts format doesn't look exactly the way I have written.
ex: In one of my posts, I used bullets to point each line but in the summary, they are not visible and also all the lines are mixed..

can you tell me how to edit this in such a way that the code you mentioned doesn't change the format in which I have written ( whether it is bullets or next line .. )

Greenlava March 3, 2011 at 12:12 AM    

@spk
The summary extracts an image and raw text from your posts. That's how auto read more works.
If you want to keep the formatting, use Blogger jump break function. But you will have to insert the break manually in each post.

Tech-Beever March 4, 2011 at 4:47 AM    

Hi, i'm usung the Scarlet Blogger Template, yet i'm having problems with 'static pages', the 'read more' link shows up yet doesn't let me view the page.
i've tried everything i can (unless i'm missing something!) and was wondering if you could help out?

Greenlava March 5, 2011 at 8:51 PM    

@Tech-Beever
What is your blog URL?

Anonymous,  March 8, 2011 at 2:54 PM    

http://mdumreader.blogspot.com/

Hi,

see my blog above. I have used your auto read more with thumbnail. I have placed the read more link at the right side too using your reply to your reader in comment number 97.

I want a help from you Green Lava.

I want to place the read more link just very near to the last word of the summary of the text.

I mean if the last word in summary of the text is elephant I want to show like this--->
elephant Read more...

how to do this?

Anonymous,  March 8, 2011 at 9:31 PM    

Hi Green Lava,

I want also to know how to give a desired color to the read more link? Please tell me...

Anonymous,  March 10, 2011 at 12:49 PM    

Hi Greenlava,

Thank you so much for your codes, they really make my blog more enjoyable. I edited the codes a lil because sometimes the pictures i post are of varying height, i found out (after experimenting for 3 hours) that by omitting the img_thumbnail_height part, i am able to have varying height for my pictures (fixed width). So i have some freedom to sometimes post squarish* images and not affect my other pictures.

Sorry for the long write up, I hope you can help me on this aspect. I hope to allow people to click on the pictures to read the post as well, instead of just clicking on the "read more" link. it will be something like in http://www.boston.com/bigpicture/ where when u click on the picture it leads you to the post.

Hope you can help. Thanks

jems

Greenlava March 10, 2011 at 9:38 PM    

@amgil
1. To move it where you want would require a substantial change to the script. It's not impossible, but a bit difficult.
2. To change the color, just add "color" (for text) or "background" (for background color) to the style attribute.

Anonymous,  March 18, 2011 at 6:44 PM    

how to exclude blockquote from strip HTMl tag?

Greenlava March 22, 2011 at 10:44 PM    

@Anonymous (comment #104)
Sorry for the late reply. Your comment went into my spam box.
Email me (using the contact form) for the code.

Anonymous,  March 24, 2011 at 12:31 AM    

how can i reduce font size of the text when it appears within the read more link(apart from reducing image size)?

Greenlava March 27, 2011 at 7:18 PM    

@amgil
Use inline CSS to apply float:right to the a tag in line 12, like this:
[a class='more' style='font-size:PUT FONT SIZE HERE;' expr:href='data:post.url']Read more ...[/a]

Lia Uret March 27, 2011 at 8:14 PM    

hey-hooo.... i love the result as it makes my blog loads faster... thanks!

Anonymous,  March 29, 2011 at 5:00 PM    

should i place the 1st code really after [/head]?... i think we shuld place it before [/head]

Anonymous,  March 29, 2011 at 5:22 PM    

your auto read more code works only on home page of my blog. the code doesn't work on all other pages.

see http://mmrdhn.blogspot.com/

click older posts at bottom...the code doesn't show thumb nail or even summary of the text...post appear fully starting from the second page...

how to rectify this?

Greenlava March 29, 2011 at 10:43 PM    

@Anonymous
Either one will work just fine.

Notis April 3, 2011 at 10:05 PM    

http://amea-blog.blogspot.com/ Hello I put this script on my blog but as prabhu said, I have the same problem. When evreyone goes to older posts (by using the button) the code doesn't show thumb nail or even summary of the text and you can see all the post and not a part of it.

Greenlava April 4, 2011 at 8:45 AM    

@Notis
It seems all Blogger blogs are having similar problem since a couple of days ago.

Amirul Asyraf April 17, 2011 at 11:55 PM    

thanks for ur info here hehe

....! April 18, 2011 at 7:20 PM    

Hi Nice Post I like this hack can u tell me that can i call the first 2 links of the post in the summry???

REgards

Greenlava April 20, 2011 at 5:57 PM    

@....!
You can't :(

Elih Japahar April 24, 2011 at 6:03 PM    

Thanx a lot....its working well for me :)

达达 April 27, 2011 at 5:36 PM    

Hi Greenlava, many thanks for this solution.

However, I have modified the js script to generate better "correct aspect" thumbnails. While the CSS edit works wonders in Chrome. The same can't be said for the latest versions of Firefox and IE. Do you know of anyway to exclude this for Firefox and IE?

I read about something like this on wwwDOTthesitewizardDOTcom/css/excludecssDOTshtml, yet I am clueless on how to implement this

Please help.
Thank you

liloo April 29, 2011 at 2:08 AM    

28 April 2011

Hello there :)

I have a beauty blog and I am trying to apply some changes to it. I have set up a 'test blog' http://liloolab.blogspot.com specifically to do some testings so that i don't mess my real one. I am trying to follow this tutorial with a view to have the "auto read with thumbnails" function but just on label pages as you explained in comment no.1. Well i am having some problems already at setting the auto read page, even before i add the modification about showing it only on label page.

The errors I am getting:
this is my test blog: http://liloolab.blogspot.com
and this a capture of what i am experiencing when i apply your code.

http://www.twitpic.com/4qm0zd/full

I am basically getting the whole contents of the post displayed, with the picture and then i get the summary version, the thumbnail and the read more. So in effect i am getting double content on my page.

The template i am using is a custom template which i got from btemplates.com, http://btemplates.com/2010/blogger-template-serene/ and which i tried to customise a bit.


this is such a cool feature and i would love to have it on my blog on 'label search pages'. the idea would be when people click on 'makeup look' it brings up the results of a label search page with 220 characters of text, a thumbnail (even if it's distorted by the 200x200 resizing) a read more button whilst the main homepage remains intact.

thank you so much
xx

liloo
@tsunimee on twitter xx

Greenlava April 29, 2011 at 12:58 PM    

@liloo
Looks like you've fixed the problem :)
Excellent question BTW.

liloo May 1, 2011 at 11:03 AM    

greenlava: omg i am so happy :) :) :) yyyyyyyaaaaayyyy.

basically, where I was going wrong was where I was pasting the first chunk of script. I was placing it AFTER [/head] rather than just BEFORE it.

Then, for the second part, omg you have no idea how long this took me, i got no knowledge at all, apart from basics of HTML from 10 years ago


[!-- Auto read more Start --]
[!-- http://www.BloggerSentral.com --]

[b:if cond='data:blog.pageType == "item"']
[data:post.body/]
[b:else/]

[b:if cond='data:blog.url == data:blog.homepageUrl']
[data:post.body/]
[b:else/]

[b:if cond='data:blog.pageType == "static_page"']
[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]

[a class='more' expr:href='data:post.url']Read more ...[/a]

[/b:if]
[/b:if]
[/b:if]

[!-- Auto read more End --]

liloo May 1, 2011 at 11:09 AM    

i forgot to say that i used the first chunk from there: http://www.anshuldudeja.com/2009/05/automatic-read-more-hack-for-blogger.html
and then the second chunk from your brilliant website.

Thank you so much for all your help xx

Ryan May 1, 2011 at 1:41 PM    

Image scaling (img_thumb_height = "";) is not working with internet explorer. Chrome and Firefox are fine. Please see http://www.immediate-entourage.com/

Not sure is it's some template experiment I did wrong or what...

Ryan May 1, 2011 at 2:00 PM    

Sorry-posted the wrong blog. Here is the test site with the internet explorer image scaling problem: http://immediatetest.blogspot.com/ It doesn't seem to matter if I make the width or height fixed the result is the same.

Lakshmi @Purevegetarian May 1, 2011 at 11:51 PM    

I'm modifying a third party custom template with summary posts. Everything seems to work pretty well, knock-knock-knock, except for the images on the static pages that take a summary thumbnail size when published. Whereas I've managed to customize the post-entry text to my liking, I'm out of ideas how to fix the problem with images. I'll be using the static pages mostly as index-pages with thumbnail links, but would like to post original size images at least in some of them. For example, http://www.purevege.com/p/laksmi-blogger.html . Would you be so kind to take a look and see how to change the code. I'm petrified to mess around with HTML any more by myself. Thank you very much! Have a nice day.
Lakshmi

Greenlava May 3, 2011 at 10:45 AM    

@Ryan
It looks to me there's nothing wrong with your code. That's weird...and I'm afraid I don't have an answer for it right now :(

@Laksmi
You have this CSS code to blame for the thumbnail size image on static pages:

div.post-index div.post-entry img { width:140px; height:140px; border: 1px solid #efefef; background: #fff none; padding: 10px; margin: -26px 18px -5px 4px; }

I guess this snippet was originally intended for index/multi-posts pages only, but somehow ended up including static pages too. (I suspect the template was made prior to the introduction of static pages by Blogger).

What you want to do is remove this snippet. Once you remove it, the images on static pages should return to their original sizes.
However the image on index pages (with read more in action) will reduce to 80 x 80px, as specified in your read more script. To change the size, you have to change the width and height figures in the script.

Pingkan May 3, 2011 at 10:50 PM    

Hello! I've just installed a new theme on my blog, http://lovelygloriouspainful.blogspot.com/, but I don't like the automatic read more. What should I do to make it gone? Thx.

(I'm sorry I leave comment here, something happened when I tried to leave comment on your Fb page.)

Lakshmi @Purevegetarian May 4, 2011 at 1:06 AM    

Thousand thanks, Greenlava! You made my day. I have to confess, the css 140 px was my genious idea :-). I didn't notice the original 80 px of the script.

Thank you again. You are a kind person.

Greetings, Laksmi

Greenlava May 4, 2011 at 10:31 AM    

@Nduk Pingkan
You need to find the read more codes in your template and remove them. The codes should look somewhat similar to codes in step 6 and 8.

Uma June 22, 2011 at 12:42 AM    

Hello Greenlava,

Many Thanks to you for this suto read more. it did the job for my expectation.

But i have one small query. Plz tell me how can i remove the 'Read More' option from other bogger pages.

Plz look into my blog for clarification.


Thanks!
Uma

Uma June 22, 2011 at 3:23 AM    

Thanks Greenlava. I did it. Thanks for your help. :-)

Q.Son June 29, 2011 at 5:52 PM    

thanks a lot :D

Honeybee July 4, 2011 at 5:25 PM    

Your blog is like a mini-encyclopedia to me :) When an idea comes to my mind, I just check to your blog for reference. You are also responsive to your readers. What I want to know further, already asked and answer in the comments column. Keep up the good job. You are superb!

Greenlava July 5, 2011 at 7:26 PM    

@Honeybee
Thanks, it feels good to be appreciated :)

Prince Arnold July 11, 2011 at 12:44 PM    

Hey can you help me out, my template already came with an auto summary code, and i don't know how to take it off of the static pages. the author isn't responding back, do you know how i can take it off of the static pages?

erik July 12, 2011 at 4:17 AM    

thanks.. For your info tutorial auto read more

Anonymous,  July 12, 2011 at 5:39 AM    

Obrigado! você me salvou!!!

Greenlava July 12, 2011 at 4:34 PM    

@Prince Arnold
Go to Design > Edit HTML and click the Expand Widget Template checkbox, and look for this code. Can you find it?
[b:if cond='data:blog.pageType != "item"']
[div expr:id='"summary" + data:post.id'][data:post.body/][/div]
[script type='text/javascript']createSummaryAndThumb("summary");[/script]
[/b:if]

Chris July 17, 2011 at 11:36 PM    

Many Many thanks buddy! This is really helpful post. Now i added this code to my blog and work fine.

Chris July 17, 2011 at 11:45 PM    

Are there any way to change “Read more” link side. I want display “Read more” link in right hand side with bold.

Greenlava July 20, 2011 at 12:18 PM    

@Chris
Simply add a style attibute with your preferred styling in the read more anchor in step 8 code line 12, like this:

[a style="float: right; font-weight: bold;" class='more' expr:href='data:post.url']Read more ...[/a]

Chris July 20, 2011 at 5:17 PM    

I really appreciate your help. Many thanks for reply my question. Now i added this code to my blog. I already bookmarked this blog. :D

Anthony Mango August 10, 2011 at 12:57 PM    

I'm having problems with this as well, when it comes to static pages. I altered my code enough to allow it to let me adjust the size of images and not loop on "read more", but I still can't center my images. I tried deleting the "float:left" section but that did nothing. Any help would be greatly appreciated!

Page example: http://www.smarkoutmoment.com/p/segments.html

Greenlava August 11, 2011 at 2:31 PM    

@ToeKneeManGo
You have one more float:left to deal with. Find this in your CSS:

.post img {
border:0;
float:left;
padding:10px 10px 10px 2px;
background:#fff;
border:0px solid #ddd;
margin:2px 10px 2px 10px;
}
and remove the float:left;

Unknown August 11, 2011 at 6:13 PM    

is there any way to style the text part of the summary? on wanna use it on my blog i.e.
http://popcornoflife.blogspot.com/

Anthony Mango August 12, 2011 at 12:00 PM    

Ah, got it to work. Thanks a bunch! I really, really appreciate it!

You Dezire September 2, 2011 at 10:13 PM    

This is the most helpful tutorial i've ever seen. Thank you soo much Greenlava.
Can you please tell me if we can add a reflection to the thumbnail or if we can put the thumbnail and summary in a box?

Otherwise September 7, 2011 at 6:19 AM    

Thank you so much for this. After a couple of hours of fiddling, I have finally got a 4 column (blogger) style blog working AND the static pages work fine.

I eventually replaced an old 'read more' script with yours wholesale, and then fitted a static page conditional around the b:skin

THANK YOU V V MUCH. Only a few more fixes left, and I can get back to posting. blog is 6feetup.blogspot.com template was Tequilas-Flamejantes

"Tamra The Island" September 20, 2011 at 11:40 PM    

tengs infonya gan .. .

halayan November 1, 2011 at 7:18 PM    

This snippet is owesome! I have one question. can you provide me a code to have a blog post display post content using this code + another code to separate post1 to post2 with a box or whatever container holding the content of each post as if it is two columns in my blog posts area something like video blog template but I dont like to change my template. Right now when publish a new post and add another new one will be on top and the older below, what i wish to obtain - one post will on the left another post will be on the right [post1 left] [post2 right]. Thank you so much!

admin@smkcenehbaru November 3, 2011 at 10:00 AM    

thumbs up... work great on my blog

Greenlava November 3, 2011 at 7:50 PM    

@halayan
You can start by adding this snippet in CSS (right before ]]>< /b:skin> ):

.art-post {float: left; margin: 10px; width: 300px;}

jess,  November 22, 2011 at 2:37 PM    

hello, this is great, thanks! i want to make the auto read more only appear on label, archive and search pages. is there a conditional tag that applies to homepage posts past the main page?

Dhoy2x November 22, 2011 at 9:34 PM    

This is such an awesome blog Green Lava! This really helps.
Btw, I have tried this and it works fine. But somehow, I wanted to show more posts (not just one) on the homepage. I am wondering what could have happened in between.

I was playing around with the settings but it is still the same. Really appreciate if you have some idea. Thanks thanks.
my blogspot: http://iamdhoy2x.blogspot.com/

Many thanks

Greenlava November 23, 2011 at 7:37 PM    

@jess
Try this. Replace the conditional tags in lines 3 to 6 with this:

[b:if cond='data:blog.url == data:post.url']
[data:post.body/]
[b:else/]
[b:if cond='data:blog.url == data:blog.homepageUrl']

test it and tell me if it works.

Greenlava November 23, 2011 at 7:43 PM    

@Dhoy2x
Check your post count setting in Settings > Formatting.

Hugo,  November 27, 2011 at 7:55 PM    

Hi thanks very much for the code. I want to make a change though and i'm not sure how difficult it would be to do. I dont show post titles on my blog so I would like the image to act as the read more link. In other words, by clicking on the thumbnail it would take you to the actual post and not open the image. Thanks

Greenlava December 2, 2011 at 3:15 AM    

@Hugo
Email me via the contact form. I'll reply with the code.

Jamie @ hands on : as we grow December 6, 2011 at 10:16 AM    

Is there a condition I can add so that it applies to all posts, but NOT the most CURRENT post? So that on my homepage it will display the current post in full, and then snippets with the thumbnail (like you've shown) below that. As well as doing the teasers on static/category pages.

I've found in the comments the condition to have it not apply at all to the homepage, but I'd still like the teasers below the main post. Ideas?

Unknown December 13, 2011 at 3:14 AM    

@Jamie yes you can do this, just use this and there put different code

Hasan Shamim January 4, 2012 at 9:40 PM    

Hi, I have a blog site named Picwall. I am facing a problem. I am trying to create pages like "About me" to show on the top nav. Actually I have created one. But the problem is the page is not showing full content. I need to know this urgently....please help me

Hasan Shamim January 4, 2012 at 9:41 PM    

Oh, sorry i forget to give my blog address http://picwall.blogspot.com. Please help me.....

Greenlava January 4, 2012 at 11:09 PM    

@Hasan Shamim
Please follow the instruction in reply #34. You may need to adapt it to your exact code. The idea is to replace the existing single (post-page) conditional with double (post and static page) conditionals.

Molly January 4, 2012 at 11:48 PM    

Greenlava, you are brilliant!! I've been looking for a read-more with thumbnails which are NOT distorted for ages now. You've made my blog ;-) It's working like a charm and I love it! (For other readers: in comment no. 79 you'll find the solution)

Thank you so much ♥♥ and a Happy New Year to you!

Família Cubiaco January 12, 2012 at 11:56 PM    

I would like to know how do I put background on the read more text like the on in this link: http://www.puglypixel.com. Also, how do I substitute the read more text for an image with a link.

Greenlava January 18, 2012 at 2:02 PM    

@Família Cubiaco
Replace this line: [a class='more' expr:href='data:post.url']Read more ...[/a]

To add background color, replace it with:
[a class='more' style='background: PUT COLOR CODE HERE' expr:href='data:post.url']Read more ...[/a]

To use clickable image, replace it with:
[a class='more' expr:href='data:post.url'][img src='PUT YOUR IMAGE URL HERE'/][/a]

Kaito January 21, 2012 at 3:20 PM    

Thank for this code its really work on my site...

Itender Rawat February 3, 2012 at 12:00 AM    

Very useful post for blogger who are on Blogger Platform. Thanks Author

Unknown February 3, 2012 at 7:34 AM    

Forget my last comment. I figured it out myself.

Now how have another question. How do I make the thumbnail clickable so that it behaves like the Read More button?

Greenlava February 3, 2012 at 11:23 PM    

@Waggler
Email me (via the contact form). I'll reply with the code.

aalunga February 5, 2012 at 12:28 AM    

Thank you for the code..

BTW, I want to have a different summary for each post (Something like text displays on home page whereas on the post page, the text/ picture is not there).. Is this possible?

mustafa February 5, 2012 at 7:07 AM    

Greenleva, Previous Waggler's comment
Waggler, February 3, 2012 7:34 AM

" How do I make the thumbnail clickable so that it behaves like the Read More button?"

I want this same. I sent email about this.

Greenlava February 6, 2012 at 7:20 PM    

@ஆளுங்க (AALUNGA)
Sorry but that's not possible.

@mustafa
I've sent you a reply.

King Farmer February 9, 2012 at 3:14 PM    

how can i put that 'read more' button on the bottom right side instead of left side?

Greenlava February 9, 2012 at 6:03 PM    

@King Farmer
Replace
[a class='more' expr:href='data:post.url']Read more ...[/a]

with
[a style='text-align: right;' class='more' expr:href='data:post.url']Read more ...[/a]

Van Custo February 16, 2012 at 7:16 AM    

Hi thanks for the guide but I was wondering if you could tell me how to get the post title to show up on the right side of the image along with the text preview. So the title of the post isnt above the image.

Like on this blog for example:
http://pigeonsandplanes.com/

MapMaster February 18, 2012 at 10:10 AM    

Hi Greenlava,

I've got to say that I always look forward to seeing updates from Blogger Sentral show up in my inbox. I've browsed through a lot of blogger tips and tricks sites, but I always come back to this one for clear explanations.

I've actually used your Simply Faster template for a friend of mine, but I want to implement the code in this post for my wife's recipe blog -- and I've been experimenting with a test template for the time being. I've got two questions that I don't think have been covered in the comments so far. I'm try to self-educate, and I've had some success in the past figuring other things out from existing codes, but I'm stumped right now.

First, I want to exclude the first post from the auto read more. I've tried changing the template code to this:

[!-- Auto read more Start --]
[!-- http://www.BloggerSentral.com --]
[b:if cond='data:blog.pageType == "item"']
[data:post.body/]
[b:else/]
[b:if cond='data:blog.pageType == "static_page"']
[data:post.body/]
[b:else/]
[b:if cond='data:post.isFirstPost']
[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]
[a class='more' expr:href='data:post.url']Read more ...[/a]
[/b:if]
[/b:if]
[/b:if]
[!-- Auto read more End --]

But no luck. I'm missing something.

Second, my wife's pictures are all the same size (400 px by 300 x) which makes scaling the thumbnail dimensions easy, but they are in different orientations -- ie. 400 wide or 400 tall. So I'd like the thumbnail widths and heights to reflect this orientation. I've tried this change to the script:

[!-- Auto read more script Start --]
[script type='text/javascript']
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
if ( imagewidth ] imageheight )
{
img_thumb_height = 150;
img_thumb_width = 200;
}
else
{
img_thumb_height = 200;
img_thumb_width = 150;
}
[/script]

But again no luck. Can you provide assistance? Thanks in advance.

Anonymous,  February 18, 2012 at 1:48 PM    

Hi,
Is there a way to display thumbnails from videos for this auto read more?
Thanks in advance.

VAL February 19, 2012 at 5:50 AM    

How can I remove date and comment/label section from a label list? Thanks!
http://www.not-home.com/search/label/India

Greenlava February 19, 2012 at 1:00 PM    

@Van Custo
It's difficult to move the image that way as it requires modifications on several places. Fortunately I've made a template with that built-in, here: Simply Faster free Blogger template

@Anonymous
Simply Faster template displays thumbnails from videos too.

@VAL
You want to read this: Targeting specific pages/URLs with conditional tags

Unknown February 19, 2012 at 5:38 PM    

Is there a way to "de-activate" this hack on posts with *specific labels*?

I have already implemented it so that auto read more works everywhere except at the home page but I'd like for it to work with some posts on the home page regardless.

The idea is to have only the latest 3 or 4 posts show up with the default Blogger read more thing and then the Auto read mode hack applied to the others below them (as well as in labels/archive etc).

I have tried adding this...

[b:if cond='data:label.name != "MY_LABEL"']
[data:post.body/]
[b:else/]

... but it doesn't work. It actually disables Auto Read across the whole blog (no auto read more in labels/archive etc).

What am I doing wrong?

Also, would it be possible to apply this hack to post published past a given time frame? (For example on posts published more than 1 week ago)

Thanks!

VAL February 19, 2012 at 6:48 PM    

@Greenlava, thanks a lot! I figured it out.

Greenlava February 19, 2012 at 7:03 PM    

@MapMaster
Could you describe the result you got from the code.
I see nothing wrong with it, except it would've excluded the first post on all multi-post pages (as opposed to the first post only on the homepage)

aalunga February 19, 2012 at 10:12 PM    

Hi
I have one more query.
Does the script counts spaces too?
Is there any way to leave a line break
intact (i.e) not to be excluded?

MapMaster February 20, 2012 at 12:26 AM    

Well, actually nothing at all happens it turns out. No thumbnails and no summaries, just the full length posts! I don't know if it has something to do with the blog being private at this time. I'm also a little confused by the fact that there are two places in the template where [data:post.body/] occurs -- I've tried adding the code in the first instance and then in the second instance, but with no results. I'm just using the Simple Template, modified in places. If you'd like I could temporarily make the blog public if you want to see the full template. Oh, and by the way I don't want to exclude the first post on all multi-post pages as you've mentioned, so I could use a tweak there too once the overall problem is fixed.

Cheers

Unknown February 20, 2012 at 5:46 AM    

Perhaps this is for another tutorial but I was wondering if there is a way to automatically make it so that the top image of a conventional read more post links to the post itself rather than to the image.

In order to achieve this result I'm currently manually replacing the href of the top image with the post URL.

Is there a way to make this work automatically without me having to edit every post?

I can't believe I can't find a tutorial for this.

Greenlava February 20, 2012 at 7:25 PM    

@ஆளுங்க (AALUNGA)
Yes it counts spaces too.
The script stips all HTML from the preview snippet. I don't have a workaround for that.

Greenlava February 20, 2012 at 8:04 PM    

@MapMaster
I think it's caused by the script. imagewidth and imageheight are not valid variables since you've never declared them.
This is the hardest part: to assign the width and height of the first image of a post to imagewidth and imageheight, so you can use them in them in the if else statement.

VAL February 20, 2012 at 8:14 PM    

How do I align "read more" link at the end of text snippet? Tx!
http://www.not-home.com/search/label/India

Greenlava February 20, 2012 at 8:41 PM    

@Waggler
1. To check for a specific label please refer to this post: Creating static pages in Blogger.
2. Adding the link to the image in actual post (in the case of conventional read more) could only be done manually. But if you want to add it to auto read more's thumbnail, it can be done automatically. Email me if you are interested.

MapMaster February 20, 2012 at 11:33 PM    

Is there any easy way to "get" the imagewidth and imageheight variables? I was using the script in this page (http://christianheilmann.com/2012/02/01/helper-functions-resize-images-to-a-variable-thumbnail-size/) as a guide, in which it appeared that imagewidth and imageheight were maybe just universal variables:

function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
var w = 0, h = 0, x = 0, y = 0,
widthratio = imagewidth / thumbwidth,
heightratio = imageheight / thumbheight,
maxratio = Math.max( widthratio, heightratio );
if ( maxratio ] 1 ) {
w = imagewidth / maxratio;
h = imageheight / maxratio;
} else {
w = imagewidth;
h = imageheight;
}
x = ( thumbwidth - w ) / 2;
y = ( thumbheight - h ) / 2;
return { w:w, h:h, x:x, y:y };
};

I'd be happy if you can help me, but ff there's another forum in which I ought to be addressing these newbie-type javascript questions, can you make a suggestion? Thanks

Greenlava February 21, 2012 at 12:35 AM    

@VAL
Use "text-align" as described in reply #179.

aalunga February 21, 2012 at 12:41 AM    

Thank you for the Reply...

In some posts, I got my summary around 300 words and was struggling to avoid the main story from coming inside the picture..

The clue that Spaces also are counted helped me very much!

Greenlava February 21, 2012 at 1:31 AM    

@MapMaster
No they're not universal variables. The four variables are only valid inside the resize() function, and the function only works when you pass values to them. You do this when you call the function, for example:
resize(500,400,200,150)

the problem now is how to get those values...and I don't have the answer :(

oh more thing, this is the HTML for an image posted on Blogger:
[img height="240" border="0" width="320" src="http://4.bp.blogspot.com/-1pNhrLv6h34/Tw7rFz_EghI/AAAAAAAACMQ/4aBTUW9l4lk/s320/2007_10140008.JPG"]

Notice it comes complete with height and width attributes. Maybe their presence would simplifies things a little.

Unknown February 21, 2012 at 4:40 AM    

Thanks for the reply Greelava, but I'm still unsure about how to integrate that static page hack code so that the Auto Read More is applied to just the posts with a specific label.

Just to be clear, what I want to do is to add a conditional tag between lines 08 and 09.

Putting this one there works fine...
[b:if cond='data:post.isFirstPost']
[data:post.body/]
[b:else/]
... but that's for just the first post.

I need something similar to that, but it has to target any posts with a given label instead of just the first one.

I've tried adding the following code between lines 08 and 09 but it doesn't work.
[b:if cond='data:label.name == "MY_LABEL"']
[data:post.body/]
[b:else/]

What am I missing?

MapMaster February 21, 2012 at 5:49 AM    

Thanks for taking the time to look at what I'm trying to do, Greenlava, and the Blogger HTML gives me an idea at least. I'll experiment and do some more research. I like a challenge, but I'm not sure I like a really big challenge :|

Going back to a previous question, if I wanted to exclude the first post only from the home page but not other index pages, what would I need to change to this code?

[!-- Auto read more Start --]
[!-- http://www.BloggerSentral.com --]
[b:if cond='data:blog.pageType == "item"']
[data:post.body/]
[b:else/]
[b:if cond='data:blog.pageType == "static_page"']
[data:post.body/]
[b:else/]
[b:if cond='data:post.isFirstPost']
[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]
[a class='more' expr:href='data:post.url']Read more ...[/a]
[/b:if]
[/b:if]
[/b:if]
[!-- Auto read more End --]

Thanks,

Melanie Payne March 24, 2012 at 2:10 AM    

Is there a way to fix the thumbnail picture? since pictures are not all the same size, some are looking cramped and squished in the thumbnail.

Sine May 4, 2012 at 2:04 PM    

Hi Greenlava,
it's been working like a charm for me in Chrome, but I just looked at my blog in Internet Explorer (not sure why people even still use it) and noticed that the images all are flattened into a thin line for some reason. Do you know how to fix that? (my blog is www.joburgexpat.com). Thanks!

«Oldest ‹Older 1 – 200 of 229 Newer› Newest»