How To Show Only Post Thumbnails And Snippets In Blogger Blog Homepage

Hi! Welcome to another tutorial, How To Show Only Post Thumbnails And Snippets In Blogger Blog Homepage in this complete blogger blog tutorial series. By default, blog post shows full on your blogger blog homepage with a number of it as preset. This makes your blog looks clumsy, not neat and visitors leave your blog site quickly. If you’re tired of those full, long unending post of your blogger homepage, then you’ve come to the right place, just follow the tutorial and you should be fine!

We have covered a lot in this full blogger blog tutorial series, first, we look at Blogger Review to How To Create A Blog On The Blogger.com Platform. We also learned How To Create HTML Sitemap Page for our blogger blog, in another tutorial, we’ve seen how to add Contact Form In Blogger On A Page, from there we added Twitter Card To our blog. How To Add Breadcrumbs To Blogger Blog and How To Underline Links In Blogger Blog can also not be forgotten. As I said earlier, in this tutorial, I will show you How To Show Only Post Thumbnails And Snippets In Blogger (Blogspot) Homepage.

Table Of Content

1. Introduction
2. What Are Post Thumbnails Or Featured Images
3. What Are Post Snippets
4. The Importance Of Showing Only Post Thumbnails And Snippets On Blogger Homepage
5. How To Show Only Post Thumbnails And Snippets In Blogger Homepage

What Are Post Thumbnails Or Featured Images

Featured images (also sometimes called Post Thumbnails) are images that represent an individual Post, Page, or Custom Post Type. A featured image is an image that you chose as the representative image for your posts and pages. This is especially useful for "magazine-style" themes where each post has an image.

What Are Post Snippets

Snippets are chunks of text from the first few lines of a blogger post. It can act as a summary or as the introductory lines of text to a post. A text snippet is 101 characters long and after that three dots (…) are added, marking the continuity of the post. If a jump break exists before those 101 first characters, then snippets are picked up to the jump break.

When it comes to the virtual space, don’t underestimate how important a snippet is. It is one of the most vital aspects of your blog posts. See it as the door that leads to your blog post. There is a need to create appealing snippets if you want to get the best organic visits.

The Importance Of Showing Only Post Thumbnails And Snippets On Blogger Homepage

Showing only post thumbnails and snippets on your blogger homepage come with some benefits:

1. With this trick, your post thumbnails and snippets are automatically generated on your main blog page. You could do this by manually adding jump breaks while writing posts, but this is a way to automatically add a “read more” button to each post on your blog.
2. Showing Only Post Thumbnails And Snippets On Blogger Homepage makes your homepage appear neater, load faster and can help readers easily scan through multiple posts and see what grab their attention.
3. Showing Only Post Thumbnails And Snippets On Blogger Homepage also reduces bounce rate and visitors tend to spend more time on your site.

Like I’d always say; blogger blog lacks widget/ gadget but they are one of the best anyway. With the WordPress platform, it is easy to add excerpts with thumbnail to your blog's homepage/ front page but in blogger, it is impossible except with some few codes like the one I am about to show you.

When you go to any blog, on the homepage you will only see the post summaries with images (ie, thumbnails or featured images) and the read more sign, that is what I am talking about. If you’d like to see how excerpts with thumbnail works, click the “Home” above this page.

Read More Option with Thumbnail hack is far better than Blogger’s default jump break option because it automatically creates a summary of posts on archive page Type and index page Type i.e. home page, label page and search results pages with standard defined thumbnail size and words length.

How To Show Only Post Thumbnails And Snippets In Blogger Homepage

Now let's dive into the major business for the day, How To Show Only Post Thumbnails And Snippets In Blogger Blog Homepage. Showing Only Post Thumbnails And Snippets In Blogger Homepage is not difficult, just follow strictly and you should be fine. If you're using "Dynamic Views" and "Contempo" theme for your blog then this tutorial is not for you, these themes by default show post thumbnails and snippets on the home page. But any theme that does not show post thumbnails and snippets, you may apply this tutorial.

Step 1: Go to Theme>>Edit HTML and find </head>, paste the following code right above it. If you don't know how to do it don't worry I am taking you through this tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right corner of the template codes. Copy and paste the above code inside the search box and press Enter on your keyboard. Copy and paste the following code just above it. 

<script type='text/javascript'>
var thumbnail_mode = "yes";
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 = '<div class="xopostimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="xopostsummary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Step 2: Find this code <div class='post-body entry-content' Now you will find this code below or around it <data:post.body/> Replace <data:post.body/> with the code below. Alternatively, find this code directly <data:post.body/> and replace the below code with it. If you find multiple of this  code <data:post.body/> see the infographic below to see the right one to replace. Tip, examine the surrounding codes and see if it marches with the one in the infographic below.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>"</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Congratulations! You're done. This tutorial, How To Show Only Post Thumbnails And Snippets In Blogger Homepage has been tried and tested and it works and looks good. But if you want to do some changes, it's okay, see below how to do the changes. Save your theme or template and you're good to go! Go to your blogger homepage and see the result for yourself.

To change the height and width of the thumbnail you can alter the numbers in this section of the code 

img_thumb_height = 200; 

img_thumb_width = 300;

If your thumbnails image are looking a little squished, alter the values below

summary_noimg = 300; 

summary_img = 350; 

img_thumb_height = 200; 

img_thumb_width = 300; 

to change the height and width of the summary & images. You can also make the images full width and automatic height.

I have tried so much to cover everything in this tutorial, How To Add Meta Tags To Blogger Blog. If you follow the tutorial strictly, I don't think you'll encounter any issues, however, if you encounter any, comment it at the comment section below and I will attend to you! Happy blogging! And don't forget to share, thanks!

full-width