You can also force those links to open in new windows or tabs if you want to.
1. Tag external linksThis simple jQuery script will scan your page for external links (links pointing to different domains/subdomains) and assign them with "external" class name. This script excludes linked images because you don't want them to be highlighted. (Images for Blogger blogs are considered external since they are hosted on blogspot subdomains, other than your blog's domain/subdomain).
- If you haven't already added a jQuery library call to your template before, copy the code below and paste it above the
</head>tag in your template.
- Then add this script before the
2. Highlight external links
Now that you've added "external" class to all external links, you can easily target (to highlight) them in CSS using "a.external" selector.
On Blogger, go to Template > Customize > Advanced > Add CSS, add the following CSS code and press the Enter key on your keyboard.
- For a simple highlight, you can just change the text or background color, like in this example:
- Or if you want to use a symbol/icon next to the link, like on Wikipedia and Twitter Developers Site, add the following CSS snippet:To use a different icon, simply replace the background URL with that of your icon. You can download free external link icons from Shapes4free.
3. Open external links in new windows
You can make the external links open in new tabs or windows, simply by adding
target="_blank"attribute to the anchor tags. This can be achieved by altering the original script slightly, like this:
Super easy, right?