How to Make a First Image Cover Above the Title of a Blog Article

Hello blogger friend! This time I will discuss First Image Cover on Blogger Post.



Many are looking for tutorials about this so I will share how to make the first image above the post title.

The function of Creating a First Image Above the Title A post is to make the image that your friend upload first will be above the title of the article/post you made. If it's normal where you upload the first picture it must be there.



How to apply it might be a little complicated, because of what? Because each coding structure in your theme must be different, therefore you must be careful about the code that will be added.



How to use it!

login blogger.com> Click Theme> Edit Theme then look for the code below:

<div class='post hentry' expr:id='data:post.id' itemscope='' "....">

Or

<b:includable id='post' var='post'>

After that, you will find the 'post entry' code. Then copy the code below right under the 'post entry' code

<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/AVvXsEgcX1KAdydn1_IiprgMe10F1M_jpQMoneVnfnSc7x7vOFuRuKNhdB2261eQyZOf4LQDIba7mx0Dl-Wktra09mc_9DQwfkxbe2RyCDbpZMjxAJ3neimqL9Co7t2BneEeHNdNS-uPKYGRwlk/s70/picture_not_available.png'/>
    </b:if>
  </div>
</b:if>

Now we go to the CSS code. Place the code below right above the code </ style> so that the first image disappears and measure the image size later.

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

So that all of this runs smoothly add this javascript code just above the code </ body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

That is what I can say about "Making the First Image Above the Title of a Post" hopefully useful. Don't forget to comment below if you experience difficulties

• DEMO 1