How to Add Default Image in Blogger For Posts Without Image

0
21
no 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.