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 Make a First Image Cover Above the Title of a Blog Article

How to use it!

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

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


<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'/>
      <img class='firstimage' expr:alt='data:post.title' src=''/>

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{
.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'>
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});

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

Related Post