How to Make a First Image Cover Above the Title of a Blog Article - Onet4u Tech
News Update
Loading...

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

How to Make a First Image Cover Above the Title of a Blog Article
BY Dottycat
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 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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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


DONATION Help make a Donation if the article is useful. Donations will be used to extend O4U www.onet4u.com Domain. Thank you.
Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notification
Do You Want Buy This Template? Contact onet4u.com@gmail.com
Done