You must have noticed that in Wikipedia, all the external links which open up a new window or tab possess an arrow background image. Basically this is a technique of telling users that the link will pop up in a new window or tab! For example, have a look at the following example:
- Google – This was an external link;
- InTechgrity – This was an internal link
Obviously, you must have noticed that the hyperlink Google has an arrow image on right of it! This tells the user that the link will open up in a new tab when being clicked!
Now the question is how to automatically do it? If we use CSS to make a class having the style, then it would become really hectic to manually put the class name to each anchor tag entry having external target! So, we shall see how we can use jQuery to easily stylize the external links. Basically we shall not only do this, but also will discuss about automatically making all third party links to open up in a new tab and also customizing those links to add an arrow icon!
Before we begin the tutorial, lets have a look at the output and download package:
#0: Understanding the external linking and strategizing the work:
Basically, external links just have a special attribute which tells the browser to open up the URL in a new window or tab. It is purely a HTML thing! Have a look at the following examples:
<a href="http://www.intechgrity.com/">Normal HTML anchor tag</a>
There is nothing special in the above HTML. The link http://www.intechgity.com is wrapped under the anchor text Normal HTML anchor tag and will instruct the browser to open up the URL on the same page the link is!
Now let us put an attribute target="_blank" inside the tag to make it external:
<a href="http://www.intechgrity.com/" target="_blank">This will be an External Link</a>
So basically, external links differs from the normal links in just having a special attribute target="_blank" inside it!
Considering this difference, let us plan our work:
- We shall use jQuery to find out all a tags with target="_blank" attribute and will append a class name "external" to them.
- Now for highlighting them we are going to use CSS in the following manner:
Clearly it will style up all a tags having class name external which we have appended using jQuery. - Now for automatically making third party links to open in a new windows regardless of having the target="_blank" attribute, we will use jQuery to match the current location and the URL location and will append the attribute to all the unmatched links… This will make an outgoing link say http://google.com external on your site but will retain the default attribute for all internal links!
- We shall also use jQuery hover function to make the arrow style appear on hover and disappear on hover-out.
Enough of the strategy and planning… Now lets see the codes!
#1: The CSS thing ~ Lets make the style first:
Before we proceed, it will be good if we make the style! As discussed before, we are going to use jQuery to append some CSS class to the external or third party links. Then we are defining the class from CSS to show the arrow behind the external links! So here is the CSS code:
a.external {
padding-right: 13px;
background: transparent url("http://4.bp.blogspot.com/_M0X9MzkzNXE/Srdo-XydVRI/AAAAAAAADpA/3n29SY7GrfI/s320/external.png") no-repeat scroll right center;
}
This will append this image => 
to the external links! I have already hosted it from blogger. If you want then you may host it yourself or use any image you like!
Save the CSS code on your style sheet and we are ready to go for the jQuery code!
Note: To save the CSS you can either copy the code inside a style tag like,
/* Paste styles here */
</style>
and put the code somewhere before the closing </head> of your template.
Or you can upload the .css file and link using:
before the closing </head> section!
For more, consider reading:
For Blogger User:
- Just Edit your Template: Blogger Dashboard > Layout > Edit HTML;
- Now paste the above CSS code before ]]></b:skin>
- This will attach the CSS thing on your Blog template! You can also use any external host to link the CSS file
#2: The jQuery thing to ultimately highlight the external or Third party Links:
There are many possible ways to do this thing using jQuery… But before we do anything make sure that the latest jQuery framework is there on your Website template. Just add the following line of code on your template [Before the </head> code]:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
For more on this I recommend you reading this article:
Anyways for this purpose I have figured out 4 ways which are as follows:
#A: Simply highlighting all external links on the page:
Just add this code on a file say extlink.js and put it on your server…
$(document).ready(function() {
$('a[target="_blank"]').addClass("external");
});
Now attach the script file to your Web template using the following code.
<script type="text/javascript" src="js/extlink.js"></script>
Put it anywhere before the closing </head> of your template but after the jQuery framework.
Now check your site! You should now see that all the external links which have target="_blank" attribute, now possess a cool background image!
#Note: For Blogger User:
- There are two things you can do:
- Use your Blogger template to host the jQuery code;
- Use any external host for the javascript file!
- I recommend using the second method. Because we already have Google Code to host our JS files! Simply upload the JS file [say, extlink.js] containing the above code and put the <script type="text/javascript" … </script> thing as mentioned before [Just before the closing </head> of your template]. For this, you need to go through the following tutorial:
- Save your template and see the effect yourself!
#B: Highlighting External Links and Auto Highlighting Third Party Links:
All the methods are same. Just use the following codes instead:
$(document).ready(function() {
$("a").filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank');
$('a[target="_blank"]').addClass("external");
});
#C: Highlighting only External Links with Hover Effect:
The following code will make the arrow image to appear on hover and disappear on hover-out!
$(document).ready(function() {
$('a[target="_blank"]').hover(function() {
$(this).addClass("external");
},
function() {
$(this).removeClass("external");
});
});
#D: Highlighting both External and Third party Links with Hover effect:
The code is as follows:
$(document).ready(function() {
$("a").filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank');
$('a[target="_blank"]').hover(function() {
$(this).addClass("external");
},
function() {
$(this).removeClass("external");
});
});
To get a demonstration of the Codes, make sure to check the online Demonstration. Also do download the package in order to get all the codes!
So that was all about using jQuery to make the external and third party links more stylish and cool. I hope you have liked this tutorial. DO give your feedback and spread the tutorial. Also if you have any problem, feel free to ask!
It will be good if we can remove linked external, but both internal images away from this code.
As you can see in your demo, this code is for them too, but will be good if we can exclude it from this "hack".
GJ again Swashata
BTW, trackbacks under posts are loading forever.
My recent post Integracija Pikase u Windows Explorer
Buddy I am not exactly getting what you really want to say! If you want to highlight only external links of your Post but not the whole blog, then you need to find the id if the div surrounding the post! For example, say <div id="post" /> surrounds the blog post. Then make the CSS selector inside the jQuery function like this:
$('div#post a[target="_blank"]')…
And for the online demo, if you are thinking that although when we press the reset button, the title of the page and the two links below then are not getting reset, then it is because I have assigned the reset function to do that! I noticed it later and as it was not the primary thing of the demo, I didn bothered to fix it! If you follow the steps written in the tutorial, then u won't get any trouble!