Cara Menambahkan icon-link Pada Tautan Di Postingan

Setiap tautan atau anchor text yang disematkan dalam artikel hendaknya dibedakan dengan teks biasa, tujuannya agar pengunjung tau bahwa anchor text tersebut bisa di klik (dibuka).

Ada beberapa cara yang paling umum digunakan untuk membedakan anchor text dengan teks biasa diantaranya menggunakan huruf tebal, warna yang berbeda, style font khusus hingga menambahkan icon-link pada tautan (anchor text).

Oleh karena itu, di tutorial kali ini saya akan memberikan trik untuk menambahkan icon-link pada tautan yang disematkan dalam artikle atau postingan blog. Ingin tahu bagaimana caranya? simak selengkapnya di bawah ini.
Tutorial menambahkan icon-link pada tautan
Untuk menambakan ikon link pada tautan yang ada di halaman post sebenarnya tidak sulit, cukup tambahkan css berikut di atas kode ]]></b:skin> yang ada di dalam template blog anda.
.post-body a:after {
    content: "\f0c1";
    font-family: FontAwesome;
    font-size: 11px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 4px;
    transform: rotate(90deg);
}
Catatan: Sesuaikan kode icon-link \f0c1 dengan versi font awesome yang anda gunakan, disini saya mencontohkan dengan font-awesome versi 4.7.0, versi sebelum dan sesudahnya juga biasanya tersedia icon-link \f0c1.

Dengan demikian semua tautan yang ada di dalam postingan akan memiliki icon-link yang menegaskan bahwa tautan atau anchor text merupakan link yang bisa di klik atau dibuka.
[ads id="ads1"] Tetapi trik itu belum sempurna, elemen lain dalam postingan sperti tombol share, link author dan lainnya yang ada di dalam area postingan mungkin akan terdapat icon-link juga.

Maka untuk mengindari hal itu target pada selector css perlu dirubah dan perlu ditambahkan class baru pada anchor text.

Untuk css-nya gunakan css berikut ini,
.post-body .tautan:after {
    content: "\f0c1";
    font-family: FontAwesome;
    font-size: 11px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 4px;
    transform: rotate(90deg);
}
Kemudian pada anchor text atau tautan tambahkan class baru seperti contoh berikut ini melalui penulisan/edit html.
Before: <a href="url">text here</a>

After: <a class="tautan" href="url">text here</a>
Tambahkan class="tautan" pada semua anchor text yang ada di halaman post, atau sebagian anchor text (tautan) yang ingin anda tambahkan icon-link.

Tambahan: css selector transform: rotate(90deg); boleh tidak digunakan jika tidak suka dan pastikan di situs web/blog anda sudah tersedia font-awesome.

Jika di blog anda belum tersedia, silahkan gunakan salah satu library font-awesome dibawah ini.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Instal font-awesome, dengan menambakan salah satu pustaka font-awesome di antara tag <head> dan </head> dalam html template blog anda.

Jika tidak ingin menggunakan font-awesome bisa juga dengan icon-link \f0c1 dengan hastag atau tanda # untuk menandai atau menambahkan icon-link pada tautan di dalam postingan anda.

Selesai, semoga tutorial menambahkan icon-link pada tautan yang saya share ini bermanfaat dan menambah kesan yang baik untuk konten blog anda.
Lebih baru Lebih lama
Close