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

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 Softwebtuts.com 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

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

Step 1- Adding CSS in Blogger Theme

First, Go to Blogger.com.
Go to Theme/Template Section.
Now Click on Edit HTML option.
Now Search for the ]]></b:skin>tag.

To find anything in blogger theme section press Ctrl+F buttons and then type your term to find and press enter.

Copy the code provided below and paste it above the ]]></b:skin> tag.


.post img.firstimage {
       width:100%;
       height:auto;
       max-width:100%;
   }
.post-body .separator:nth-child(1) {
       display:none;
   }

Step 2- Adding HTML in Blogger Theme

Open your blogger dashboard.
Select the Theme menu > Edit HTML , then look for the code <h1 class='post-title entry-title' itemprop='name headline'> .
Under the code, look for the <b:else/> code that is adjacent to the <h1 class='post-title entry-title' itemprop='name headline'> code.
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'/>
<b:else/>
<img class='firstimage' expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7HeRpDz9ZrBZRXBd3ENgTEL-7vecrj4nKYwVaj9jJjaKXExd4ZaW2Zds2FcyCZdCbfqbUoySxoK55uOEZjS7MsLnmgTvf2BSnY0mwILn9IgmoPw6M0c-EW5QQ_a2_eKKxSJ5gIhv41Js/s220/WhatsApp+Image+2019-03-08+at+12.22.18.jpeg'/>
</b:if>
</div>
</b:if>

Warning!
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'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>

Save Theme and see the result.

Conclusion

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.