Cara Menggunakan Tag ABBR

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.



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.


Post a Comment

70 Comments

  1. Baru tahu tentang penggunaan Tag ABBR, thanks ya.

    ReplyDelete
  2. Wah, tfs yaaa, berguna banget, kereeeen 👍

    ReplyDelete
  3. Wah... berguna banget nih ilmunya. Tar aku praktekin ah. Tfs, mbak Lia...

    ReplyDelete
  4. coba ah. ini semacam footnote gitu ya? hm...

    ReplyDelete
  5. Siip, kapan-kapan dipraktikan si blog WordPress. Makasih mba..

    ReplyDelete
  6. baru tahuu niihc, nanti private ya Mbak Lid

    ReplyDelete
    Replies
    1. kursus privatenya tutup dulu, orangnya lagi mudik heheheh

      Delete
  7. Makasih banyak infonya Mbak.. Berguna sekali.. :) *langsung praktek*

    ReplyDelete
  8. asyyyik. mbak...ajarin lagi menu2 html lainnya, seru belajar html
    aku pernah pakai ABBR..., tapi baru tau nih ada tambahan untuk browser yang biasa ada di hp
    thanks mbak

    ReplyDelete
  9. thanks sharingnya
    mau langsung praktekin

    ReplyDelete
  10. makin cakep nih postingan pakai tag abbr, boleh rikues tutorial emoticon di postingan? :D

    ReplyDelete
  11. ini buat hyperlink ya? bukannya pake ahref ya?

    ReplyDelete
    Replies
    1. Beda tujuannya Man, ini menampilkan floating informasi, kalau ahref untuk mengarahkan ke suatu link

      Delete
  12. main kece saja neh Mbak Lid, TFS utk Tag ABBR.
    Asli saya baru tahu ttg Tag ABBR ini *ilmu baru*

    ReplyDelete
  13. Kayak ada hover effect ya. Tapi mesti diperkuat lagi kali ya biar jelas ada ABBR Tag nta

    ReplyDelete
  14. Hooo gitu,... Enak juga jadi text ya mbak...aku suka males yg tiba2 buka link...

    ReplyDelete
  15. Waahh keren juga ini ya. Makaaih sharingnya mbak

    ReplyDelete
  16. Nice info mba liaaa.. I just notice that..

    ReplyDelete
  17. Nanti aku coba mbak
    Kadang yg bikin panjang itu penjelasan nya
    Jadi suka bias

    ReplyDelete
  18. Kalau mau poatingannya bagus harus mau repot ya Mbak Lia. Di mata saya menggunakan link seperti ini ribet hehehe...

    ReplyDelete
  19. Kelihatannya mudah untuk dipraktekkan.. Semoga ngga menemukan kendala ketika mencobanya nanti... :)

    ReplyDelete
  20. Hehe, baru tau juga saya. Tapi lumayan ribet juga. Xixixi. Nanti aja deh nyobanya kalo mood nya oke banget.. Thanks infonya mbak lia..

    ReplyDelete
  21. yang kayak begini ni yang agak bingung kadang, bahkan bisa dikatakan males bu utak atik.

    ReplyDelete
  22. Aku ora mudeng blasssss #OtakDodol

    ReplyDelete
  23. Ooh ada toh yang seperti ini, tag abbr. Baru pertama kali denger sih
    hihi dikasih tutorial penggunaan nya pula, terima kasih banyak kak

    ReplyDelete
  24. emak-emak blogger ternyata juga ahli dalam code-code htmlnya yah...

    ReplyDelete
  25. Mba Lia,
    Kasi tutorial buat wordpress dong mba
    Soalnya website pk wordpress semua
    hiks2

    ReplyDelete
  26. wah... caranya sangat bermanfaat.... makasi kaka ^^

    ReplyDelete
  27. Waduh, saya baru tahu nih sama tag abbr . Padahal sudah lama ngeblog :D. Thanks banget yah fitrian , jadi nambah ilmu lagi.

    ReplyDelete
  28. baru tau aku tentang tag ABBR ni, jadi hasilnya dari tag ini kaya kalo kita ngisi title & alt text di properties gambar di blogspot ya

    ReplyDelete
  29. Aku masi bingung masalah html mb lid

    ReplyDelete
  30. Duuuh... emak gaptek kayak saya, kudu belajar langsung yaa.. Liat gampang masih Lieeuurr!! :) Mbak Lydia memang hebat!

    ReplyDelete
  31. fungsinya memberi informasi tambahan pada kalimat yang ditandai ya mbak..??
    keren sekali... :)

    ReplyDelete
  32. Waah... ini menguntungkan pembaca ya, Mbak, jadi lebih efektif dalam membaca keterangan lanjutan, cukup dengan membayangkan kursor. Makasih banyak ya, Mbak :)

    ReplyDelete
  33. Oh 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 :)

    ReplyDelete
  34. Heheheee barutau ada ginian. Praktekin dulu ah :))

    ReplyDelete
  35. Aduh susah nggak Lia kalo di WP? Mending privat aja deh lebih enak hehe

    ReplyDelete
  36. Waaaaaah! Makasih Mbak Liiid! Keren deh! Mau coba ah ntar an.. :D

    ReplyDelete
  37. berguna bangeeet.. aku kalo nulis, nulis aja.. ga tau bisa dipake beginian.. makasih mba lid :D

    ReplyDelete
  38. Wihhh, keren. Top banget nih mbak yang satu ini. Makasih ya buat sharenya.

    ReplyDelete
  39. Wah... Berguna banget nih. Makasih sharingnya, Mbak...
    Btw... Sy lahir dan besar dari Kalsel dan baru dengar tentang negeri seribu perahu. Duh ga gaul banget saya sama kampung sendiri :(

    ReplyDelete
  40. sangat bermanfaat, terimakasih mbak Lidya :)

    ReplyDelete
  41. masih belom paham juga nih cara pasangnya walaupun udah dijelasin :D

    ReplyDelete
  42. Ilmunya keren nih, aku baru tau. Makasih mbak Lydia

    ReplyDelete
  43. Alhamdulillah nambah lagi ilmunya, terima kasih sudah berbagi. Nanti saya cobain deh.

    ReplyDelete
  44. msh blm mudeng sih, tp dicoba ntar

    ReplyDelete
  45. Baru tau tentang tag abbr, lumayan dapat tambahan ilmu disini. Makasih Mbak Lid, suatu saat akan saya coba :)

    ReplyDelete
  46. ilmu baru nih kenapa ga pake underline aja mak biar lebih jelas hehe

    ReplyDelete
  47. kenapa aku binung...hadeuh... bookmark dulu u dipelajari pelan-pelan..
    tfs ya mak :)

    ReplyDelete
  48. Blm ngehh.... tp penasarannn.. tfs mbakk

    ReplyDelete
  49. Hoaaah 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. :))

    ReplyDelete
  50. Baru tau ada yg namanya abbr. ilmu baru harus segera dipraktekin nih...

    ReplyDelete
  51. baru tau juga caranya mbak...terima kasih banyak share ilmunya...

    ReplyDelete
  52. Makasih infonya, Lid. Bermanfaat banget. Aku bookmark. :)

    ReplyDelete
  53. Sangat bermanfaat ini mbak, saya baru tahu kalo ada tag abbr. makasih mbakkk...

    ReplyDelete
  54. Mbak lidya nih sebenernya pengetahuan kodingnya keren, coba ntar sharing2 lagi mbak soal kode2an gitu, saya nih baru tau lho, thanks atas infonya ya

    ReplyDelete
  55. wah mksh ilmunya, sangat bermanfaat. sy bs belajar dr blog ini

    ReplyDelete
  56. Terima kasih atas tutornya. Bermanfaat banget.
    kelinci

    ReplyDelete
  57. Wah ilmu baru nih,,baru tau ada tab model kayak gitu,,sangat bermanfaat,,

    ReplyDelete

Terima kasih sudah berkunjung dan berkomentar. Mohon maaf semua komentar di moderasi ya