Adding Icons Beside External Links

    Adding an icon next to the external link would benefit much your reader for this will inform them that they will leave the site once they click the link. Please refer to EXTERNAL LINKS AND OPENING LINKS IN A NEW TAB post to know more about the external links.

Sample:
Sample Look

CSS Approach
    You will need to insert a CSS code and manually edit the external links by adding classes to them. Below is the step by step procedure to accomplish this task.

CSS Approach
Code:

.ExternalLink{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBQRFN_FmesAoIiTKKpnkdzUjePLd9CDMUawhKTAxQ-ViTE1jNj1YqKCDXkea2cahPP9wozRzGmMjNXbClUsEa77kQkc8Hn0ALs16pChd-4Xk2u2d5BcQyiLlZDLv7LojXqVHLFmiHkY/s12/ExternalIcon.png') no-repeat right center;
    padding-right: 15px;
}

1 Go to Template >> Customize >> Advanced >> Add CSS.

2 Copy the code above and paste in into the Add Custom CSS Box.

3 Press Apply to blog.

     Now that you have installed the code into your blog, you will need to format your links in HTML mode by adding a line of code within the anchor tag <a class="ExternalLink" href="URL" target="_Blank">Link</a>. After you have properly added the class the icon should appear at the right side.