Tambahan - Pranala Luar

Menambahkan icon external link

Karunia Deva

1 min read

Tulisan ini adalah bagian dari seri blogdev.

Kalau kalian perhatikan, ada sebuah icon kecil pada setiap link yang saya tautkan di sini. Icon tersebut adalah Pranala Luar (External Link) yang, sesuai namanya, menunjukkan bahwa sebuah link akan menuju ke situs lain. Kode ini saya dapat dari blog Jessica Smith .

Kode HTML yang saya pakai hampir mirip, hanya saja ada beberapa penyesuaian karena gambar yang saya pakai berbeda. Kode tersebut diletakkan di file /layouts/_default/_markup/render-link.html

<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
{{ end }}>
   {{ .Text | safeHTML }}{{ if strings.HasPrefix .Destination "http" }}
   <span style="white-space: nowrap">
      &thinsp;
      <svg width="13" height="13" focusable="false" data-prefix="fas" data-icon="external-link-alt"
      class="svg-inline--fa fa-external-link-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg">
         <title>
            external link
         </title>
         <g transform="translate(-36.467808 -258.39005)">
            <pathfill="#36b" d="M41.47 259.4h7v7l-2-2-3 2v-1l3-2.25 1 1v-3.75h-3.75l1 1-2.25 3h-1l2-3z"
            />
            <path fill="#36b" d="M43.47 261.4h-5v8h8v-5h-1v4h-6v-6h4z" />
            <path fill="#15a5ea" d="M40.55 263.9c0-.6213.6213-.6213.6213-.6213 1.864.6213 3.107 1.864 3.728 3.728 0 0 0 .6213-.6213.6213-1.243-1.864-1.864-2.485-3.728-3.728z"
            />
         </g>
      </svg>
   </span>
   {{ end }}
</a>

Saya menggunakan gambar External Link yang tersedia di Wikimedia dengan lisensi gratis.

Tulisan ini adalah bagian dari seri blogdev.