Perbedaan Antara Display None dan Visibility Hidden
CSS - Untuk menyembunyikan objek dengan CSS, ada beberapa alternatif kode yang digunakan, diantaranya display:none dan visibility:hidden. Bahkan ada juga alternatif lainnya, yaitu membuat objek transparan dengan menambahkan kode opacity:0.
Sebelum melangkah pada perbedaan, sebaiknya kita ketahui dulu properti dari keduanya.
Display none dan visibility hidden
Display mempunyai 2 property yaitu :- none (tidak kelihatan)
- block (kelihatan)
- hidden (tidak kelihatan)
- visible (kelihatan)
Inti perintah display:none dan visibility:hidden sebetulnya sama saja yaitu menghilangkan objek dari halaman HTML. Perbedaannya sebenarnya tidak teralu mencolok, hanya pada masalah space saja.
Dengan menggunakan display:none maka space akan hilang, sedangkan dengan visibility:hidden space tetap ada. Sebagai contoh lihat tulisan CONTOH di bawah ini
saya sembunyikan CONTOH2 dengan display:none maka space hilang seperti di bawah ini :
apabila disembunyikan dengan visibility:hidden maka space tetap ada :
Baca juga :
- Perbedaan property dari overflow : hidden, display, scroll dan auto
- Perbedaan target:new dan target:_blank
Apakah display:none akan terbaca oleh google?
Ya, google memiliki sistem tertentu walaupun objek disembunyikan dengan display:none atau visibility:hidden objek akan tetap terbaca. display:none atau visibility:hidden hanya memanipuasi browser saja.
Apakah display:none bagus untuk SEO?
Penggunaan display:none atau visibility:hidden masih menjadi perdebatan, tapi menurut kebanyakan sumber, hal ini tidak akan mengganggu atau bermasalah dalam SEO. Akan tetapi khusus untuk text dianjurkan untuk tidak menggunakan display:none atau visibility:hidden sebagaimana dikatakan Matt Cutts di webnya.
88 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
btw.. tks sob
kode ini sy taruh di atas b:skin yg ke dua
#blog-pager {
display:none;
}
untuk sembunyikan link home ( icon link home ) di laman atau ( page ) aja dan bukan di postingan biasa
tapi sewaktu saya masuin kode di atas kok malah kagak kelihatan di postingn juga yaa ??
mohon bantuannya mas :)
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#blog-pager {display:none;}
</style>
</b:if>
mohon info nya
Tq
kang [email protected] iya kang sy pke template artisteer keren banget soalnya n script akang di atas ternyata berhasil di terapin, ga salah sy milih tempat ternyata akang emang masternya code bgituan hehehe...oh iya kalau lebih dari satu widget gimana kang? apa cuman di beri (,) sperti ini:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML9, HTML8, HTML7{display:none}
#HTML9, HTML8, HTML7.art-block {border:none}
</style>
</b:if>
sebelumnya sy berterimakasih banget kang...
<style type='text/css'>
#HTML9, #HTML8, #HTML7 {display:none}
#HTML9.art-block, #HTML8.art-block, #HTML7.art-block {border:none}
</style>
</b:if>
<b:include name='quickedit'/>
saya letakkan script di bawah ini di atas code <..../head> :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML9{display:none}
</style>
</b:if>
jadi critanya begini saya ingin menampilkan widget hanya di hompage saja saya uda googling sana sini tapi ga ada yg bisa ngilangin border widget saya, kalau saya klik label widgetnya memang hialng tapi bordernya ga ikut hilang nah ini masalahnya, script di atas bisa ngilangin border widget saya, tapi script di atas hanya muncul di label saja tidak di home page, nah gimana caranya supaya script di atas hanya muncul di home page…
coba buang saja
<b:include name='quickedit'/>
kalau kode diatas, itu artinya dihomepage disembunyikan. simpan kode di bawah ]]></b:skin> perhatikan tanda seru (!) pengganti =
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML9{display:none}
#HTML9.art-block {border:none}
</style>
</b:if>
apabila garis belum hilang, sesuaikan kode ini #HTML9.art-block
sering dipake tapi kadang ga tau apa guna dan perbedaannya..
share terus bang (y)
keren artikelnya baru tahu tentang ini ^_^
saya butuh anda :)
ane sudah update postingan!!!!!!!!!!
- salam damai -
Nu penting mah hadir :D
owh iya nih, saya mau nanya cara membuat gambar tetep jernih walau di tambah lebar dan tingginya gimana kang biar ga burem.. soalnya saya pengen postingan dihomepagenya kaya blog kang ismet ukurannya 290x160px. saya sudah coba tutorial dari dte tapi ga bisa bisa kang.. please help me :(
Kayaknya nggak nyambung ya.. :D
body#layout * {
position: relative;
}
#example {
position:absolute;
top: -9999;
left: -9999;
}
thanks atas artikelnya :)
Salam Premium