Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Menghilangkan Gambar Pertama Postingan Dengan CSS Dan JavaScript

Bola Hero Gawai

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://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?

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

7 Comments Add Comment

Cara bikin accordion, tabs dong kang

Balas

sangat membantu sekali mas..terimakasih

Balas

Mas Adhy mau tanya, untuk penambahan code CSS
.separator:nth-of-type(1) {
display:none;
visibility:hidden;
}

sukses untuk setiap postingan yang cuman ada 1 gambar dan itu letaknya di atas, pertanyaanya,

1. kalau untuk postingan yang banyak gambar misal screenshot ketika membuat artikel bertema tutorial, kenapa code ini tidak berpengaruh?

2. kalau ditambahkan code Js yang Mas Adhy sarankan, apa akan hilang semua gambar yang berada dibawh juga? padahal saya inginnya tetap ada, karena itu merupakan point penting dalam artikel

mohon penjelasannya ya Mas :D

Balas

1. Mungkin saja gambar pertamanya pakai caption sehingga css ini tidak berfungsi.

2. Javascript ini tidak menghilangkan semua .separator, kode ini (".separator")[0] artinya untuk .separator pertama.

Balas

oh gitu Mas, saya belum coba gabung kode Jsnya Mas Adhy, bagaimana caranya ya?, maklum newbie hehehe.., kode CSS di atas juga saya tambah lewat setting customize - advance - add CSS saja

Balas

Masuk edit HTML dan simpan di atas kode </body>

Balas

Oh udah berhasil Mas Adhy, jazakallah hehe, problemnya ternyata gambar pertama pas pertama kali insert picture di post tersebut sy taro di tengah2, sedangkan yang diletakan di atas tulisan itu saya insert terakhir, jadi yang hilang justru yang gambar yang ditengah2 yang pertama kali di insert Mas, hehe,

terimakasih Mas

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×