Tag ABBR (Abbreviation) adalah salah satu tag HTML yang biasa digunakan untuk mendefinisikan singkatan dan bisa juga digunakan untuk memberikan keterangan atau informasi panjang yang akan muncul jika mouse digerakkan diatasnya. Tag ABBR sudah support untuk 5 besar browser yang sering digunakan yaitu :
Tag ABBR biasanya ditandai dengan dotted line atau garis bertitik khusus, browser firefox dan Opera otomatis akan tampil. Sedangkan untuk browser Chrome dan Safari agar bisa tampil titik-titik tersebut harus memasukkan sebaris CSS Code pada template blog. Caranya nanti akan saya jelaskan pada postingan ini.
Tag ABBR biasanya ditandai dengan dotted line atau garis bertitik khusus, browser firefox dan Opera otomatis akan tampil. Sedangkan untuk browser Chrome dan Safari agar bisa tampil titik-titik tersebut harus memasukkan sebaris CSS Code pada template blog. Caranya nanti akan saya jelaskan pada postingan ini.
Pada gambar di atas contoh hasil penggunaan ABBR pada postingan yang pernah saya buat. Di sana terlihat tulisan Kampung Banjar ada dotted line, jika kursor digerakkan pada kalimat tersebut maka akan muncul keterangan tentang Kampung Banjar yang sudah saya tulis pada HTML.
Dengan menggunakan Tag ABBR keuntungannya kita bisa tetap fokus pada topik penulisan. Contohnya pada contoh diatas saya menuliskan tentang Kuliner dari daerah Kampung Banjar, saya tidak mau menuliskan panjang lebar penjelasan tentang Kampung Banjar. Tetapi pembaca bisa tahu tentang Kampung Banjar dengan menggerakan kursor pada kata atau kalimat yang ditandai dengan dotted line.
Cara menggunakan Tag ABBR pada blog, bisa digunakan pada blogspot maupun wordpress. Tapi yang saya contohkan di sini untuk blogspot. Tentukan kata atau kalimat yang akan digunakan, lalu masuk ke HTML, lalu tuliskan format ABBR seperti yang saya tuliskan di bawah ini.
Berikut contoh penggunaan ABBR pada HTML bisa dilihat pada gambar di bawah ini :
Agar dotted line-nya bisa terlihat di browser Chrome dan Safari maka harus ditambahkan kode :
abbr {border-bottom: 1px dotted black;}
Lalu masukkan kode tersebut pada bagian CSS pada template HTML blog seperti terlihat di bawah ini.
70 Comments
Baru tahu tentang penggunaan Tag ABBR, thanks ya.
ReplyDeleteTerima kasih Mbak El semoga bermanfaat ya
DeleteWah, tfs yaaa, berguna banget, kereeeen 👍
ReplyDeletesama-sama Mbak Ei
DeleteWah... berguna banget nih ilmunya. Tar aku praktekin ah. Tfs, mbak Lia...
ReplyDeletemari dicoba mbak Nia
Deletecoba ah. ini semacam footnote gitu ya? hm...
ReplyDeleteyuk mbak dicoba :)
DeleteSiip, kapan-kapan dipraktikan si blog WordPress. Makasih mba..
ReplyDeleteIya mbak bisa dijalankan di wordpress
Deletebaru tahuu niihc, nanti private ya Mbak Lid
ReplyDeletekursus privatenya tutup dulu, orangnya lagi mudik heheheh
DeleteMakasih banyak infonya Mbak.. Berguna sekali.. :) *langsung praktek*
ReplyDeleteasyyyik. mbak...ajarin lagi menu2 html lainnya, seru belajar html
ReplyDeleteaku pernah pakai ABBR..., tapi baru tau nih ada tambahan untuk browser yang biasa ada di hp
thanks mbak
thanks sharingnya
ReplyDeletemau langsung praktekin
makin cakep nih postingan pakai tag abbr, boleh rikues tutorial emoticon di postingan? :D
ReplyDeleteilmu baru nih, makasih mbaaa.. :)
ReplyDeleteini buat hyperlink ya? bukannya pake ahref ya?
ReplyDeleteBeda tujuannya Man, ini menampilkan floating informasi, kalau ahref untuk mengarahkan ke suatu link
Deletemain kece saja neh Mbak Lid, TFS utk Tag ABBR.
ReplyDeleteAsli saya baru tahu ttg Tag ABBR ini *ilmu baru*
Kayak ada hover effect ya. Tapi mesti diperkuat lagi kali ya biar jelas ada ABBR Tag nta
ReplyDeleteHooo gitu,... Enak juga jadi text ya mbak...aku suka males yg tiba2 buka link...
ReplyDeleteWaahh keren juga ini ya. Makaaih sharingnya mbak
ReplyDeleteNice info mba liaaa.. I just notice that..
ReplyDeleteNanti aku coba mbak
ReplyDeleteKadang yg bikin panjang itu penjelasan nya
Jadi suka bias
Kalau mau poatingannya bagus harus mau repot ya Mbak Lia. Di mata saya menggunakan link seperti ini ribet hehehe...
ReplyDeleteKelihatannya mudah untuk dipraktekkan.. Semoga ngga menemukan kendala ketika mencobanya nanti... :)
ReplyDeleteHehe, baru tau juga saya. Tapi lumayan ribet juga. Xixixi. Nanti aja deh nyobanya kalo mood nya oke banget.. Thanks infonya mbak lia..
ReplyDeleteyang kayak begini ni yang agak bingung kadang, bahkan bisa dikatakan males bu utak atik.
ReplyDeleteAku ora mudeng blasssss #OtakDodol
ReplyDeleteOoh ada toh yang seperti ini, tag abbr. Baru pertama kali denger sih
ReplyDeletehihi dikasih tutorial penggunaan nya pula, terima kasih banyak kak
emak-emak blogger ternyata juga ahli dalam code-code htmlnya yah...
ReplyDeleteMba Lia,
ReplyDeleteKasi tutorial buat wordpress dong mba
Soalnya website pk wordpress semua
hiks2
wah... caranya sangat bermanfaat.... makasi kaka ^^
ReplyDeleteWaduh, saya baru tahu nih sama tag abbr . Padahal sudah lama ngeblog :D. Thanks banget yah fitrian , jadi nambah ilmu lagi.
ReplyDeletebaru tau aku tentang tag ABBR ni, jadi hasilnya dari tag ini kaya kalo kita ngisi title & alt text di properties gambar di blogspot ya
ReplyDeleteAku masi bingung masalah html mb lid
ReplyDeleteDuuuh... emak gaptek kayak saya, kudu belajar langsung yaa.. Liat gampang masih Lieeuurr!! :) Mbak Lydia memang hebat!
ReplyDeletefungsinya memberi informasi tambahan pada kalimat yang ditandai ya mbak..??
ReplyDeletekeren sekali... :)
Waah... ini menguntungkan pembaca ya, Mbak, jadi lebih efektif dalam membaca keterangan lanjutan, cukup dengan membayangkan kursor. Makasih banyak ya, Mbak :)
ReplyDeleteOh iya ya, dengan begitu tidak perlu lagi menjelaskan apa yang sudah pernah ditulis pada postingan sebelumnya, ya? Pembaca juga kalau mau tau lebih tentang itu, bisa mendapat info yang lebih banyak lagi di postingan yang lainnya. Makasih mbak ilmunya :)
ReplyDeleteHeheheee barutau ada ginian. Praktekin dulu ah :))
ReplyDeleteAduh susah nggak Lia kalo di WP? Mending privat aja deh lebih enak hehe
ReplyDeleteWaaaaaah! Makasih Mbak Liiid! Keren deh! Mau coba ah ntar an.. :D
ReplyDeleteberguna bangeeet.. aku kalo nulis, nulis aja.. ga tau bisa dipake beginian.. makasih mba lid :D
ReplyDeleteWihhh, keren. Top banget nih mbak yang satu ini. Makasih ya buat sharenya.
ReplyDeleteWah... Berguna banget nih. Makasih sharingnya, Mbak...
ReplyDeleteBtw... Sy lahir dan besar dari Kalsel dan baru dengar tentang negeri seribu perahu. Duh ga gaul banget saya sama kampung sendiri :(
sangat bermanfaat, terimakasih mbak Lidya :)
ReplyDeletemasih belom paham juga nih cara pasangnya walaupun udah dijelasin :D
ReplyDeleteIlmunya keren nih, aku baru tau. Makasih mbak Lydia
ReplyDeleteMantappp tips nya
ReplyDeleteMobile friendly gak mbk?
ReplyDeleteAlhamdulillah nambah lagi ilmunya, terima kasih sudah berbagi. Nanti saya cobain deh.
ReplyDeletemsh blm mudeng sih, tp dicoba ntar
ReplyDeleteBaru tau tentang tag abbr, lumayan dapat tambahan ilmu disini. Makasih Mbak Lid, suatu saat akan saya coba :)
ReplyDeleteilmu baru nih kenapa ga pake underline aja mak biar lebih jelas hehe
ReplyDeletekenapa aku binung...hadeuh... bookmark dulu u dipelajari pelan-pelan..
ReplyDeletetfs ya mak :)
Blm ngehh.... tp penasarannn.. tfs mbakk
ReplyDeleteHoaaah seru, Mbak. Aku pengin coba, tapi kayaknya kok ribet ya. Udah pening duluan lihat halaman HTML yg seabrek2 ituh :D Tapi masih penasaran. Tengs, Mbak Lid. Ntar aku coba, deh. :))
ReplyDeleteBaru tau ada yg namanya abbr. ilmu baru harus segera dipraktekin nih...
ReplyDeleteterimakasih ilmunya mak
ReplyDeletebaru tau juga caranya mbak...terima kasih banyak share ilmunya...
ReplyDeleteMakasih infonya, Lid. Bermanfaat banget. Aku bookmark. :)
ReplyDeleteilmu baru,, makasih mak lidya ,, ^_^
ReplyDeletepengen coba ah.. makasih yaa
ReplyDeleteSangat bermanfaat ini mbak, saya baru tahu kalo ada tag abbr. makasih mbakkk...
ReplyDeleteMbak lidya nih sebenernya pengetahuan kodingnya keren, coba ntar sharing2 lagi mbak soal kode2an gitu, saya nih baru tau lho, thanks atas infonya ya
ReplyDeletewah mksh ilmunya, sangat bermanfaat. sy bs belajar dr blog ini
ReplyDeleteTerima kasih atas tutornya. Bermanfaat banget.
ReplyDeletekelinci
Wah ilmu baru nih,,baru tau ada tab model kayak gitu,,sangat bermanfaat,,
ReplyDeleteTerima kasih sudah berkunjung dan berkomentar. Mohon maaf semua komentar di moderasi ya