Membuat Ikon External Link Font Awesome Pada Setiap Link

Kali ini aku akan menunjukkan sebuah trik yang gampang untuk mempercantik tampilan postingan blog untuk menampikan atau menciptakan ikon ekternal link ibarat berikut secara otomatis pada setiap link yang ada di postingan.

Pada trik ini tentunya memakai font awesome sehingga pembuatannya pun lebih mudah. Bagi yang belum memakai Font Awesome, silahkan pilih dan simak postingannya pada search result postingan-postingan perihal Font Awesome.

Silahkan pilih dan simak DI SINI.

Ikon external link ini berkhasiat untuk menandai bahwa teks tersebut (anchor text) merupakan sebuah link, sehingga pembaca akan lebih gampang melihat sebuah link di postingan.

Bagaimana Anda tertarik untuk mencobanya? Silahkan gunakan aba-aba CSS di bawah ini dan simpan di atas aba-aba </head>.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a{font-weight:700;position:relative;padding-right:20px;display:inline-block;}
.post-body a:before{content:'\f08e';font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#333;position:absolute;bottom:0;right:0;font-size:14px;}
/*]]>*/
</style>
</b:if>

Dengan begitu setiap link yang ada di postingan (hanya di dalam postingan saja) akan otomatis mempunyai ikon external link ibarat yang ada di blog ini atau di postingan ini.

Semoga postingan ringan perihal menampilkan ikon external link pada setiap link di postingan ini dapat bermanfaat.

Sumber https://www.kompiajaib.com/

0 Response to "Membuat Ikon External Link Font Awesome Pada Setiap Link"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel