Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/16/2016

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/AVvXsEj3T2sUPY3qrb9QKhPi3MVQNddEcN8c97FjaL19_ADgR0BA9nM6ZaxGgwt-84UvHfM0qkGFiMcunFNuQ2YohL-J-xs5KIZlcdVTxNX3HRzW02RdzZ47VHkTToecFjYPL9zClvH99Xcm-lA0/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/AVvXsEj3T2sUPY3qrb9QKhPi3MVQNddEcN8c97FjaL19_ADgR0BA9nM6ZaxGgwt-84UvHfM0qkGFiMcunFNuQ2YohL-J-xs5KIZlcdVTxNX3HRzW02RdzZ47VHkTToecFjYPL9zClvH99Xcm-lA0/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/AVvXsEj3T2sUPY3qrb9QKhPi3MVQNddEcN8c97FjaL19_ADgR0BA9nM6ZaxGgwt-84UvHfM0qkGFiMcunFNuQ2YohL-J-xs5KIZlcdVTxNX3HRzW02RdzZ47VHkTToecFjYPL9zClvH99Xcm-lA0/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/AVvXsEj3T2sUPY3qrb9QKhPi3MVQNddEcN8c97FjaL19_ADgR0BA9nM6ZaxGgwt-84UvHfM0qkGFiMcunFNuQ2YohL-J-xs5KIZlcdVTxNX3HRzW02RdzZ47VHkTToecFjYPL9zClvH99Xcm-lA0/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?