Ikon Eksternal Otomatis Pada Tautan Artikel

Mad Trik - Sudah pernah mampir ke situs pengetahuan Wikipedia ?. Biasanya kan disana jika terdapat sebuah tautan atau link yang menuju ke halaman lain atau ke situs lain terdapat ikon kotak kecil dengan tanda panah yang keluar, nah disini kita akan membahas tentang hal itu. Dan untuk kamu yang penasaran bagaimana bentuknya, bisa kamu lihat pada gambar dibawah ini:

Gambar: en.wikipedia.org/wiki/One_Ok_Rock

Gambar diatas hanya sebagai contoh atau sekedar ilustrasi saja, hasilnya memang tidak semirip gambar diatas, tapi paling tidak sudah hampir mendekati.

Caranya Membuat Ikon Eksternal Pada Tautan Otomatis

Caranya mudah banget seperti yang sudah ditulis di blognya Kang Adhy di Kompi Ajaib, kamu hanya tinggal menambahkan CSS dibawah ini saja di template blog kamu:

.post-body a {
    font-weight:700;
    position:relative;
    padding-right:20px;
    display:inline-block;
}
.post-body a:before {
    content:'\f08e';
    font-family:FontAwesome;
    font-style:normal;
    font-weight:normal;
    text-decoration:inherit;
    color:#333;
    position:absolute;
    bottom:0;
    right:0;
    font-size:14px;
}

Ikonnya tidak muncul ?. Mungkin kamu belum memasang font Awesome di blog kamu, coba pasang Font Awesome Icons dulu kedalam blog kamu. Setelah itu baru lihat hasilnya.

Kemudian simpan template kamu jika sudah selesai semua, untuk selebihnya kamu bisa berkreasi sendiri sesuai dengan selera kamu.

Yang perlu di perhatikan adalah post-body, karena tidak semua template blog yang memiliki area post yang sama seperti itu.

Jadi untuk menyelesaikan masalah ini adalah dengan memeriksa elemen di blog kamu, kemudian cek bagian dalam posting atau artikel kamu disitu. Untuk punya saya sendiri adalah .post.