Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Add Default Image in Blogger For Posts Without Image

How to Add Default Image in Blogger For Posts Without Image

By now you should know as a blogger how important it is to include images in your blog posts. It doesn’t matter the niche in which your blog belong to, it is important you include an image to every of your post so as to add a little spice and flavor to it. But if you are fond of neglecting images when composing and publishing posts, then you can simply add a default image which will always be displayed when ever you forget or decide not to add an image to the posts.

Note: For the default image to work , you need to have enabled the Read More or Continue Reading feature on your blog so that when visitors visit your blog’s homepage, what they will be seeing will be your blog’s posts summary instead of the full posts. For them to be able to see the full post, they will have to click on the Read More or Continue Reading link. If you haven’t added this feature to your Blogger blog yet and want to learn how to do so, then check out the tutorial on How to Add a Read More or Continue Reading Feature in Blogger Blog.

Once the Read More or Continue Reading feature have been enabled in your blog, then you can then proceed to add a default image for posts without image by following the guide below;

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for the below code using Ctrl + F.
<data:post.body/>
  • You will see more than one <data:post.body/> when you search for it. Basically there are three <data:post.body/> in every Blogger template. To add a default image for posts without image to your Blogger blog, you will need to replace the second or the third <data:post.body/> with the below code snippet, depending on the one that works for you.
<b:if cond='data:blog.pageType == &quot;index&quot;'>

    <b:if cond='data:post.firstImageUrl'>

        <img class='thumb' expr:src='data:post.firstImageUrl' />

        <b:else/>

        <img class='thumb' src='IMAGE_URL' />

    </b:if>

    <data:post.snippet/> <a class='jumplink' expr:href='data:post.url'>Read More</a>

    <b:else/>

    <data:post.body/>

</b:if>

Changes to Make:

  • Replace IMAGE_URL with the URL of the image you want to use as your default image.
  • Optionally, you can change the write up Read More to whatever you want your visitors to see when ever they visit your blog (e.g. Continue Reading).

Once that is done, the empty spaces that will be left in your post’s summary image section will be replaced by the default image you have set.

  • Finally click on Save Template and you are done.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments