How To Manage External Links Using JQuery

Feed: Blogger Tips And Tricks|Latest Tips For Bloggers

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 t!  ype="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/AVvXsEi-IPjBUwP-NXZN7gG9valtzL6pTMWwFnEbnjGcHZ8bY0IIGDqfn-WWHOaa5q11AcfVHSx1mY4velbA5Q6ZnmRJ5sE3BfBcEB3xuAsv7jSGsYxg_fDywLqhfnHGiK5Loj4tBx5_rLV5AbU/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.

---

Feed Info:
Name: Blogger Tips And Tricks|Latest Tips For Bloggers
URL: http://feeds.feedburner.com/blogspot/wyna
Add, Modify, Remove feeds at Innerfeed

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer