How To Manage External Links Using JQuery

In this tutorial I am going to show how to style your external links differently from the other links using Jquery.Also after adding this trick to your blogger blog or web site,all external link of your site will open in new window.This is very easy to do and you can view a DEMO HERE.If you want to know further details about this trick you can read this : http://www.madeincima.eu/blog/jquery-tutorial-external-links/

Now to add this jquery external links effect to your site follow the steps given below.



1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
/*

    jQuery - External Links
    Created by Andrea Cima Serniotti - http://www.madeincima.eu

*/


$(document).ready(function () {

        // ---- External Links ----------------------------------------------------------------------------------------------------

            $("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").attr("target","_blank").attr("title","Opens new window").addClass("external");

});
</script>

<style type="text/css">
.external{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioowwblT2TaBHm6qVB33qEO8gsy7RDmOD6YUWr6MdlDeinhmuT7R0OUBGP1e-uzI2oUmqiRhiIrkS7g8RO14hoS8KTWujARrYUa8VC-EIR8ZgOIhRShTU0GSpfjfTAxvSpQjYBMrB0voY/s1600/external_link.gif) top right no-repeat;padding-right:18px}
</style>

4.Now save your template.

You are done.Now all of your external links open in new windows and can identify external links from other links.