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.
Alhamdulillah dapat ilmu lagi dari mas ismet, joss pokoe. :D
Salam Premium
roso... :) salam solar aja deh...
Owhh.... yayayaya, begitu toh Kang. bahasanya lebih mudah dipahami dari pada bahasanya Kang Taufik admin DTE.
saya kan newbie.. jadi bahasanya untuk newbie juga :)
kelimax!!
salam damai kang ismet!
thanks atas artikelnya :)
Kang saya pernah menggunakan display:none untuk menghilangkan blog pager (hanya bagian home saja) yang di bawah, tapi ketika dicoba di cek di seo optimizer malah html blog jadi tidak terbaca alias pembacaan seo optimizer terhadap blog jadi error. Kemudian saya ganti dengan visibility:hidden jadi normal lagi. Kemudian penasaran saya coba lagi ganti dengan display:none hasilnya error lagi. Entahlah apakah memang demikian atau seo optimizernya yang error... :D
saya kurang faham dengan seo optimizer kang.. tapi mungkin seperti yang diungkapkan Matt Cutt, sangat tidak dianjurkan untuk teks :)
Dapat Ilmu Baru Lagi disni,Oke Bangt Kang Ismet The Best
semoga bermanfaat sob..
css nya mantap , pake nasi om ismet :D
sambelan saalit :D
dapet ilmu baru tentang html, jempol kang.
tengkyu sob :)
Seperti Akang katakan diatas tidak dianjurkan menggunakan display:none atau visibility:hidden untuk menyembunyikan Teks, jadi adakah jalan lain untuk menyembuyikan teks Kang soalnya sy menggunakan keduanya untuk menyembunyikan teks.
menurut yang pernah saya baca, lebih baik menyimpan kode tersebut keluar dari browser, contoh kode :
#example {
position:absolute;
top: -9999;
left: -9999;
}
Belajar kode lagi disini walau sederhana tapi efek dan pengaruhnya selalu ada pada blog :)
pasti sob.. CSS itu merubah html
Kang, maaf sebelumnya, saya bertanya diluar topik pembahasan artikel ini, saya hanya mau bertanya, mengapa di template saya, pada blockquote tidak bisa di block ?, Misalkan http://berilah.blogspot.com/2013/09/cara-membuat-emoticon-di-postingan-blog.html
coba hapus kode ini
body#layout * {
position: relative;
}
Semakin mengukuhkan CSS saya kang .. terimakasih atas referensinya
sami2 kang.. percanten lah ka master rully mah :-d
Dapat ilmu lagi di sini kang..terima kasih
sama2 sob..
jadi seperti itu ya fungsi dan cara kerjanya. Pantesan dulu bingung pengen buat komentar admin berbeda gagal mulu. Hasilnya kayak penggunaan komentar admin pada komentar blog ini ya. :D
heheh.. yah begitulah kira2 nya :D
hihih main sembunyi2 segala, yang penting jangan menyembunyikan istri kedua aja, ntar ada penampakan piring terbang hihihihi :)
ngga ko mba.. siapa bilang nyembunyiin istri kedua.. wong saya kasih tau istri pertama juga ko wwkwkwkwkk just kidding :D
Kalau menurut saya, robot google kan cuman bisa baca kode2 yang sudah diterapkan pada blog jadi penggunaan display none dan visibility hidden akan tetap terbaca. Mungkin itu salah satu alasan Bang Matt Cute untuk tidak menganjurkan penerapan kode tsb. Maybe no may yes.. :)
Kayaknya nggak nyambung ya.. :D
saya juga ga tau kaya gimana robot google, kalau bisa pengen beli satu wkwkwkwk :D
baru tau kang :D thanks banget..
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 :(
itu sih tergantung pada javascript nya mas nandar
saya pribadi tidak menggunakan JS untuk menampilkan thumbnail dan snippet. kalau menampilkan thumbnail dan snippet dengan JS, otomatis merubahnya pun harus dengan JS. Tapi kalau tanpa JS biasanya thumbnail ditampilkan dengan kode expr:src='data:post.thumbnailUrl' kode diatas akan memunculkan thumbnail 72x72px. saya tidak menggunakan kode ini, tapi saya memanggil gambar pertama pada postingan expr:src='data:post.firstImageUrl' selanjutnya membuat thumbnail di PhotoShop sesuai ukuran, seperti 290x160.
begadang yuk
heheh.. sorry telat bales.. malem udah tidur sob, ngantukkk :)
Luak-lieuk we ah, da lieur arek komen naon.
Nu penting mah hadir :D
mantap euy, namahan deui yeuh ilmu mang Oding ( koding maksadnamah ) hehhehhehe
jiga bau hituit tah hidden dan visibility
Nyaho-nyaho meuleukbeuk weh nya. Hahaha
Kang ismet!
keren artikelnya baru tahu tentang ini ^_^
saya butuh anda :)
ane sudah update postingan!!!!!!!!!!
- salam damai -
Selamat idul adha kang ... saya minta maaf kalau banyak kata dan tingkah yg salah selama ini .... btw kang saya minta bantuan untuk finishing design ttg link back to down ..yg jatuh dibawahnya tepat diatas #content-wrapper ..saya sudah coba pake tapi selalu gak pas dgn yang saya inginkan /selalu jatuh pas gambar postingan . mungkin akng pnya tips .. minimal pengen diatas judul postingan homepage ..nuhun kang
teu ngartos maksudna kumaha? :D
Masih angger kang ... apa harus gak dibikin fixed headernya ... atau gimana nih kang ..saya suka sama status fixed hehe
ngobrolna di blog kang rully we nya :)
kang ismet please tolong bantu saya...saya mau menampilkan widget hanya di home page saja tapi script yg saya pake ini widgetnya ga tampil di homepage malah tampil hanya di label saja..sebenernya ada juga cara lain tapi script yg ini bisa ngilangin border widgetnya makanya saya pengen pake script ini tapi ga tau cara ngeditnya....ini contoh scriptnya:
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…
border itu muncul mungkin karena ada obeng dan tang nya, hehehe
coba buang saja
<b:include name='quickedit'/>
saya masih bingung liat struktur templatenya..pake artisteer ya bikinnya :)
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
Leony Li@ code itu cuman ngilangin gambar tang n obeng bukan ngilangin border widgetnya.
kang ismet@ 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...
hash sama classnya tetep dipake <b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML9, #HTML8, #HTML7 {display:none}
#HTML9.art-block, #HTML8.art-block, #HTML7.art-block {border:none}
</style>
</b:if>
kang saya mau tanya lagi kalau mau nampilin widget hanya di label gimana caranya?
pake tag kondisional untuk label
maaf ni kang byak nanyak...
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 :)
kalau seperti itu, jelas pada halaman utama, postingan dan halaman statis pasti hilang. hapus kode diatas, gunakan 'tag kondisional'. simpan di bawah ]]></b:skin>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#blog-pager {display:none;}
</style>
</b:if>
Wah, nambah ilmu ni kang, baru tahu visibility:hidden ternyata fungsinya seperti itu, saya sendiri sering menggunakan display:none kalau lagi edit template.. he..he... sukses selalu kang, semangat ngeblognya...
hehe kadang kita kurang jeli, fungsinya hamir sama tapi beda
btw.. tks sob