How To Remove First Image on Blog Post

How To Remove First Image on Blog Post. It Is actually quite easy to remove the first image on your posts. We just apply a special class tag for the first image and style display: none for the class tag. It will make the first image will not appear in the post .Then Why we should remove first image? Sometime, some Bloggers want to eliminate the first image to get best view in Homepage Blog. They removed image in order to it just display on Homepage, then when visitors click the article, they didn't get image that is shown in Homepage. It just a trick and It just a simple way to get unique post.

I want to show all the images were uploaded in Blogger posts will usually like the code below. If you want to remove it, can try two ways below.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFQyOLTIva9e1o9kV6hQe4bADxPpLuRM9_ZXRMKILLBZWPylbowCPJoZWbSxz6Cf-LebQSgZ3olKn7kp0wbZr2I-AvjbjdpXJ1hqD2KABERpRPdc1PRUGIVsIsoVWeY0RqW9ZLqj5cVU-/s1600/Remove_Image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFQyOLTIva9e1o9kV6hQe4bADxPpLuRM9_ZXRMKILLBZWPylbowCPJoZWbSxz6Cf-LebQSgZ3olKn7kp0wbZr2I-AvjbjdpXJ1hqD2KABERpRPdc1PRUGIVsIsoVWeY0RqW9ZLqj5cVU-/s320/Remove_Image.png" width="320" /></a></div>

Firts, this is an easy way (manually) to remove your first image on posts. You just add a special tag on your post image like below (see tag that I marking).

<div class="separator image-removed" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFQyOLTIva9e1o9kV6hQe4bADxPpLuRM9_ZXRMKILLBZWPylbowCPJoZWbSxz6Cf-LebQSgZ3olKn7kp0wbZr2I-AvjbjdpXJ1hqD2KABERpRPdc1PRUGIVsIsoVWeY0RqW9ZLqj5cVU-/s1600/Remove_Image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSGAqzedv6HRtW_8yXkjYfv5Cbmg0AkxGAH1U7IqWkBzZM7LS5b6S3JOQal8fBbUEgP9S8WSal8KLVOvpVBt2zKi0dRAtCnHbn4oTF5fKVBrAQq7Ter-1XqQ68NYXXdZqzFEDRBk9sj46/s320/remove-image.png" width="320" /></a></div>

To complete it, you have to add CSS below above ]]></b:skin> or </style>.

.image-remove {
     display:none;visibility:hidden;
}

Second, the way above will add jobs to edit posts that have been published. Now, I will give a solution for you who want to remove first image. It will automatically remove by adding CSS or Javascript. You can choose one of them adding CSS or Javascript, both of them really work. 

<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='620'/>
</b:if>

By adding CSS below above ]]></b:skin> or </style>.

.separator:nth-of-type(1) {
    display:none;
    visibility:hidden;
}

Or you can choose by adding Javascript above </head>.

<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".separator")[0].style.display= "none";
//]]>
</script>

It depends on you, you can apply the first way or second way. In here I just recommended, if you have been published many articles and want to remove first image please try the second way. It will solve your problem without editing every post.

Advertisement