Advertisement

SUPPORTED

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

Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
Copyright © 2017 Kangibay.net - Redesign By Nowext Inc.Blagioke