Use jquery to style your external links with image

You must have noticed in Wikipedia that all external links is followed by an image basically this tells user that the link will open in a new tab.
Lets see an example -
Blogger -An external Link
Fun with blogger -Internal link

You have noticed that the hyperlink blogger 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!One way of doing this is manually putting the class name to each anchor tag entry having external target! or just use jquery function and let Jquery do it for you.

# Understanding External Links strategy.What are external links?
External links are those links which points away from  your site.For this  we use a special attribute target="_blank" which tells the browser to open external link in new tab or window.
External link Looks like this
<a href="http://www.blogger.com/" target="_blank">Blogger </a>
# Purpose/Use  of JQuery.We will use jQuery to find out all a tags with target="_blank" attribute and will append a class name "external" to them by easily defining css for class external.
# Add Class name "external" To your blogger.Just Edit your Template:
Blogger Dashboard >
Layout > Edit HTML

a.external {
padding-right: 13px;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2_eiY3Lzo0VpSKWoPJ_eNV7VTDDQ66SIJKUU2oisjwnwoOXmdHusTL0rWh97x9LuM47BbCJzVQ7IrQm5rsfBc5grgrXW3mn82_EGI3ZxyASlQBfHqv00fUUOJXwRYp0O_PrIG6CHgIWk/s320/external.png") no-repeat scroll right center;
}

Now paste the above CSS code before ]]></b:skin>

#Append JQuery to your blogger.Copy below code and paste it Before the </head> in your template.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script><script type="text/javascript">$(document).ready(function() {    $('a[target="_blank"]').addClass("external");});</script>

This javascript code consist of two parts:
Jquery library-
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
And a function which search  target="_blank" attribute and will append a class name "external" to it.

---

That was all regarding Using jquery to make your external links looks cool and different.Stay in touch with me bu subscribing to my posts with RSS And MAIL
Please  give your feedback and do share this article with your friends.