Thumbnails & Summary

As promised, here are some Tips & Tricks when it comes to Blogger Post. Sit back relax crack a can of pop and lets get it done. If you have already seen our home main page, you have an idea as to how yours should look if wanting to use Thumbnails and a summary of course. Give or take a few variations as we will discuss below.

Blogger will show by default all of your post in a very lengthy vertical format.  

If you are like me and do not want your readers to become bored by the tedious task of having to scroll through every post in the attempt to find tips on how to design and or decorate their interior and or exterior living spaces. Be ready to add an important feature to your blogger template.  I am not a coding specialist per say, but as I became familiar with template HTML I began to find it easier to understand along the way. The below trick was garnered from this site [source: my bloggins note.com] if you would like to visit it. It was one of the only sites that I found helpful. (For me anyway.)

You must first log into your blogger dashboard, go to template (or theme) and click Edit HTML. You must then copy and paste the code below, above this line [[></b:skin>, in your template.

Hint: to find this code [[></b:skin>  in your html template, Hit cntrl + F and a search box will appear.

Ok here is the code you should place:

.box-readmore{text-align:right}

a.readmore{padding:4px 15px;text-decoration:none;font-size:14px;background:#666 url() left top repeat-x;border:0px solid #CAC4C4;color:#fff;-moz-border-radius:04px; -khtml-border-radius:04px;left top repeat-x}

a.readmore:hover{background:#222 url() left top repeat-x;border:0px solid #3F7B84;color:#FFF}

Now proceed to find this code in your template: </head>, above it copy and paste the code below:

<script type='text/javascript'>

summary_noimg = 400;

summary_img = 350;

img_thumb_height = 120;

img_thumb_width = 150;

</script>

<script type='text/javascript'>

    //<![CDATA[

    function HTMLtagdrop(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 ThumbnailSummary(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>' + HTMLtagdrop(div.innerHTML,summ) + '</div>';

    div.innerHTML = summary;

    }

    //]]>

</script>

EnD of Script. (Do not Copy & Paste.)

Note: The number values above highlighted in green can be changed to your like. do not change the wording just the number values to suit your blog. 

Lastly find  <data:post.body/>, in your html template. You will find three codes similar to this one. On the second code which you found, replace with the code below, sometimes you have replace the third one as well, just preview it first to check that you have replaced the correct code:

<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' style='text-align: justify'>

<data:post.body/>

</div>

<script type='text/javascript'>ThumbnailSummary

(&quot;summary<data:post.id/>&quot;);</script>

<div class='box-readmore'>

<a class='readmore' expr:href='data:post.url'>Read More&#187;</a>

</div>

</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>

EnD of Script


Remember to hit the preview button prior to saving the template. This will let you see how the final product would look like before going live. That is it. If you made a mistake along the way or it doesn't look like it should simply hit the Back tab in your template and the changes WILL NOT be saved. You can always start over at the top.

Above is an image of how the Thumbnails and Summary will look like on your page. 

The size of the thumbnail image and the amount of words displayed in the summary will depend on the values set in the HTML script. 

If you found this post helpful, please leave us a comment.