Menghilangkan Gambar Pertama Postingan Dengan Css Dan Javascript

Sebenarnya cukup gampang 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 melaksanakan pembatalan gambar pertama yaitu blog yang memodifikasi halaman postingan dengan menampilkan gambar di luar postingan dan biasanya posisi gambarnya di atas postingan menyerupai pada blog ini atau template Kompi Dark.

Semua gambar yang diupload di postingan Blogger akan otomatis menyerupai instruksi di bawah ini

 <div class="separator" style="clear: both; text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKssCdVqH7mY-MWNVspFfrnZXah7VZ-xvD0x9Yi0Vs8d7lk3eVFlHzqZvqOBK_FBAxz8EA_6YR9-tOda-tdlx4nLefoP_57n6k1D-co_hyphenhyphenxW7upm5bm5AEoZOKzfNqpntAtZrjQ-gYyNoq/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/AVvXsEhKssCdVqH7mY-MWNVspFfrnZXah7VZ-xvD0x9Yi0Vs8d7lk3eVFlHzqZvqOBK_FBAxz8EA_6YR9-tOda-tdlx4nLefoP_57n6k1D-co_hyphenhyphenxW7upm5bm5AEoZOKzfNqpntAtZrjQ-gYyNoq/s320/remove-image.png" width="320" /></a></div>

Cara gampang menghilangkan gambar pertama postingan yaitu menyerupai cara yang aku sebutkan di atas dengan menambahkan tag class pada gambar pertama menyerupai di bawah ini yang aku marking.

 <div class="separator gambar-dihilangkan" style="clear: both; text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKssCdVqH7mY-MWNVspFfrnZXah7VZ-xvD0x9Yi0Vs8d7lk3eVFlHzqZvqOBK_FBAxz8EA_6YR9-tOda-tdlx4nLefoP_57n6k1D-co_hyphenhyphenxW7upm5bm5AEoZOKzfNqpntAtZrjQ-gYyNoq/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/AVvXsEhKssCdVqH7mY-MWNVspFfrnZXah7VZ-xvD0x9Yi0Vs8d7lk3eVFlHzqZvqOBK_FBAxz8EA_6YR9-tOda-tdlx4nLefoP_57n6k1D-co_hyphenhyphenxW7upm5bm5AEoZOKzfNqpntAtZrjQ-gYyNoq/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 jikalau postingan yang sudah diterbitkan berjumlah ratusan maka hal ini akan merepotkan juga.

Dan untuk menampilkan gambar pertama di luar atau di atas postingan, sanggup memakai instruksi 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 sanggup 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 menyerupai di bawah ini.

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

Nah semoga menjadi lebih simple lagi, selain CSS di atas semoga gambar yang tidak di simpan di awal postingan sanggup 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?


Sumber https://www.kompiajaib.com/

Share this post