Show post summary on search + label pages only

I wrote a previous tutorial about adding post summaries with a thumbnail to your Blogger blog so that a short extract is shown along with a read more link instead of the full post. I was asked if it was possible to show full posts on the homepage and excerpts only on searches such as labels, archives and the blogs search function. I played around with Bloggers conditional tags to alter the previous tutorial to allow this. Unfortunately I couldn’t include the read more text link but clicking the post title will open the full post. Here is an example of what it will look like.

How to show post summary on search and labels pages only - for blogger

  1. Go to Template > Edit HTML > Format Template and find </head>, paste the following right above it.

    <script type='text/javascript'>
    var thumbnail_mode = "no-float" ;
    summary_noimg = 300;
    summary_img = 350; 
    img_thumb_height = 200; 
     img_thumb_width = 300;
    </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(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>
  2. Now find <data:post.body/>, skip the first one which is for mobile and go to the next. Youโ€™ll see something similar to this

    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
     <!-- Then use the post body as the schema.org description,
    for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/>
    <!-- clear for photos floats -->
    </div>
    <b:else/>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/>
    <!-- clear for photos floats -->
    </div>
    </b:if>
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
    <data:post.jumpText/>
    </a>
    </div>
    </b:if>
    <div class='post-footer'>

    Replace <data:post.body/> with the code below. If you have two <data:post.body/> in your template within this section, you may need to replace them both.

    <!-- START post summary for search by xomisse -->
    <b:if cond='data:blog.searchLabel'>
    <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>  <span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &quot;<data:post.title/>&quot;</a></span>
    <b:else/>
    <data:post.body/>
    </b:if>
    <!-- END post summary for search by xomisse -->
  3. To change the height and width of the thumbnail you can alter the numbers in this section of the code in step 1
    img_thumb_height = 200; 
    img_thumb_width = 300; 

If thumbnails are stretched/skewed

If your thumbnails image are looking a little squished, go to Template > Edit HTML and find the code you added in the first step above </head>. You can alter the numbers for this section

summary_noimg = 300;
summary_img = 350; 
img_thumb_height = 200; 
 img_thumb_width = 300; 

to change the height and width of the summary & thumbnail. I recommend completing the tutorial first and then coming back to this once everything else is done.

Post last updated:

15 responses to “Show post summary on search + label pages only”

  1. Hi Ellie!

    I’m fairly certain I followed the steps as shown to the point where I was going back and forth like a mad person, but obviously I did something wrong. How typical of me. Would you be able to have a look and see where I went wrong? So that I don’t have to look at my blog and cringe.

    x

    1. Hello lovely, your images are set to float left so because of this and the fact they aren’t the full width of your post area, the text is appearing beside them. To fix it, you can remove the span style from each photo (in the blog post text editor) or increase the width of your images (using the code your added to your template). Hope this helps!

  2. Jennifer Ashley

    Hello again! Now that I have figured out your amazing nav bar tutorial, I decided to try and conquer this easy update! I love how straight forward this tutorial isโ€ฆ it was up and running on my test blog in under 10 minutes!

    I’m just wondering, is it possible to have a fixed width for the photos in the summary post and allow the height to vary? Either that or some way to auto-crop the image to fit the thumbnail image box? The images on my blog are both portrait and landscape and no matter how I adjust the thumbnail sizes something ends up stretched one way or another.

    1. Hello, remove the height value for img_thumb_height so that it reads img_thumb_height = '';. That will stop the height from being a certain sizee and will adjust depending on the width.

  3. Hello ๐Ÿ™‚

    Is there any way to do the opposite of this? and have the home page with the summary and the label pages completely open??
    Thanks!

    1. Hello Ashley, of course! Just swap the conditions (b:if cond) in the code in step 2 ๐Ÿ™‚

  4. Your blog has really helped me learn so much. Although, I am having some difficulty with this. I have it set so when you click on a link in my navigation it will go to all tagged posts. Everything looks fine until I click on the post summary to expand and it still shows the post summary above the post. Did I do something wrong there that you can help me with?

    1. Hello, make sure the coding matches what’s shown above exactly. It sounds like you’ve missed part of the code that should of been replaced.

  5. Rei

    sist…is it possible to make homepage and search-label turning to “post-summary at the same time?

    1. Hello, yes this tutorial shows you how.

  6. Hi Ellie!
    This tutorial is amazing! I was just wondering if there was a way to replace the read more link with a photo instead?? Thank you!

    liv sweet,
    xoxo Liv

    1. Hello Olivia, I have a tutorial on that here that you can combine with the code above.

  7. Hey Elaine! I love this tutorial, but there I was wondering if there was a way to make the read more link into an image instead? ๐Ÿ™‚

    1. Hey Julia, thank you. Yes, you can replace the code for the jump link (read more button) with an image, have a tutorial here.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.