HackingUniversity - Hacks . Tricks . How-To's

04 August 2012

Add External Links Icon in Blogger or Wordpress Post Links

Posting some useful trick or giving review for some software’s you usually provide a link to the original authors website well if you wanna highlight that link with a simple external link icon than we have a simple CSS trick for you that will help you in adding external links icon to all your links automatically.

external link icon

So as you can see in the above image demo is given that how you external link icon will look like, so your all the old post and new links will automatically get this icon attached to them. Now applying this icon is really easy just follow the below steps and have fun.

1. Go to Blogger > Template > Edit HTML

2. Now press Ctrl + F and search for ]]></b:skin> tag and paste the below code above it.

.post-body a{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;background: url(//bits.wikimedia.org/static-1.20wmf8/skins/vector/images/external-link-ltr-icon.png?2012-07-23T14:50:00Z) center right no-repeat!ie;padding-right: 13px;}.separator a{background:none}

3. Now just Save the Template and refresh your blog posts and check if your link are having this external links icon.

You can change the above blue url line to your own icon link, and I recommend that you upload the icon to your server like on blogger or photobucket.