Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Menghilangkan Gambar Pertama Postingan Dengan 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J-3ftKx91KMu2i0hfZI4hcSi8N5g9CbL25_OD4IvlkH6rZgxVg1vPXVusf4BIecD8FWq-X82yavUDpgK1MyEtCTBGZ8H0HRYL9yq02vdGC_L2qkHCJd2dAMbuu64rsNzfCY6OlujnqR4/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/AVvXsEh6J-3ftKx91KMu2i0hfZI4hcSi8N5g9CbL25_OD4IvlkH6rZgxVg1vPXVusf4BIecD8FWq-X82yavUDpgK1MyEtCTBGZ8H0HRYL9yq02vdGC_L2qkHCJd2dAMbuu64rsNzfCY6OlujnqR4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J-3ftKx91KMu2i0hfZI4hcSi8N5g9CbL25_OD4IvlkH6rZgxVg1vPXVusf4BIecD8FWq-X82yavUDpgK1MyEtCTBGZ8H0HRYL9yq02vdGC_L2qkHCJd2dAMbuu64rsNzfCY6OlujnqR4/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/AVvXsEh6J-3ftKx91KMu2i0hfZI4hcSi8N5g9CbL25_OD4IvlkH6rZgxVg1vPXVusf4BIecD8FWq-X82yavUDpgK1MyEtCTBGZ8H0HRYL9yq02vdGC_L2qkHCJd2dAMbuu64rsNzfCY6OlujnqR4/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. CSS-nya seperti di bawah ini.


.separator:nth-of-type(1) {

    display:none;

    visibility:hidden;

}

Selain CSS, ada juga javascript yang dapat menghilangkan gambar pertama postingan Blogger secara otomatis seperti di bawah ini.


<script type='text/javascript'>

//<![CDATA[

var imagefirstRemove = document.querySelectorAll(".separator:nth-of-type(1)")[0];

imagefirstRemove.parentNode.removeChild(imagefirstRemove);

//]]>

</script>

Sekarang tinggal giliran Anda, mau pakai CSS atau JavaScript?

Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Related Post