Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
CSS

Perbedaan Antara Display None dan Visibility Hidden

Perbedaan mendasar 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)
Begitupun visibility mempunyai 2 property yaitu :
  • 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 :

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.

Semoga bermanfaat...
#CSS

88 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Alhamdulillah dapat ilmu lagi dari mas ismet, joss pokoe. :D

    Salam Premium
    1. roso... :) salam solar aja deh...
  2. Owhh.... yayayaya, begitu toh Kang. bahasanya lebih mudah dipahami dari pada bahasanya Kang Taufik admin DTE.
    1. saya kan newbie.. jadi bahasanya untuk newbie juga :)
  3. kelimax!!
    1. salam damai kang ismet!
      thanks atas artikelnya :)
  4. 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
    1. saya kurang faham dengan seo optimizer kang.. tapi mungkin seperti yang diungkapkan Matt Cutt, sangat tidak dianjurkan untuk teks :)
  5. Dapat Ilmu Baru Lagi disni,Oke Bangt Kang Ismet The Best
    1. semoga bermanfaat sob..
  6. css nya mantap , pake nasi om ismet :D
    1. sambelan saalit :D
  7. alhamdulillah tambah ilmu untuk hari ini makasih kang ismet
    1. sama2.. semoga bermanfaat
  8. dapet ilmu baru tentang html, jempol kang.
    1. tengkyu sob :)
  9. 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.
    1. menurut yang pernah saya baca, lebih baik menyimpan kode tersebut keluar dari browser, contoh kode :
      #example {
      position:absolute;
      top: -9999;
      left: -9999;
      }
  10. Belajar kode lagi disini walau sederhana tapi efek dan pengaruhnya selalu ada pada blog :)
    1. pasti sob.. CSS itu merubah html
  11. 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
    1. coba hapus kode ini
      body#layout * {
      position: relative;
      }
  12. Semakin mengukuhkan CSS saya kang .. terimakasih atas referensinya
    1. sami2 kang.. percanten lah ka master rully mah :-d
  13. Dapat ilmu lagi di sini kang..terima kasih
    1. sama2 sob..
  14. 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
    1. heheh.. yah begitulah kira2 nya :D
  15. hihih main sembunyi2 segala, yang penting jangan menyembunyikan istri kedua aja, ntar ada penampakan piring terbang hihihihi :)
    1. ngga ko mba.. siapa bilang nyembunyiin istri kedua.. wong saya kasih tau istri pertama juga ko wwkwkwkwkk just kidding :D
  16. 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
    1. saya juga ga tau kaya gimana robot google, kalau bisa pengen beli satu wkwkwkwk :D
  17. 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 :(
    1. itu sih tergantung pada javascript nya mas nandar
    2. 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.
  18. begadang yuk
    1. heheh.. sorry telat bales.. malem udah tidur sob, ngantukkk :)
  19. Wah terima kasih banget kang ilmunya... bermanfaat!!
  20. Luak-lieuk we ah, da lieur arek komen naon.
    Nu penting mah hadir :D
  21. mantap euy, namahan deui yeuh ilmu mang Oding ( koding maksadnamah ) hehhehhehe
  22. jiga bau hituit tah hidden dan visibility
    1. Nyaho-nyaho meuleukbeuk weh nya. Hahaha
  23. Kang ismet!
    keren artikelnya baru tahu tentang ini ^_^
    saya butuh anda :)
    ane sudah update postingan!!!!!!!!!!
    - salam damai -
  24. Kalau yang beginian belum paham :D
  25. Terima kasih bapak ismet :)
  26. 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
    1. teu ngartos maksudna kumaha? :D
  27. aku paling suka info2 begini... ><
    sering dipake tapi kadang ga tau apa guna dan perbedaannya..
    share terus bang (y)
  28. Masih angger kang ... apa harus gak dibikin fixed headernya ... atau gimana nih kang ..saya suka sama status fixed hehe
    1. ngobrolna di blog kang rully we nya :)
  29. Kirain sama persis , ternyata ada juga bedanya ...
  30. Keren ~
  31. 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…
    1. border itu muncul mungkin karena ada obeng dan tang nya, hehehe

      coba buang saja

      <b:include name='quickedit'/>
    2. 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
  32. caranya sih dah benar, cuman saat menambah (add/gatget) kita harus menuju ke edit template dan buang kode ini

    <b:include name='quickedit'/>
  33. 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...
    1. 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>
  34. kang saya mau tanya lagi kalau mau nampilin widget hanya di label gimana caranya?
    1. pake tag kondisional untuk label
  35. trus kang kalau cara menyembunyikan Icon Home di bagian laman blogger bukan di posting nya itu gimana gan ??
    mohon info nya
    Tq
  36. 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 :)
    1. 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 == &quot;static_page&quot;'>
      <style>
      #blog-pager {display:none;}
      </style>
      </b:if>
  37. 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...
    1. hehe kadang kita kurang jeli, fungsinya hamir sama tapi beda
      btw.. tks sob
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.