17 mars 2012

Gérer Les Liens Externes Avec JQuery

External Link Jquery
Dans ce tutoriel, je vais vous montrer comment gérer les liens externes de votre site web/blog en utilisant JQuery.
Après l'ajout de ce script pour votre blog Blogger ou site web, tout lien externe s'ouvrira dans une nouvelle fenêtre et peuvent être identifier des autres liens.
Ceci est très facile à faire et vous pouvez voir une démo ici.






Gérer Les Liens Externes Avec JQuery

Pour ajouter l'effet Jquery sur les liens externes de votre site suivez les étapes indiquées ci-dessous :

1. Connectez vous à votre espace d'administration Blogger et allez à
"Présentation" > "Modifier le code HTML"

2. Cherchez (avec CTRL+F) le mot : </head>

3. Copier le code ci-dessous et collez-le juste avant la balise </head>.
<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 () {
        // ---- 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/AVvXsEghOKn2W_1wvhwBFqNQZfoD52fW1Y4br8stPi54Xc1rn65FZBZAXqCVbRADSwQjC3b5HkGjYCkI6iWqPBS9kNuIhgve6VHZ6OHrkaheKhBqGIaHS5Zr7Stk8c7jj6oYdoY0RJ12jHngJjs/s1600/external_link.gif) top right no-repeat;padding-right:18px}
</style>
4. Enregistrez votre modèle.

Maintenant, tous les liens externes présentés sur votre site/blog s'ouvrent dans des nouvelles fenêtres et peuvent être identifier des autres liens.

1 commentaires:

  1. Merci, une simple ligne qui arrange tout.
    Mon code en JS, faisait plus de 15 lignes.

    Merci

    RépondreSupprimer