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.

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.

membuat link external dengan icon panah keluar

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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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.

Advertisement
Membuat Link External dengan Icon Panah Keluar Membuat Link External dengan Icon Panah Keluar Reviewed by Shici -Kun on 6:59 AM Rating: 5

Disqus for kangibay