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 :
Hopefully this article External Link Icons Using SVG is helpful. Thank you for visiting.
<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.com/"]:after,
.post-body a[href^="https://www.webmanajemen.com/"]:after {
content: '';
background: 0 0;
width: 0;
height: 0;
margin-left: 0
}
/*]]>*/
</style>
</b:if>
Source: Here
Related Articles
