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
SHARE ON :

Artikel Terkait

Membuat Link External dengan icon Panah Keluar
4/ 5
Oleh

Subsribe

Masukkan alamat email Sobat untuk berlangganan blog ini dan menerima pemberitahuan pesan baru melalui email.

Load comments