How To Show Image First in Blogger Post or First Image on a Blog Article

The For You

Hello Everyone, Today in this post I will show you How To Show Image First in Blogger Post or First Image on a Blog Article. The first image or the first image is an image above the article that starts an article. With this first image, I think it makes our articles more interesting and makes visitors more excited to read articles, because they have seen interesting pictures before reading the article. 

Many bloggers install the first image on their blogs and one of them is the blog itself, surely when visiting a blog or website, you have seen the first image. To make this first image is quite easy if you read my tutorial carefully and if you are confused you can contact me or comment. Here's the tutorial!

How to Make a First Image on a Blog

Before starting this tutorial, make sure you have to back up your blogger template first.

Step 1- Adding CSS in Blogger Theme

  1. First, Go to
  2. Go to Theme/Template Section.
  3. Now Click on Edit HTML option.
  4. Now Search for the ]]></b:skin>tag.
  5. To find anything in blogger theme section press Ctrl+F buttons and then type your term to find and press enter.
  6. Copy the code provided below and paste it above the ]]></b:skin> tag.

.post img.firstimage {
.post-body .separator:nth-child(1) {

Step 2- Adding HTML in Blogger Theme

  1. Open your blogger dashboard. 
  2. Select the Theme menu > Edit HTML , then look for the code <h1 class='post-title entry-title' itemprop='name headline'> . 
  3. Under the code, look for the  <b:else/> code that is adjacent to the <h1 class='post-title entry-title' itemprop='name headline'> code. 
  4. Then paste the code below, just below the <b:else/> code   earlier.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='coverImage'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<img class='firstimage' expr:alt='data:post.title' src=''/>

Replace the Marked url in the script above with your image url. You may need to experiment a little to edit the above code to suit your tastes. Happy experimenting Yes!

Step 3- Adding JS in Blogger Theme

So that the image in your article does not duplicate or appear twice, paste the code below, just above the </body> code .

<script type='text/javascript'>
$(function() {
      $(".post-body > img:first").remove();

Save Theme and see the result.


I hope you liked this post a lot. This is a best tutorial on How To Show Image First in Blogger Post or First Image on a Blog Article. if you have face any error and problem you can ask in the comment section without any hesitate. Thanks For Reading This Post.

The For You
Theforyou you can Trust on us for any information provided by our trusted team and we also help others to earn money online and yes we donate 30% of our profit to charity. Love & Support
Comment Poster
Learn more about App, Game and website visit - Self Made Corporation
Comment Poster