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.
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 kode untuk fontawesome
2. Simpan kode dibawah ini diatas kode </head>
<!-- External Link -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a[target="_blank"]:after{
content: ' f08e';
font-family:FontAwesome;}
/*]]>*/
</style>
</b:if>3. Selesai
CARA KEDUA
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 kode untuk fontawesome
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
CARA KETIGA
1. Simpan kode ini diatas </head>
<b:if cond='data:blog.pageType == "item"'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
content: '';
background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
background-size: 14px 14px;
width: 14px;
height: 14px;
display: inline-block;
margin-left: 3px;
vertical-align: -2px
}
.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="http://www.kangibay.com/"]:after,
.post-body a[href^="https://www.kangibay.com/"]:after,
.post-body a[imageanchor*="1"]:after{
content: '';
background: 0 0;
width: 0;
height: 0;
margin-left: 0
}
/*]]>*/
</style>
</b:if>ket :
– ganti kode e8554e dengan kode warna link sobat
– ubah url dengan nama situs Sobat
Source code : KompiAjaib
Sekian informasi mengenai tutorial cara membuat link external dengan icon panah di akhir tulisan linknya, semoga bermanfaat.
