Cara Menciptakan Link (Url) Di Artikel Ada Ikon Panah Dengan 3 Model

Tutorial: Tips & Trik Cara Membuat, Memasang dan Menampilkan Icon Panah di Dalam Postingan Blog

Salah satu pembaca setia kami menanyakan problem wacana cara menampilkan ikon panah di dalam artikel blog; sempurna saat sebuah kata atau kalimat, dipasangkan (ditambahkan) sebuah tautan situs (Internal Link / Eksternal Link).

Pic: Kompi Ajaib

Setelah melaksanakan literatur (Googling), kami menemukan satu artikel tutorial yang membahas problem ini, -- yang memang layak untuk di angkat dan dipublikasikan di situs web kami.

Cara Membuat Link (URL) di Artikel ada IKON Panah dengan 3 Model

Cara semoga di dalam postingan yang terpasang link (URL) disertai ada logo panahnya, ada 3 style yang dapat kau implementasikan di dalam template blogger.

Catatan: Tutorial ini hanya akan berfungsi apabila URL yang ditambahkan di dalam artikel, bersifat EXTERNAL LINK. Apabila tautan situs yang ditambahkan bersifat Internal Link, maka ikon tidak akan ditampilkan.

Simpan instruksi di bawah ini:

<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>

...di atas instruksi </head> kemudian simpan template blog.

Atau kau juga dapat memakai instruksi di bawah ini:

.post-body a[target="_blank"]:after {      font-family:'      FontAwesome';      content:"\f08e";      font-weight:normal;      font-size:80%;      margin-left:4px; }

...lalu paste (tempel) di atas instruksi ]]></b:skin> kemudian akhiri sesi ini dengan mengetuk Save Template.

Jika tutorial No. 1 dan 2 di atas tidak WORK pada tema blogger yang kau gunakan, coba gunakan instruksi di bawah ini:

<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.example.com/"]:after, .post-body a[href^="https://www.example.com/"]:after, .post-body a[imageanchor*="1"]:after{      content: '';      background: 0 0;      width: 0;      height: 0;      margin-left: 0 } /*]]>*/ </style> </b:if>

...di atas instruksi </head> kemudian Save Template.

Catatan: Pada tutorial No. 3 di atas, perhatikan URL dengan alamat https://www.example.com/. Ubah URL ini dengan alamat situs web kamu.

Oh iya... pastikan di dalam template blogger ada Font Awesome yang terpasang.

Nah itu ia cara semoga ada ikon panah di link (URL) artikel dengan 3 tutorial (praktek) yang berbeda tapi tujuannya tetap sama. Ada hal yang ingin ditanyakan?

Source: candysweet-aina.blogspot.com/search?q=cara-memasang-font-awesome-blog
Sumber http://addbloggerthemes.blogspot.com

Share this post