Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Sebenarnya cukup mudah untuk menghilangkan gambar pertama postingan, tinggal menambahkan tag class khusus untuk gambar pertama dan ditambah style display:none untuk tag class tersebut maka gambar pertama tidak akan muncul di postingan.

Lalu untuk apa sih gambar pertama dihilangkan?

Biasanya yang melakukan penghapusan gambar pertama adalah blog yang memodifikasi halaman postingan dengan menampilkan gambar di luar postingan dan biasanya posisi gambarnya di atas postingan seperti pada blog ini atau template Kompi Dark.

Semua gambar yang diupload di postingan Blogger akan otomatis seperti kode di bawah ini


<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-KgVDeZrxBzg/Vzm2KW48TMI/AAAAAAAAmgc/q9fkmlO3O2cKCGYKO0m742kiMneDBAK_ACLcB/s1600/remove-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://1.bp.blogspot.com/-KgVDeZrxBzg/Vzm2KW48TMI/AAAAAAAAmgc/q9fkmlO3O2cKCGYKO0m742kiMneDBAK_ACLcB/s320/remove-image.png" width="320" /></a></div>


Cara mudah menghilangkan gambar pertama postingan yaitu seperti cara yang saya sebutkan di atas dengan menambahkan tag class pada gambar pertama seperti di bawah ini yang saya marking.


<div class="separator gambar-dihilangkan" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-KgVDeZrxBzg/Vzm2KW48TMI/AAAAAAAAmgc/q9fkmlO3O2cKCGYKO0m742kiMneDBAK_ACLcB/s1600/remove-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://1.bp.blogspot.com/-KgVDeZrxBzg/Vzm2KW48TMI/AAAAAAAAmgc/q9fkmlO3O2cKCGYKO0m742kiMneDBAK_ACLcB/s320/remove-image.png" width="320" /></a></div>


Kemudian dengan style CSS di bawah ini gambar pertama postingan akan menghilang.


.gambar-dihilangkan {
     display:none;visibility:hidden;
}


Namun tentunya hal ini akan menambah pekerjaan untuk mengedit postingan yang sudah diterbitkan. Jika hanya satu dua postingan tentunya hal ini tidak meropotkan, tapi jika postingan yang sudah diterbitkan berjumlah ratusan maka hal ini akan merepotkan juga.

Dan untuk menampilkan gambar pertama di luar atau di atas postingan, bisa menggunakan kode di bawah ini:


<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>


Dan ada CSS style yang dapat menghilangkan gambar pertama postingan blogger secara otomatis, sehingga hal ini sangat membantu. Semua gambar pertama di postingan akan menghilang sehingga tidak perlu mengedit postingan yang sudah diterbitkan. Namun dengan syarat gambar HARUS disimpan di paling atas postingan. CSS-nya seperti di bawah ini.


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


Nah agar menjadi lebih simple lagi, selain CSS di atas agar gambar yang tidak di simpan di awal postingan dapat dihilangkan juga, tambahkan juga javascript di bawah ini.


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


Sekarang tinggal giliran Anda, mau pakai CSS saja atau digabung sama JavaScript?

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments