≡ Menu
Pabelog

CSS: Membuat Icon Tautan Keluar / Exsternal Link Icon

in Hacking

Jika kamu membuka wikipedia atau website wiki lainnya, biasanya kamu melihat icon . Icon biasanya digunakan untuk menunjukan bahwa itu adalah tautan keluar.

Kali ini saya akan menunjukan bagaimana cara membuat tautan/link keluar dengan icon. Caranya tidak begitu sulit, kita akan menggunakan sedikit trik menggunakan CSS.

Berikut adalah cara yang saya gunakan untuk membuat icon tautan keluar seperti yang terdapat pada blog ini.

Jika kamu bertanya seperti apa nantinya tautan berserta icon, kamu akan membuat tautan seperti berikut: Ini tautan keluar dengan icon

Ada dua cara untuk membuat icon tautan keluar, pertama denggan menggunakan selektor class, yang kedua menggunakan selektor attributes.

Menggunakan Selektor Class

Memakai class adalah cara termudah dan paling mudah untuk dikontrol. Kelebihannya kita bisa memakai tautan icon secara fleksibel. Kekurangannya, cara ini digunakan secara manual.

CSS

a.external {
    background: url(/images/external.png) center right no-repeat;
    padding-right: 13px;
}

HTML

Link

Jangan lupa gunakan class="external" ketika akan menyisipkan tag pada tag <a>.

Download ikon gambar di sini.

Menggunakan Selektor attributes

Cara kedua ini lebih praktis, setiap kita memasang tautan keluar, icon akan muncul sendirinya. Cara kedua ini adalah yang saya gunakan pada blog ini.

CSS

a[href^="http://"] {
    background: url(/images/external.png) center right no-repeat;
    padding-right: 13px;
}
a[href^="//arsip.pabelog.com"]  {
    background: none;
    padding-right: 0;
}

Selektor pertama artinya kita akan menggunakan background: url(/images/external.png) (icon tautan keluar) untuk setiap link. Untuk meng-exclude tautan internal kita perlu membuat selektor lagi dengan href= tautan blog kita dengan argumen background: none;.

**

Selesai! cara di atas bisa kamu coba pada blog kamu.

Sedikit catatan, selektor attributes tidak bekerja pada browser internet eksploler versi 8 ke bawah. Meskipun begitu, sepertinya setiap orang tidak akan peduli dengan IE.

About the author: Halo, saya pengelola sekaligus pemilik blog ini. Saya suka blogging, programing, makan, dan tidur. Kontak saya di twitter saya, Google+ saya. Yakin gak komentar? blog ini do-follow loh!