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

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. 
Step 1: Go to Theme>>Edit HTML and find </head>, paste the following code right 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

Post a Comment

38 Comments

  1. Amazing post. Thanks for sharing.

    mall discount

    ReplyDelete

  2. Best and helpfull Post,Hi Sir, Techno Prokash,I am your regular website viewer and user,just as your other articles attracts us, your articles help us a lot.Thanks forpublishing this article.

    ReplyDelete
  3. hi!,I like your writing so much! share we keep up a correspondence extra approximately your post on AOL? I require a specialist on this space to solve my problem. May be that is you! Looking ahead to peer you. jav tube Free Download

    ReplyDelete
  4. HI, was trying to follow your post but can't find on my template de code you say needs to be replaced.the code does not exist on my blogger simple template. Could you help with that?

    ReplyDelete

  5. شركات نقل الاثاث بجازان افضل شركة نقل عفش بجازان نقوم بنقل الاثاث من والى جازان فى اى وقت سيارت مغلقة خدمة عملاء على اعلى مستوى من المهنية عمالة فلبينية ماهرة فى نقل الاثاث من والى جازان

    ReplyDelete
  6. بہت بہت شکریہ آپ کا جناب آرڈر صارفین یہاں پر کلک کر کے دیکھیں
    اردو میں مکمّل بلاگنگ سیکھے اور آن لائن پیسے کمائیں

    ReplyDelete

  7. Super article, thanks for sharing useful information…

    Telehealth
    Injury Prevention Programs

    ReplyDelete
  8. hello sir, i have an issue with my blogger. when i post some website video by embed code (not youtube video) video thumnail not showing on my blog home page or post thumbnail. showing thumbnail when i click that post. i you solve my issue ?
    thank you.

    ReplyDelete
  9. Well that's what I set out to explore. Naturally, ranking in the featured snippet solves the positioning problem, but is this strategy worth doing? Anyway, what is a featured snippet? And more importantly, what do you have to do to appear there?
    https://ppcexpo.com/blog/what-is-a-featured-snippet

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Informative post. really nice required information & the things I never imagined and I would request,SEO techniques
    Thanks for sharing. I recommended this post to all readers.

    ReplyDelete
  12. thanks for great information

    ReplyDelete
  13. +96893560417 Muscat escort I'm free for outcall in Oman and I can go to your housing or apartment suite so don't remain by unnecessarily long and text me now WhatsApp and call I will answer you immediately. Escort Muscat Can barely wait to see you what about we have some happy occasions together Escort in Muscat +96893560417
    Escort in Oman
    Muscat escort
    Escort Muscat
    Escort in Muscat

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. How do I get the text to go along the side of the thumbnail instead of along the bottom, been trying for a few days, Any input great, great post by the way. thank you

    ReplyDelete
  17. +923214438017 Escort Lahore Hi I'm 20 years single and endeavoring to make just barely enough. Responsive and dynamic. Escorts in Pakistan on the off chance that you are enthusiastic about knowing more get hold of me? I'm down for whatever. I'm lovable and horny. I essentially need some oral hookup day/this evening Call girls in Pakistan +923214438017
    call girls in Lahore
    Escorts Service Lahore
    Escorts in Lahore
    Escorts in Pakistan
    Call girls in Pakistan
    Lahore call girls

    ReplyDelete
  18. Pelanggan yang dihormati,
    Kumpulan pendanaan pakar memberikan pinjaman kepada Individu dan syarikat terutamanya Individu yang mempunyai rancangan perniagaan dan Idea tetapi sukar untuk memulakan kerana rendah atau kekurangan modal permulaan.

    Dapatkan pinjaman jangka pendek dan jangka panjang Instan untuk Memulakan perniagaan anda sendiri dan nikmati faedah menjadi bos anda sendiri.

    Dengan kadar faedah rendah 2%.
    Tempoh 1 hingga 15 tahun. -24 / 7S
    Hubungi kami melalui e-mel: franchisecapitalcorps@gmail.com

    ReplyDelete
  19. Today's disk-based solutions are additionally economical as well as able to take care of records as well as likewise disk management conveniently bare metal data center. B2D treatments endure a complete variety of additionally rewritable as well as removable media, such as DVD-RW, zip, as well as additionally cd-rw.

    ReplyDelete
  20. I was suffering from herpes since January before I met Dr Ajayi who got me cured. Thank god, I'm cured. I had for some time now noticed having difficulty in pain. Never in my wildest dreams did it cross my mind that I may develop a serious herpes disease. Few months ago I purchased herbal remedy from Dr Ajayi, after taking it for 14 days, I was totally reversed. I'm so happy to share this great news to everyone and I want to advise anyone suffering from herpes diseases or any type of diseases he will get you cured. you may need his email for assistance. Email him at ajayiherbalhome@gmail.com you can also call or WhatsApp him +2348154724883. visit his website https://ajayiherbalhome.weebly.com for more information and don't forget to share as you read.

    ReplyDelete
  21. Nice Article! I am so happy after reading your blog. It’s a very useful blog for us. Thanks for sharing your valuable information.
    visit site

    ReplyDelete
  22. Original Laptop Batteries online shopping in less price with free shipping and cash on delivery in all over Pakistan.
    Laptop Batteries in Pakistan
    Mobile batteries in Pakistan
    Laptop Chargers in Pakistan

    ReplyDelete
  23. These young girls are famous for their efforts, and they make sure that their clients are satisfied

    ReplyDelete
  24. Built with creativity and ingenuity, this 8 Marla cottage offers versatility to tailor to your lifestyle.
    Luxury Cottages In Bhurban

    ReplyDelete
  25. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work. Dive into the details with our comprehensive article on the subject: Remove Consumer Complaints Services

    ReplyDelete
  26. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. Our article provides the answers you seek: Remove Negative Videos From YouTube

    ReplyDelete
  27. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work. Unveil the complexities of the subject in our enlightening article: Philip Tauberman

    ReplyDelete
  28. I love the boldness of Reputation Pride's claim that nothing is impossible. It shows that they're not afraid to tackle even the toughest cases of negative online content. Online Reputation Management Services

    ReplyDelete
  29. One aspect of Online Reputation Management that often gets overlooked is employee advocacy. Employees are valuable brand ambassadors, and empowering them to represent the company positively online can greatly enhance its reputation.

    ReplyDelete
  30. In today's digital age, a single negative review or social media post can tarnish a brand's reputation. That's why I highly recommend Online Reputation Management Services. They provide proactive measures to monitor, manage, and improve your online image, ensuring long-term success.

    ReplyDelete