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.

Buy me a coffeeBuy me a coffee

15 Comments

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

  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?

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

  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

Sorry, comments are closed!