display none
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 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

CONTOH1CONTOH2CONTOH3

saya sembunyikan CONTOH2 dengan display:none maka space hilang seperti di bawah ini :

CONTOH1CONTOH2CONTOH3

apabila disembunyikan dengan visibility:hidden maka space tetap ada :

CONTOH1CONTOH2CONTOH3

Baca juga :

Apakah Display:none akan terbaca oleh google?

Ya, google memiliki sistem tertentu walaupun objek disembunyikan dengan display:none atau visibility:hodden objek akan tetap terbaca. display:none atau visibility:hodden hanya memanipuasi browser saja.

Apakah Display:none bagus untuk SEO?

Penggunaan display:none atau visibility:hodden 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:hodden sebagaimana dikatakan Matt Cutts di webnya.

Semoga bermanfaat...

95 komentar

Alhamdulillah dapat ilmu lagi dari mas ismet, joss pokoe. :D

Salam Premium

Balas

Owhh.... yayayaya, begitu toh Kang. bahasanya lebih mudah dipahami dari pada bahasanya Kang Taufik admin DTE.

Balas

roso... :) salam solar aja deh...

Balas

saya kan newbie.. jadi bahasanya untuk newbie juga :)

Balas

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

Balas

Dapat Ilmu Baru Lagi disni,Oke Bangt Kang Ismet The Best

Balas

css nya mantap , pake nasi om ismet :D

Balas

saya kurang faham dengan seo optimizer kang.. tapi mungkin seperti yang diungkapkan Matt Cutt, sangat tidak dianjurkan untuk teks :)

Balas

alhamdulillah tambah ilmu untuk hari ini makasih kang ismet

Balas

dapet ilmu baru tentang html, jempol kang.

Balas

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.

Balas

Belajar kode lagi disini walau sederhana tapi efek dan pengaruhnya selalu ada pada blog :)

Balas

sama2.. semoga bermanfaat

Balas

menurut yang pernah saya baca, lebih baik menyimpan kode tersebut keluar dari browser, contoh kode :
#example {
position:absolute;
top: -9999;
left: -9999;
}

Balas

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

Balas

pasti sob.. CSS itu merubah html

Balas

coba hapus kode ini
body#layout * {
position: relative;
}

Balas

Semakin mengukuhkan CSS saya kang .. terimakasih atas referensinya

Balas

Owh gitu ya .. pantesan aja sambel lada kang .. lagi ngaliwet yeuh kang sok atuh kadieu diantos

Balas

waduh.. ngabibita yeuh... kirim kana email ah :)

Balas

sami2 kang.. percanten lah ka master rully mah :-d

Balas

Dapat ilmu lagi di sini kang..terima kasih

Balas

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

Balas

Tetap saja tidak bisa kang, aduh urang lieur :(

Balas

Owh, bisa sekarang kang :), matur nuhun nyah Kang :D

Balas

heheh.. mun lieur mah muntang we.. selamat atuh lah kalo udah bisa mah :D

Balas

heheh.. yah begitulah kira2 nya :D

Balas

kang req bahas robots.txt, pengen nyoba ngoprek tapi takut salah sebelum dijelaskan sama masternya. :D

Balas

wah akhirnya bisa absen kang!
- salam damai -
biarpun saya di sini lelet -_-
- damai -

Balas

wew makasih udah share kang!
saya udah ketinggalan 2 artikel bermanfaat dari kang ismet!
- salam damai -

Balas

Absen dulu kang!
- salam damai buat kang ismet! -
semoga sehat selalu!

Balas

salam damai kang ismet!
thanks atas artikelnya :)

Balas

Kang, untuk Blockquote sok bisa sok teu bisa di block, ari teu percayamah tengok heula ieu (Maaf ngagunakeun link) http://berilah.blogspot.com/2013/09/macam-tag-kondisional-untuk-modifikasi.html

Balas

hihih main sembunyi2 segala, yang penting jangan menyembunyikan istri kedua aja, ntar ada penampakan piring terbang hihihihi :)

Balas

untuk kode, lebih aman gunakan tag 'pre' jangan blockquote. untuk postingan diatas, bentrok sama 'h3'

Balas

insya Allah sob.. nanti coba2 di share :)

Balas

Bagaimana caranya, untuk menggunakan tag pre pada postingan ?

Balas

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

Balas

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 :(

Balas

itu sih tergantung pada javascript nya mas nandar

Balas

Kang, coba deh liat " Si Pengontrol Internet Seluruh Indonesia "

http://mafiasitez.blogspot.com/2013/10/si-pengontrol-internet-seluruh-indonesia.html

#Maaf kang naro link :)

Balas

iya saya juga tau... tapi saya yg ga tau nya javascriptnya gimana.. :p

Balas

ngga ko mba.. siapa bilang nyembunyiin istri kedua.. wong saya kasih tau istri pertama juga ko wwkwkwkwkk just kidding :D

Balas

saya juga ga tau kaya gimana robot google, kalau bisa pengen beli satu wkwkwkwk :D

Balas

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.

Balas

heheh.. sorry telat bales.. malem udah tidur sob, ngantukkk :)

Balas

keren juga ya.. mantap nih kalau bisa belajar dari dia

Balas

coba kesini http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

Balas

Wah terima kasih banget kang ilmunya... bermanfaat!!

Balas

Luak-lieuk we ah, da lieur arek komen naon.
Nu penting mah hadir :D

Balas

mantap euy, namahan deui yeuh ilmu mang Oding ( koding maksadnamah ) hehhehhehe

Balas

jiga bau hituit tah hidden dan visibility

Balas

Kang ismet!
keren artikelnya baru tahu tentang ini ^_^
saya butuh anda :)
ane sudah update postingan!!!!!!!!!!
- salam damai -

Balas

Kang ismet!
keren artikelnya baru tahu tentang ini ^_^
saya butuh anda :)
ane sudah update postingan!!!!!!!!!!
- salam damai -

Balas

Kang ismet!
keren artikelnya baru tahu tentang ini ^_^
saya butuh anda :)
ane sudah update postingan!!!!!!!!!!
- salam damai -

Balas

owh gitu.. oke deh kang :D makasih ya :)

Balas

Kalau yang beginian belum paham :D

Balas

hohohoho.... bahaya nih... @@,

Balas

oh newbie? saya kira Newcastle kwkwkwkwk... klub sepakbola favorit saya waktu masih ada Michael Owen hehehe :)

Balas

Terima kasih bapak ismet :)

Balas

Bener kang, setuju banget :)

Balas

Nyaho-nyaho meuleukbeuk weh nya. Hahaha

Balas

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

Balas

teu ngartos maksudna kumaha? :D

Balas

maksadna mah kieu kang .. pengen membuat tombol back to down .. kayak blog damar zacky .. pas klik button blog'y jatuh di atas artikel .. coba akang maen ke blog saya mungkin akang bisa faham

Balas

aku paling suka info2 begini... ><
sering dipake tapi kadang ga tau apa guna dan perbedaannya..
share terus bang (y)

Balas

oh eta.. masalah loncatan hash nya kang, sebenernya udah pas loncatannya, cuman ke tutup floating/fixed bar yang ada logo, bisa diakali dgn CSS target, cobi pasang ieu :
#body-wrapper:target {
padding-top:65px;
}

Balas

Masih angger kang ... apa harus gak dibikin fixed headernya ... atau gimana nih kang ..saya suka sama status fixed hehe

Balas

ngobrolna di blog kang rully we nya :)

Balas

Kirain sama persis , ternyata ada juga bedanya ...

Balas

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 saja?

Balas

caranya sih dah benar, cuman saat menambah (add/gatget) kita harus menuju ke edit template dan buang kode ini

<b:include name='quickedit'/>

Balas

border itu muncul mungkin karena ada obeng dan tang nya, hehehe

coba buang saja

<b:include name='quickedit'/>

Balas

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

Balas

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...

Balas

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>

Balas

pantesan ga bisa ternyata ada yg kurang codenya...sekali lagi terima kasih banyak kang, bikin dong kang artikel kaya di atas cara ngilangin widget...

Balas

kang saya mau tanya lagi kalau mau nampilin widget hanya di label gimana caranya?

Balas

trus kang kalau cara menyembunyikan Icon Home di bagian laman blogger bukan di posting nya itu gimana gan ??
mohon info nya
Tq

Balas

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 :)

Balas

pake tag kondisional untuk label

Balas

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>

Balas

terimakasih kang atas bantuannya berhasil...
jujur aja kang saya baru2 mengenal blog dan byk kekeruangan yg belom saya ketahui tentang bloggger.
sekali lagi terima kasih atas bantuannya :)

Balas

Wah bener kang satuju !

Balas

nambah ilmu lagi nih :D terimakasih kang |o|

Balas

Poskan Komentar


×
Chat