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/AVvXsEjAvQTUTAfYXCNTuLNtyNoLQaV5gM4aFoSb1ySnvuJM-prN2uCyX9L7MMvRc8JmFhZiVjAx50Uto34K2wEq6XHhPkb2QR8G81SK9_97eHGeFM7QUaUVm81gPS2xcwJEazjItkNvIcPgeH4/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.

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Share this on Reddit
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Share this on Mixx
• Subscribe
• Buzz up!
• Share this on Linkedin
• Submit this to DesignFloat
• Share this on Technorati
• Submit this to Script & Style
• Post this to MySpace
• Share this on Blinklist
• Share this on FriendFeed
• Seed this on Newsvine

Be a Fan