Setup default thumbnail in Blogger. Show preview in post even without image (guide with code)
We all want our blog to look professional. But often we don't include any images in our posts. The result? No preview image appears on the homepage or category page. Now we will solve this by using a small piece of code.
Let's take a look at how to do this:
at first find the html code 👇
<b:includable id='JetArchive' var='post'>
Now delete the following code.👇
<b:if cond='data:post.featuredImage'>
<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>
<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ? "object-cover lazyload" : "lazyload"' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>
</div>
</b:if>
Now copy the code below 👇. Replace this code in the deleted part.
<b:if cond='data:post.featuredImage'>
<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>
<img expr:alt='data:post.title'
class='lazyload'
expr:data-src='data:post.featuredImage'
loading='lazy'
src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a class='jt-bg-light d-block ratio ratio-16x9' expr:href='data:post.url.canonical' rel='bookmark'>
<img expr:alt='data:post.title'
class='lazyload'
data-src='https://cdn.jsdelivr.net/gh/TheRealAnwarul/Photos@main/Default-thumbnail.png'
loading='lazy'
src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>
</div>
</b:if>
Enter the link to your default thumbnail in the yellow space. Then save your Blogger template.
Only Work JetTheme