Membuat Link External dengan icon Panah Keluar

Advertisement

Tutorial ini terinspirasi dari blog KompiAjaib yang mengulas tentang cara membuat external link menggunakan FontAwesome. Akan tetapi setelah menggunakan tutorial tersebut, semua link baik di Home, Postingan, Iklan, ikon panah ikutan muncul.

membuat link external dengan icon panah keluar

Jika sobat mengalami hal yang sama, sobat bisa mencoba tutorial ini, yang saya modifikasi dari kode mas Adhy Suryadi (KompiAjaib) untuk memunculkan tanda panah keluar pada link external hanya di dalam postingan saja.

CARA PERTAMA


1. Simpan kode ini dibawah <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

*lewati jika sudah ada

2. Simpan kode dibawah ini diatas kode </head>

<!-- External Link -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a[target="_blank"]:after{
content: ' f08e';
font-family:FontAwesome;}
/*]]>*/
</style>
</b:if>

3. Selesai

resource : http://www.kompiajaib.com/2015/01/membuat-ikon-external-link-font-awesome.html

CARA KEDUA


1. Idem

2. Simpan kode dibawah ini diatas kode ]]></b:skin>

.post-body a[target="_blank"]:after {
font-family:'
FontAwesome';
content:"\f08e";
font-weight:normal;
font-size:80%;
margin-left:4px;
}

3. Selesai



Sekian informasi mengenai tutorial cara membuat link external dengan icon panah di akhir tulisan linknya, semoga bermanfaat.

Salam,
Admin

Advertisement

Orang boleh pandai setinggi langit, tapi selama ia tak menulis, ia akan hilang di dalam masyarakat dan dari sejarah. (Pramoedya A. Toer)