How to Show a Custom Thumbnail for Posts with No Image - Blogger

Emporio Theme

In the Emporio theme, articles that do not have images do not display images in the home page view and the titles appear oddly misplaced.

In this article I will teach you how to display custom thumbnail images in the home page view even for articles that do not have images.

Go to your blogger.com dashboard -> Theme tab -> Edit HTML -> in the edit window press ctrl + f then copy paste .feed-view .not-hero.post-wrapper.no-image .post-title-container{ and hit Enter key.

Then delete all the following lines.

  
.feed-view .not-hero.post-wrapper.no-image .post-title-container{
position:relative;
top:-90px
}

After you delete the entire css of ".feed-view .not-hero.post-wrapper.no-image .post-title-container", at the same place where you just deleted write the following css.

  
.feed-view .no-image{background-image:url("https://your.desired.image.url")}

Now your desired custom image appears on the articles with no featured image in home page view. If you want the background size to be resposive then add the following css instead.

  
@media (max-width: 285px) .feed-view .no-image{background-image:url("https://your.desired.smallest-size.image.url")}
@media (max-width: 385px) and (min-width: 286px) {.feed-view .no-image{background-image:url("https://your.desired.smaller-size.image.url")}}
@media (max-width: 485px) and (min-width: 386px) {.feed-view .no-image{background-image:url("https://your.desired.small-size.image.url")}}
@media (max-width: 745px) and (min-width: 486px) {.feed-view .no-image{background-image:url("https://your.desired.normal-size.image.url")}}

This will display the desired background image on the thumbnail element with the "no-image" class. Different sized background images can be displayed for each resolution. This is to ensure that the image is displayed clearly and at the appropriate size.

Now you are done ! see how easy it it ? You don't need to spend long time editing.

Contempo Theme

Go to HTML Template editor editor and search

, then you find several same codes in the template. the last one should be the one but depending on your layout. if you find it diffucult to designiate whcih one then look for the one in the Gadget Blog1 section.

rewrite the code as following

add the the yellow lined codes. replaces "your desired photo url here" with your desired photo url. and that's it.

Notable Light

Soho

Max width is 576, so max size @ 2x is 1152.

How to Show a Custom Thumbnail for Posts with No Image - Blogger

Emporio Theme

Contempo Theme

Notable Light

Soho

Essential

About Me：Making Blogger Better for SEO

Comments