Auto Read More with thumbnail for Blogger/Blogspot Posts

How to make posts in the blog homepage to be displayed with an automatic "read more" button and a thumbnail.

To be more specific, this will show the title of the post, a short summary with a number of characters and a thumbnail, that will be the thumbnail of the first image uploaded inside the post. After the thumbnail and the post summary, there will be a "Read More" link which, when you click on it, will take you to the actual post.

This Automatic Read More script will summarize content and the post summary will be shown only on the main blog page (homepage), category pages, and archive pages.

Using the Automatic Read More feature in Blogger Posts

Step 1. From your Blogger dashboard, go to "Template" and click on the "Edit HTML" button:


Step 2. Click anywhere inside the code area, then press the CTRL + F keys and search for this tag (hit Enter to find it):
<data:post.body/>
Note: after hitting Enter, you'll find this code more than once but you need to stop at the third one.

Step 3. Replace the code above with this one:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Note: if you don't see any changes after going through all the steps, please try to replace the second <data:post.body/> as well.

Step 4. Now search for the following tag:
</head>
Step 5. Just above the </head> tag, add the following script and CSS code:
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Note: 
- To change the number of characters shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
- If you want larger thumbnails, modify the 160 (height) and 180 (width) values in red.

Step 6. Click on the "Save template" button to save the changes.

And this is how you can add auto read more with thumbnail to Blogger posts. Enjoy!

138 comments:

  1. how to show only thumbnails without post title and snippet
    at the home page

    ReplyDelete
  2. There is 3 of " " in my template.
    Do I change all of these lines (to yours)?

    ReplyDelete
    Replies
    1. From the instruction above you are to change the 3rd one

      Delete
  3. it didn't work for me. admin help please

    ReplyDelete
    Replies
    1. There is 3 of them, replace the second one and it will work

      Delete
  4. Hi there are 3 tags for in my code. Which one (or ones) do I need to change?

    ReplyDelete
  5. its not working,,, please help,,, newworldfree4u.blogspot.in

    ReplyDelete
  6. I think you should replace them all. Word for me!

    ReplyDelete
  7. this trick not working anymore with new blogspot template.. just follow tutorial from google http://support.google.com/blogger/bin/answer.py?hl=en&answer=154172

    ReplyDelete
  8. Thank You Very Much Bro! I Used Your Technique And Its Working!!
    This Is My Link..Http://Infoaday.Blogspot.Com/
    The Ctrl+F That You Suggest Was Most Helpful..

    I Just Having Difficulties With
    "Find (CTRL + F) and replace with:"
    It Should Be:
    "Find (CTRL + F) and replace ALL the with:"

    By The Way, Thanks Again!

    ReplyDelete
  9. how you show that " '
    and the line
    please tell i want this

    ReplyDelete
  10. Hello,thx alot for this piece of code,it does work,I have a quick question though,the images that appear as thumbnail is very blur after I increased the pixels,can you pl help me solve this.thx again

    ReplyDelete
  11. Hello! Thanks for all your help! I love your blog..
    I have one question though.. I used the code and it works fine, but it only shows 1 line of the post in the preview.. Can I make it show more? 3-4?

    ReplyDelete
  12. thank you for this opportunity. you are the best

    ReplyDelete
  13. Hello admin! I tried this widget and thanks! It works!

    If its not rude, I wish to inquire about a problem of mine:

    Whenever I enable google+ comments, I see some comment counts in my posts at the Posts section. But when I click it, I came to my blog and wala! No comments been made at all!

    Its been bugging me lately, and I fear it will get worse. How if the comments are about people asking questions and I'm not replying it cause I can't see any comments been made? I am scared of losing my viewers, as I had only started 1 month ago!

    Please teach me admin, any advice on this?

    ReplyDelete
    Replies
    1. You must be using a custom blogger template, custom blogger template have some problem if you use the google plus comment system, I have a way to fix that but posting it on this would be really long

      Delete
  14. thank you it really works for me but i want to increase number of words (intro statments ) how ca i do that plz?

    ReplyDelete
    Replies
    1. Yes please me too..waiting for your reply..

      Delete
    2. Hi,

      I updated my post, but you need to add the code again as the last one didn't have the option to add more characters. Sorry :(

      This is the code that you need to remove:

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div>
      <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
      </b:if>
      <data:post.snippet/>
      </div>
      <div class='jump-link'>
      <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
      <b:else/>
      <data:post.body/>
      </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

      You can find it by searching for the <data:post.body/> tag and then look for the rest of it. Be careful when you delete this code - it should look exactly like the one above. I recommend you to make a backup of your template before changing anything. Thanks for visiting!

      Delete
  15. Replies
    1. Hi Rohini,

      Add this code just above ]]></b:skin>

      .post-thumbnail {
      display: none;
      }

      Delete
    2. thanks man.. it's working now ♥♥3 uuuu

      Delete
  16. Thank you so much for this! It works a treat!

    ReplyDelete
    Replies
    1. You're welcome! Thanks for stopping by :)

      Delete
  17. Hi, I've a small problem with your code for Auto Read More. How to do caption from a picture (zdroj ZDE) doesn't connect to a text of article in shorten version on the main page?
    There are lins for the screens what I mean:
    http://www.nahraj-obrazek.cz/?di=12138935226513
    http://www.nahraj-obrazek.cz/?di=313893522658

    ReplyDelete
  18. Thank you!

    Could you tell me how can I justify text above "Read more"?

    ReplyDelete
    Replies
    1. Hi Cathy,

      Go to Template, click on the Edit HTML button and search (CTRL + F) for this fragment of code:
      var summary = imgtag + '<div>' + removeHtmlTag

      After you found it, after the <div part, add class="summary" - like this:
      var summary = imgtag + '<div class="summary">' + removeHtmlTag

      Next find the </head> tag, and add this style just above it:
      <style>
      .summary {
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      }
      </style>

      If you want more space between thumbnail and post summary, then change the 0px value from padding (first is the distance from the top, then right, bottom and left). Or, if you want to move the text, change the values for margin.

      I hope this will help you :) Thanks for visiting!

      Delete
  19. can i delete the summary? I just want the title and thumb. If the post doesnt have images but videos, how can i add a thumb?

    ReplyDelete
  20. I made the changes, but it does not seem to work. Can you please assist me with creating thumbnails and "read more" buttons for my posts on my homepage? nandiphotography.blogspot.com/ I am not sure where I have gone wrong..

    ReplyDelete
  21. this article is a great help to me i was so much frustrated that why i was not able to make my blogger post smaller and searcehd a lot and i found your blog really a great help for me thumbs up:) thankyou for this good post

    ReplyDelete
  22. I don't have the code in my html code???

    ReplyDelete
  23. Perfect, this works brilliantly for me thanks!
    There are two things I can;t figure out how to change though, now I've changed the html to show the thumbnails:
    1. The thumbnail font is different to the blog post font - but I want it to be consistent with the post. How do I change this in the coding?

    2. It includes all the social share buttons under each thumbnail, but I'd prefer these to be just in the actual blog post not on the homepage under each one. How do I change this?

    Many thanks
    Scarlett

    ReplyDelete
    Replies
    1. Hi Scarlett,

      To change the font for post summary, go to Template, click on the Customize button, choose Advanced and on the Page Text option, select the Courier font, then click on the Apply to blog button. This setting will change the overall text on your blog, including the text on your sidebar. If you want to change the font only for your post summary, then go to Template - Edit HTML, click anywhere inside the code area and search by using the CTRL + F keys for this line:

      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

      And replace it with this one:

      var summary = imgtag + '<div style="font-family: Courier New,Courier,monospace;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

      Click on the Save template button.

      2. To hide the post footer on homepage, go to Template - Edit HTML and search for the </head> tag and just above it add this code:

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <style type='text/css'>
      .post-footer { display: none;}
      </style>
      </b:if>
      </b:if>

      Click on the Save template button to save the changes.
      I hope this will work for you. Thanks for visiting :)

      Delete
  24. Thank you so much, it works!! :)))

    ReplyDelete
  25. want some help the font page i did the coding is working for me but when i try to add a new page the coding is not working and the post is not becoming smalller plz if you can help right this in it?

    ReplyDelete
  26. hi. can you please help me? I cant find the code in my template, though i find it using ctrl+f.

    ReplyDelete
  27. There is no " " in my edit html code. Why so?

    ReplyDelete
  28. Hi, it' works on my Blog
    http://caomode.blogspot.com/

    Thank you ;)

    ReplyDelete
  29. not working i have tried all of the same post from different site on my blog www.edujandon.blogspot.com but still it doesnt work,please help

    ReplyDelete
  30. and me
    I don't have the code in my html code???
    http://chatolk.blogspot.com/

    ReplyDelete
  31. I've used your html for the read more display and it worked a treat and i've hand it for a few months now, however i wondered if you knew i way to revert back to my old template as i didn't know you could save the old template?

    need help urgently

    ReplyDelete
  32. hi
    i tried it and it worked great. I have been searching blogs for this but no one seems to understand what they are posting, Godness, i have been on this for quite some days now.
    Thanks for your wonderful tutorial, and as from today onwards i'm a fan of your this blog.
    I have this question "How do i do it, I dont want the code to have effect on my thumbnail, because no matter what px you use the picture will still look horrible. Thats why i dont want the code to affect my thumbnail.

    ReplyDelete
  33. hello when i enable the deception of the blog to activate search preferences the auto read more disappear what should i do pls. ???

    ReplyDelete
    Replies
    1. Hi there,

      Replace the last <data:post.body/> as well and see if it works. Thanks for visiting!

      Delete
  34. Thanks, it worked great! Even works on the mobile template. Makes me wonder why blogspot doesn't offer this as a feature. Hmmm.

    ReplyDelete
  35. how can install this auto install this auto scrolling pages on the left side of my blog or a static header which stics on top while you scroll down like you have in your blog

    ReplyDelete
  36. Hi there, I installed this on my friends blog (jessaboutaverage.com) - and all was fine for about a month and it's suddenly stopped working. The thumbnail and small paragraph will not work any more and instead the full-sized pics and full post test are displayed. This change was sudden and nothing was done to make it happen.
    If I export the template and plug it into a new design, it works fine.

    It has been asked on the google/blogger help forum if this code doesn't work on custom domains? Can you confirm this? Is the code only for Blogspot.com addresses? (although admittedly it doesn't explain why it would work for a month and then stop).

    I know you must get a lot of comments but if you could let me know that would be great!
    Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Sharnee,

      Have you tried to replace the last <data:post.body/> with the script from step 3 to see if it works? Also, I need to know when you added the code because I've updated my post two months ago (see this reply) and it might be a little bit different from this one.

      If it still doesn't work (after replacing the last <data:post.body/>) you can send a copy of your template at helplogger76@gmail.com and I will make the modifications. Thanks for visiting!

      Delete
  37. Thank your so much, I will try it as soon as I'm online properly. I definitely added the code after the second data: post-body, so will try what you've suggested.
    The only weird thing with my problem is that I can't replicate it. Anyway, I'll test it and let you know. Thank you very much!!

    ReplyDelete
    Replies
    1. Thank you :)
      I had inserted the code just short of 2 months ago, so I made a basic clean template and re-installed and it was fine. I really appreciate you getting back to me so quickly! <3

      Delete
  38. Thank you so much! it did work on my blogspot, and my teacher really amazed because i'm the only one in my class who can add the read more button! Thankyou ^^

    ReplyDelete
    Replies
    1. Hi Fabella,

      I'm glad to hear that it was useful for you :) Thanks for visiting!

      Delete
  39. This is fantastic! Thank you so much for posting this tutorial. I was hoping, is there a way to also hide the No Comments, share buttons and labels at the end of the post summaries (but they still show on the full length post)?

    ReplyDelete
  40. Hi, admin..

    its work for me, but only work with domain blogspot.com, i try to use it with custom domain .com, and the result isn't work.

    please tell me how fix this..

    many thanks

    ReplyDelete
  41. Tnk you so much. Saved a lot of time.
    Thanks. :-)

    ReplyDelete
  42. How to increase the number of posts shown in Home page after adding this code. It is fixed 5 posts. i would like to increase the number of posts to greater than 5. Even of i use the edit options in the blog to increase the number of posts it is not responsive & stays fixed at 5. Kindly help me.

    ReplyDelete
    Replies
    1. Hi Eliza,

      Please go to Settings > Posts and Comment and change the number of post on the right, where it says Show at most, then click on the Save settings button.

      Delete
    2. I'm having the same issue as Eliza. The Home page is capped at 5 posts. If I change the "Show at most" less than 5, then the homepage reflects the setting. Anything over than 5, caps at 5 on the homepage. However, if I go to say, page 2 of the homepage, it will show the proper quantity of posts. Any thoughts?

      Delete
  43. grear..hi.. admin. i wish to customize my blog post list in homepage..i want to wrap each blog post in my homepage with my custom template.. which code should i modify? Thanks

    ReplyDelete
  44. Hi,
    I have recently started to get my blog together that will be my photography blog. It comes with a nice addition that shows a thumbnail of the first image of a post, along with that post's title underneath. Click the title, and you're taken to the post, but click the picture, and it opens a light box. Look here: http://midnightstormnd.blogspot.com/ -- and then click on Gallery.

    I would like for the picture to also go to the post, instead of the lightbox, because the light box only shows that picture, but I want them to click into the post to see the rest of the pictures. In the javascript, the image is wrapped in an anchor to go to the image url, to see it full view, which brings up the lightbox.

    I've tried changing the +img[0]-src+ thing with 'data:post.url' and 'data:post.link', but it doesn't do what I want it to.

    Do you think you might be able to help, please? It's very frustrating, and honestly the last thing I want to do with the blog's coding before I move onto colors/graphics.

    Please and thank you very much!

    ReplyDelete
    Replies
    1. Hi Jacob,

      I don't know from where you downloaded this template but you are using an older version of it... so I would recommend you to download the version 1.3 of the Queen template, which supports this function. You can find it on google by searching "Queen blogger template" (the one from lovelytemplates website works well). Sorry for the late reply!

      Delete
  45. Thank you very much! It worked perfectly!

    ReplyDelete
  46. OMG! Thank you so much for this! I've been looking for a guide on how to do this. Thank you for making it so easy! I was just wondering, how can I make the font bigger in the post summary? I want it to take up the space between each post, especially since I made the picture bigger. Thank you again!

    ReplyDelete
    Replies
    1. Hi Jessica,

      Please replace this line from step 5:

      .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

      with:

      .post {font-size: 17px;margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

      Where font-size: 17px is the size of the posts content. You can increase/decrease the 17px value to make the font size bigger/smaller. I hope this will work for you :)
      Thanks for visiting!

      Delete
  47. Hii i have images which appear in thumbnail but for most of them the aspect ratio in thumbnail is not correct and images appear distorted, is there a way to maintain consistency?

    ReplyDelete
  48. I am new to blogger from wordpress. Sad to say I like wordpress better for a few reasons. How can I add a feature photo without putting it in the blog post.

    Thank you!

    ReplyDelete
    Replies
    1. Hi Melissa,

      An easy way to add a feature photo would be going to "Layout" and click on the "Add a gadget" link on the right side > scroll down and select the "Image" gadget. There you will need to add a title for your image and upload it by clicking on the Browse button. After you saved the photo, drag the Image gadget to where you want it to appear (blog posts area, sidebar, below the header etc.) and click on the "Save arrangement" button.

      If the picture size is too large, click on the "Edit" link within the Image gadget and check the "Shrink to fit" option. Please note that this image will appear on all the pages by default, but you can make it appear only on the homepage/post pages - here's a tutorial that will show you how to do it.

      Thanks for visiting!

      Delete
  49. hi admin
    i cant see data:post.body
    in my template html
    whtat i do plz help

    ReplyDelete
  50. Hey, thanks a lot for this, works great! I just had one question, how can I display the image above the summary text? I want the image to fill the main width of my blog post section so have adjusted the size but i want the text to display under neath rather than on the right.

    please help

    ReplyDelete
    Replies
    1. Hi Shiba,

      Please replace this line (CTRL + F to find it):
      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

      with this one:
      var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';

      Then, you need to add this line just before the </style> tag (step 5):
      .summary {clear: both;}

      I hope this will work for you. Thanks for stopping by !

      Delete
  51. thank you very much for this turorials

    ReplyDelete
    Replies
    1. You're welcome. Thanks for stopping by :)

      Delete
  52. Thanks man

    When i upload image from other website to my blog post, that image doesn't appear in thumbnail. But when i upload from my computer or from my own picasa account, it works fine.

    Please tell me the solution

    And also tell me how to show when i upload videos to blog that should be appear in thumnail.

    once again thanks man

    ReplyDelete
  53. How do I format the text so that it only appears at the bottom of the thumbnail? At the moment it is showing on the right side of the picture, which looks a bit odd. http://misslaurenkyle.blogspot.ca
    Thanks for the tutorial!
    -Sincerely, Miss Lauren Kyle

    ReplyDelete
    Replies
    1. Hi Lauren,

      You will need to add these lines above the </style> tag (step 5):
      .post-title {float: right; display: inline-block;}
      .post-body img {display: inline-block;float: left;}
      .post-body {display: inline-block; float: right;}

      I hope it will look good now. Thanks for visiting!

      Delete
  54. Hi

    You have made my blog. It's really working fine.Thank you so much.

    http://www.thingsyouneedknow.com/

    ReplyDelete
  55. please help me. my blog didn't work with Auto Read More and tried many many times but it still not.

    ReplyDelete
  56. Thanks for the help! It made my blog look great. Didn't work the first time, but I realized I had to replace with the code rather than placing the code under the body tag.

    ReplyDelete
  57. I used this and it worked on some of my posts, but some it didn't do anything. It is also saying read more twice. What am I doing wrong?

    ReplyDelete
  58. I was so nervous to change the template but it's worked WONDERS, THANK YOU :D

    ReplyDelete
  59. Could you tell me how can I justify text above "Read more"?

    ReplyDelete
  60. I finally found out how to insert "Read more", thanks to your guide!
    But it seems there is a problem. It only works for the first post, the other posts below it don't have "Read more".
    Could you help me out with this one?

    ReplyDelete
  61. Hi, thanks for you, it's work verry well !

    But i have a question : i would like to apply a roll effect on the thumbnail which appared after.
    How i can add a roll effet ? And where ?

    I try to apply many roll effect but i can't success to apply on the thumbnail

    Thank you very much :)

    ReplyDelete
  62. Your post is wonderful.
    I have read your post and comments. I have a problem hope you can help me.
    I want to hide part of my post but no make a summary. The summary change the structure of the post.
    For example, my post starts like this:
    This is apple.
    This is banana.
    This is our house.
    The summay will be:
    This is apple.This is banana.This is our house. Read more...
    You have to write words to avoid this at the first paragraph. So I want to know how to keep the post's structure without making paragraphs together. Or any other post will help me?

    ReplyDelete
  63. Thanks and there is one issue I am facing, please help me with this
    How to align the text "JUSTIFY" manner before Read more or shows in Home pages
    Pleas help Thanks

    ReplyDelete
  64. Hi. My title is above my image and my summary is to the right of it. It looks okay, but I would like to bring the post title to the right of the image so it is just above the summary.

    Can you help me do this?

    ReplyDelete
  65. Replacing all of the tabs (total 03) works fine. Thanks

    ReplyDelete
  66. It finally worked when i tried to replace the third . Thanks.

    ReplyDelete
  67. OMG thank you so much!!!!!!!!!!!!!

    ReplyDelete
  68. Thanks for this post! Unfortunately some of my images are not all the same aspect ratio, so the fixed width and height make some of my images look distorted. Is there a way to set the width and have the height automatically adjust, or vice versa?

    ReplyDelete
  69. Hi there,
    the code works perfectly thank you very much!
    Just one question: since my blog is in Italian (controarticolo.blogspot.it) I'd like the Read More link to display the words "Continua a leggere" instead of "Read More". Any help on this?
    Cheers

    Ric

    ReplyDelete
    Replies
    1. Hi Ric,

      Go to Template - Edit HTML, search (CTRL + F) for the "Read More" text and simply replace this text (the "& #187 ;" character is the arrow after this text, you can either leave it or remove it).

      Thanks for visiting!

      Delete
  70. Thank admin for your tips . It's really helpful

    ReplyDelete
  71. hi admin, than you so much for this. it works in my blog. can you help me on how to have more than more than 3 post to appear in the blog page? thank you in advance

    ReplyDelete
    Replies
    1. Hi Neil,

      I'm not sure why this is happening to you. Have you tried to modify the number of posts in Settings > Posts and comments and type the number in the "Show at most..." box? Also, please don't forget to click the "Save settings" button.

      Delete
  72. Hi, very helpful post. But i wouldn't want the date to show on on post summaries, but it should rather show on the main page of the post. Any way for doing this with CSS or anyother?

    ReplyDelete
  73. Thank you so much for this post, very very helpful!

    I was hoping - I don't want to strip HTML from the summary. How can I achieve that? I tried replacing the removeHtmlTag from the code but I just broke it.

    ReplyDelete
  74. How can I add author name, label, number of comments to the below the snippet?

    ReplyDelete
  75. Thanks and there is one issue I am facing, please help me with this
    How to align the text "JUSTIFY" manner before Read more or shows in Home pages
    Pleas help Thanks
    and wanna to less character

    ReplyDelete
    Replies
    1. You can edit the amount of characters to less characters by changing the numbers in:

      posts_no_thumb_sum = 490;
      posts_thumb_sum = 400;

      And you can justify post text by adding this to your CSS:

      text-align:justify;
      text-justify:inter-word;

      Delete
  76. Did not work for me at all.... :( Rather disappointed... :(

    ReplyDelete
  77. Read more button is not appearing in all the posts except first one. What will be the reason please tell me.

    ReplyDelete
    Replies
    1. Hi Hassnain,

      It seems that you implemented the code for the magazine layout, so you'll need to remove that one (replace the codes that you added with the older ones) in order to make this work.

      Delete
  78. Thank you Admin
    I want to ask you if there is a way to center the thumbnail above the post summary

    ReplyDelete
  79. this code stopped working from yesterday....

    ReplyDelete
  80. Hello, thanks for your help.
    I am actually looking to have the summary text and read more link appear under the title and ABOVE the thumbnail image. How do I do that?
    Sincerely,
    Miss Lauren Kyle

    www.misslaurenkyle.com

    ReplyDelete
  81. It works for all my older posts, but not the one I just posted, can anyone help?

    ReplyDelete
  82. Hello, can you help me? This is working on all of my old posts, but not on the ones I posted yesterday. It is showing up with the full post on the page. I am unsure what I have done wrong. I spend hours going over the coding and just can't figure out where the issue is coming from. Also some of my older posts do not have the date on them. http://onespringstreet.blogspot.com/

    ReplyDelete
  83. It worked. Thanks!

    ReplyDelete
  84. My blog http://vipreal.blogspot.com/ has worked already. Awesome! Tks much.

    Hi Lauren Kyle,

    You can search "var summary" change it order: to: var summary = removeHtmlTag(div.innerHTML,summ) + .... + imgtag +......

    and add padding to the image: search: imgtag add more margin-right: 10px; margin-top: 15px; margin-bottom: 15px">

    You can look at my blog: http://vipreal.blogspot.com/

    ReplyDelete
  85. does anyone know what to do, if your first picture is portrait? Because the values will squash the picture. Please help asap!

    ReplyDelete
  86. Thanks for this post! Unfortunately some of my images are not all the same aspect ratio, so the fixed width and height make some of my images look distorted. Is there a way to set the width and have the height automatically adjust, or vice versa?
    <a href="http://www.bloggercup.com/> BloggerCup </a>

    ReplyDelete
  87. Hi, great tutorial. is it possible to just post the title and the first image and then read more below it?

    ReplyDelete
    Replies
    1. Hi Cheryl,

      Search for this line in your template:
      <span class="posts-thumb" style="float:left; margin-right: 10px;">

      And remove the part in bold. To make the image full width, add this just before/above the </style> tag from step 5:
      span.posts-thumb a img {
      width: 100%;
      height: 100%;
      }

      Hope it works. Thanks for visiting :)

      Delete
  88. Thanks for this post! Unfortunately some of my images are not all the same aspect ratio, so the fixed width and height make some of my images look distorted. Is there a way to set the width and have the height automatically adjust, or vice versa?

    This is a very frustrating problem!
    <a href="http://www.nikjamess.blogspot.co.uk/>NIKJAMESS | Fashion & Lifestyle</a>

    ReplyDelete
  89. Thank you very much Your blog it's very helpfull but please can you show me how to detete the summry plz

    ReplyDelete
  90. sorry guys please admin delete the first comment
    and this is how to remove summary from read more scripte

    so change this code that to
    var summary = imgtag + '< div >' + removeHtmlTag(div.innerHTML,summ) + '';

    make it look like that

    var summary = imgtag + '< div >';

    ReplyDelete
  91. not working at all :( what can i do now ?? i followed everything step by step

    ReplyDelete
  92. Hi there!

    Thank you so much for this post! Its working great on my sight.

    I was just wondering how to center the image and have while having the summary text below it. Right now the picture is to the left side.

    Also, I would love to have more than 5 thumnails showing on the page. I have gone to the settings tab and clicked to show "100" posts per page. But it has still not changed. Any help would be greatly appreciated:)!

    Thanks so much,
    Christian

    ReplyDelete
  93. thank you very much, I'm trying.
    ilmudes.blogspot.com

    ReplyDelete
  94. Please tell me why it doesn't work in my blog

    ReplyDelete
  95. didn't working for me
    also is not repaeated three times
    and i have added a related posts script before /head tag
    please help

    ReplyDelete
  96. admin, it is working for me.but showing only two posts.
    pls help m
    i checked settings on post and comments and layout section.
    i given 10 posts, but it shows only 2 posts

    ReplyDelete
  97. Thank you! This worked perfectly!!!

    ReplyDelete
  98. Works like a charm!!! Thank you!

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted.