Create External Link Icons Using SVG without JavaScript In Blogger
Demo
How ? interested in the style of External Link Icons Using this SVG ?
Copy below style code before </head> section in your template :
<b:if cond='data:blog.pageType == "item"'>
<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.webmanajemen.xyz/"]:after,
.post-body a[href^="https://www.webmanajemen.xyz/"]:after {
content: '';
background: 0 0;
width: 0;
height: 0;
margin-left: 0
}
/*]]>*/
</style>
</b:if>
Hopefully this article External Link Icons Using SVG is helpful.
Thank you for visiting.Source: Here
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.