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
- What Are Post Thumbnails Or Featured Images
- What Are Post Snippets
- The Importance Of Showing Only Post Thumbnails And Snippets On Blogger Homepage
- 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:
- 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.
- 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.
- 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
var thumbnail_mode = “yes”;
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
var s = strx.split(“<");
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);
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
imgtag = ‘
summ = summary_img;
var summary = imgtag + ‘‘ + removeHtmlTag(div.innerHTML,summ) + ‘
div.innerHTML = summary;
To change the height and width of the thumbnail you can alter the numbers in this section of the code