Cara Menambahkan icon-link Pada Tautan Di Postingan

Setiap tautan atau anchor text yang disematkan dalam artikel hendaknya dibedakan dengan teks biasa, tujuannya agar pengunjung tau bahwa anchor text tersebut bisa di klik (dibuka).

Ada beberapa cara yang paling umum digunakan untuk membedakan anchor text dengan teks biasa diantaranya menggunakan huruf tebal, warna yang berbeda, style font khusus hingga menambahkan icon-link pada tautan (anchor text).

Oleh karena itu, di tutorial kali ini saya akan memberikan trik untuk menambahkan icon-link pada tautan yang disematkan dalam artikel atau postingan blog. Ingin tahu bagaimana caranya? simak selengkapnya di bawah ini.
Tutorial menambahkan icon-link pada tautan
Untuk menambakan ikon link pada tautan yang ada di halaman post sebenarnya tidak sulit, cukup tambahkan css berikut di atas kode ]]></b:skin> yang ada di dalam template blog anda. 
.post-body a:after {

    content: "\f0c1";

    font-family: FontAwesome;

    font-size: 11px;

    vertical-align: middle;

    display: inline-block;

    margin-left: 4px;

    transform: rotate(90deg);

}
Catatan: Sesuaikan kode icon-link \f0c1 dengan versi font awesome yang anda gunakan, disini saya mencontohkan dengan font-awesome versi 4.7.0, versi sebelum dan sesudahnya juga biasanya tersedia icon-link \f0c1.

Dengan demikian semua tautan yang ada di dalam postingan akan memiliki icon-link yang menegaskan bahwa tautan atau anchor text merupakan link yang bisa di klik atau dibuka.
[ads id="ads1"] Tetapi trik itu belum sempurna, elemen lain dalam postingan sperti tombol share, link author dan lainnya yang ada di dalam area postingan mungkin akan terdapat icon-link juga.

Maka untuk mengindari hal itu target pada selector css perlu dirubah dan perlu ditambahkan class baru pada anchor text.

Untuk css-nya gunakan css berikut ini, 
.post-body .tautan:after {

    content: "\f0c1";

    font-family: FontAwesome;

    font-size: 11px;

    vertical-align: middle;

    display: inline-block;

    margin-left: 4px;

    transform: rotate(90deg);

}
Kemudian pada anchor text atau tautan tambahkan class baru seperti contoh berikut ini melalui penulisan/edit html. 
Before: <a href="url">text here</a>

After: <a class="tautan" href="url">text here</a>
Tambahkan class="tautan" pada semua anchor text yang ada di halaman post, atau sebagian anchor text (tautan) yang ingin anda tambahkan icon-link.

Tambahan: css selector transform: rotate(90deg); boleh tidak digunakan jika tidak suka dan pastikan di situs web/blog anda sudah tersedia font-awesome.

Jika di blog anda belum tersedia, silahkan gunakan salah satu library font-awesome dibawah ini. 


<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Instal font-awesome, dengan menambakan salah satu pustaka font-awesome di antara tag <head> dan </head> dalam html template blog anda.

Jika tidak ingin menggunakan font-awesome bisa juga dengan icon-link \f0c1 dengan hastag atau tanda # untuk menandai atau menambahkan icon-link pada tautan di dalam postingan anda.

Selesai, semoga tutorial menambahkan icon-link pada tautan yang saya share ini bermanfaat dan menambah kesan yang baik untuk konten blog anda.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya