(Blogger) Ouvrir les liens externes dans un autre onglet

Un des handicaps de la barre d'outils de Blogger est qu'elle ne possède pas la fonction "ouverture des liens dans une autre fenêtre".

Bien sûr, au cas par cas, il suffit d'aller en HTML et de rajouter target="_blank" pour chaque lien

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank">>Les nouvelles ficelles d'Anna K</a>

Pour généraliser cette fonction à tous les liens du blog, il suffit :

• d'aller dans le CSS : Présentation > Modifier le code HTML
• de cocher Développer des modèles de gadgets
• de rechercher la ligne

<div class='post-header'>

• de rajouter à la suite

<base target='_blank'/> 

(OverBlog) Placer une image devant les liens des articles

Si vous n'avez pas opté pour un design particulier des liens (couleur, soulignement ..), il peutêtre difficile de les distinguer. Une possibilité est donc de placer en gif lien devant.

Vous allez dans le CSS - Design > Mode CSS - et vous modifiez

.contenuArticle a{background:url(adresse du gif); background-position:left;background-repeat:no-repeat;padding-left:50px;}

padding-left:50px; représente la marge de gauche à modifier selon la taille du gif

(OverBlog) Créer un lien

Un lien est utilisé pour envoyer le visiteur vers un autre blog ou site, une autre page du blog, à un autre endroit de la même page...lorsqu'il clique dessus. Un lien peut être réalisé :

Sur un mot :

Il suffit d'écrire le mot, de le surligner avec la souris, et de cliquer sur Ajouter un lien dans la barre de menu de l'éditeur (1ère ligne de la barre de menu) : l'éditeur peut être en version basique ou avancée



Vous avez alors le choix entre :

• lien vers un contenu externe à mon blog : vous saisissez directement l'adresse
• lien vers un contenu du blog : les articles, pages, images, documents, albums et catéories s'affichent.
• options avancées : c'est là que vous choisirez la destination du lien (même fenêtre ou autre)

On obtient : Les Nouvelles Ficelles d'Anna K

En HTML, ce lien s'écrit

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">Les Nouvelles Ficelles d'Anna K</a>

Si vous désirez que le lien s'ouvre dans une fenêtre, vous cliquez sur l'onglet destination et vous mettez Nouvelle fenêtre (_blank) pour obtenir

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank">Les Nouvelles Ficelles d'Anna K</a>

Sur une image :

Les liens sur les images sont habituellement utilisés pour faire des Retour vers l'accueil et des menus.

Vous insérez une image dans un module Texte Libre

Vous cliquez sur l'image avec le clic gauche de la souris, elle est alors entourée de petits carrés blancs

Vous cliquez sur Ajoutez un lien dans l'éditeur (1ère ligne de la barre de menu) : édition basique ou avancée



Vous complétez avec l'URL de destination.
Dans mon exemple, la page d'accueil de ce blog : http://les-nouvelles-ficelles-d-annak.blogspot.com

Vous obtenez :



En HTML :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid71AaWwNpjnElBzqmLIaTkiIZNqttVEwYnAsKGeyCW73PkDPjRY8zt96LipjWJS27ozwE1qJIpBkU5o-eyJAPpC9DjbZT7YyvDY5TR4IO-hruDc1Ou1eq6E0_lkKA8znft-uGVe8cnKk/s1600/BRICOTAG.gif" /></a>

Si vous désirez que le lien s'ouvre dans une fenêtre, vous cliquez sur l'onglet destination et vous mettez Nouvelle fenêtre (_blank) pour obtenir

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank"><img src="http://idata.over-blog.com/0/37/17/67/articles/ourson3.gif" /></a>

Et en CSS : (OverBlog) Modifier les liens

Les cas particuliers :

1. Faire un lien sur une adresse mail
2. Faire un lien sur une photo
3. Faire un lien vers un endroit précis d'une autre page
4. Faire un lien vers un endroit précis de la même page
5. Faire un retour vers l'accueil
6. Faire un retour vers le haut de page
7. Faire un retour vers le haut de page avec un double-clic
8. Faire un retour vers le haut de page fixe en bas d'écran

(OverBlog) Modifier les liens

Il s'agit de modifier tous les liens du blog. Dans d'autres articles, vous verrez qu'il est possible, ensuite de modifier dans les articles, les pages, les modules ...

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Le lien au repos

a  {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le lien au survol de la souris

a:hover  {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

AJOUT D'ENCADREMENTS

Le lien au repos

a {border:solid 1px #D8D7D7}

Le lien au survol de la souris

a:hover {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

QUELQUES EFFETS FANTAISIE

Faire clignoter les liens sous FireFox

a {text-decoration:blink;}

Mettre en capital la première lettre de chaque mot des liens

a {text-transform:capitalize ;}

Mettre en minuscule les mots des liens

a {text-transform:lowercase;}

Mettre en minuscule les mots des liens

a { text-transform:uppercase ;}

Faire scintiller les liens au survol de la souris. Vous avez besoin d'un image qui scintille  à mettre en background

a:hover { background-image:URL(adresse de l'image);}

Barrer les liens visités

a:visited { text-decoration: line-through; }

(OverBlog) Modifier le module Liens

Nous allons modifier le design du module Liens : police, puces, background et encadrements.
Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Le titre

.lien .box-titre h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les liens

.lien  a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES PUCES

Il arrive avec certains CSS qu'il soit impossible de rajouter une puce

.lien  li {list-style:none; list-style:disc;list-style:square;list-style:circle;list-style-image : url(adresse de votre puce);}

Vous effacez ce dont vous ne voulez pas, sachant que

list-style : none signifie aucune puce
list-style : disc représente une puce ronde pleine
list-style : square représente un carré plein
list-style : circle représente une puce ronde vide
list-style-image : url(adresse de votre puce) lorsqu'une image remplace la puce. Vous devez la choisir de très petite taille :10*10px maximum

Il peut arriver que la puce soit dans la marge et donc invisible, il faut alors rajouter une marge à gauche

.lien  li {margin-left:15px;}

MODIFICATION DES FONDS

Un fond dans le module en entier

.lien  {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le titre

.lien  .box-titre h2{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le contenu

.lien  .box-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le pied de module (certains CSS en ont un)

.lien .box-footer {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer tout le module

.lien  {border:solid 1px #D8D7D7}

Pour encadrer le titre

.lien  .box-titre h2 {border:solid 1px #D8D7D7}

Pour encadrer le contenu

.lien  .box-content {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

Installer un compteur de clics sur les liens

Vous allez chez QUICK-WEB

Vous vous inscrivez : nom-prénom-adresse email-pays-login(pseudo)-mot de passe-adresse du blog-nom du blog-catégorie

Réception d'un mail, vous cliquez sur le lien pour valider votre inscription

Retour sur le site

Sur la page d'identification, vous cliquez sur l'icône "compteur de clics" et sur activer le service

Si vous avez un problème avec le code a insérez , rendez vous dans la section Aide .

Pour voir le code html pour utiliser le nouveau service auquel vous venez de vous inscrire, cliquez sur Cliquez ici

Configurez votre compteur de clics : couleur de fond, couleur de police, police...

Cliquez sur Modifier

Récupérez le code HTML :

<p><font face="Verdana"><script language="javascript" src="http://click.quick-web.com/click_rank.php?login=annak"></script><font size="3"></font></font></p>

Installez le en HTML du pied de page

Analyser les liens d'un blog

"Afin de vérifier que vos liens sont corrects, non brisés ou erronés, n'hésitez pas à régulièrement utiliser notre analyseur de liens. Selon les options choisies ci-dessous, notre analyseur
de liens vous permettra d'analyser une page ou l'ensemble des pages de votre site avec un choix sur l'affichage des résultats de l'analyseur de liens."

Vous allez sur GRAPHITOO

Saisissez votre URL

Sélectionnez les critères retenus :

• Scanner les URL racines (toutes les pages commençant par l'url ci-dessus seront scannées, Attention très lourd).
  
• Afficher "lié à" un nombre pour chaque URL
  
• Tout afficher ( et non pas juste les liens morts )
  
• Affichage des adresses E-Mail utilisées
  
• Classer les résultats :
  
  
  • Par ordre alphabétique
    
  • Le plus de liens
    

Cliquez sur Analyser

Ca prend quelques secondes tout de même

Il ne vous reste plus qu'à vérifier que vos liens sont ok et à corriger ceux qui posent problème.

Voici un extrait du résultat obtenu :

Indiquer une page importante

Un bandeau traverse votre blog et attire vos visiteurs vers une page importante

Vous allez sur FREEWEBSITERIBBONGENERATOR

Vous saisissez votre texte, le lien, la police et sa couleur.

Vous sélectionnez le ruban.

Vous cliquez sur  Generate

Vous obtenez un code javascript.

<script language="javascript" src="http://www.websiteribbon.com/ribbon/127742/"></script><noscript><div class="websiteribbon"><a title="diagonal advertising banner design" href="http://www.websiteribbon.com/" target="_blank"><img class="websiteribbon" src="http://www.websiteribbon.com/banner.gif" alt="Diagonal Advertising Banner Design" ></a></div></noscript>

Vous le collez en HTML de l'entête.

Regardez en haut à droite de cet article pour voir le résultat.Normalement, il se situe en haut de la page.

Afficher une saisie d'écran de la destination de vos liens

Lorsque votre visiteur pointera sa souris sur un lien menant à un site ou à un blog, une image de la destination de ce lien apparaîtra.

Allez sur SNAP (pour tester, pointez votre curseur sur ce lien)

Etape 1 :

Saisissez l'adresse de votre blog et votre adresse email
Cliquez sur Go to Step 2

Etape 2 :

Recopiez le code de sécurité donné
Cochez I agree to the terms
Cliquez sur Get Code

Etape 3 :

Vous obtenez un code javascript
Cliquez sur Select Text
Copiez le code proposé. Il se présente ainsi (ne copiez pas celui-là, il est personnel à ce blog et ne fonctionnera pas sur le votre)

<script defer="defer" id="snap_preview_anywhere" type="text/javascript"
src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&amp;key=4cecac09aa16a00eed3e391b7440f837&amp;
sb=1&amp;domain=annak.over-blog.com/"></script>

Etape 4 :

Ils recommandent de le copier dans l'entête. Je l'ai fait dans le mode source d'un module Texte Libre, ça a fonctionné. Vous le copiez tel quel sans rien rajouter.

Vous pouvez-voir une petite bulle en face des liens à cliquer.

Avertissement :

• ce gadget peut ralentir le temps de chargement de votre page, pensez-y !
• ça devient rapidement fatigant de voir toutes ces fenêtres d'ouvrir :)

Faire un lien sur une adresse mail

Il y a plusieurs solutions possibles :

Vous ne désirez pas protéger votre adresse mail des robots spammeurs :

1/ vous réalisez votre lien sur un mot

Dans l'html, vous copiez avec votre propre adresse mail

Pour me contacter, <a href="mailto:annak_67@yahoo.fr">cliquez ici !</a>

et vous obtenez :

Pour me contacter, cliquez ici !

C'est la boîte mail installée par défaut sur le PC, de celui qui souhaite vous écrire un mail, qui va s'ouvrir.

2/ vous réalisez votre lien sur une image

Dans l'html, vous copiez avec votre propre adresse mail et votre propre image

<a href="mailto:annak_67@yahoo.fr?subject=Pour%20me%20contacter"><img alt="" src="http://idata.over-blog.com/0/37/17/67//gbicpt3.gif" /></a>

Et vous obtenez



Vous désirez que votre adresse mail ne soit pas visible par ces robots. Vous devez donc créer une image comme celle ci-dessus. Vous en trouverez chez NEXODYNE et FrançoisJAMART

Vos visiteurs devront eux-mêmes noter votre adresse et ouvrir leur boîte mail pour vous écrire.

Faire un lien sur une photo

La technique est généralement utilisée pour réaliser des menus en images.

En HTML, vous collez

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxANfELYWQNSTpoZf2edFD5Lsy0W93AyhAt5lz_P2_ZiVLLW5IZwuMdW7jPY9RegSBgTnSKH12Y5duQnVBb5kVUPdO_0oaitAAVvpl1hacXIonKqxr6ILaSM7je3VTTzMgOkHno_AsaY/s1600/oeuf2.jpg" /></a>

En rouge, l'adresse du lien
En vert, l'adresse de votre image

Si vous désirez que le lien s'ouvre dans un nouvel onglet de votre navigateur, vous rajoutez ce qui est en vert :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxANfELYWQNSTpoZf2edFD5Lsy0W93AyhAt5lz_P2_ZiVLLW5IZwuMdW7jPY9RegSBgTnSKH12Y5duQnVBb5kVUPdO_0oaitAAVvpl1hacXIonKqxr6ILaSM7je3VTTzMgOkHno_AsaY/s1600/oeuf2.jpg" /></a>

Afficher une infobulle sur un lien

Une infobulle est une information qui apparaît au survol d'un mot, d'une image ou d'un lien par la souris.

Ce n'est pas très difficile à réaliser.

Copiez le pavé suivant

<a href="URL DU LIEN" target="_blank" title="INFOBULLE DU LIEN">NOM DU LIEN</a>

Vous personnalisez ce qui est en rouge et le collez en HTML.

Ainsi :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank" title="Aide pour créer et personnaliser un blog">Les nouvelles ficelles d'Annak.</a>

devient

Les nouvelles ficelles d'Annak.

Faire un lien sur un mot

Si l'éditeur de l'administration de votre blog n'a pas la fonction Rajouter un lien, vous pouvez le créer en HTML en collant :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">Les nouvelles ficelles d'Anna K</a>

En rouge, l'adresse du lien
En bleu, le nom de ce lien

Si vous désirez que ce lien s'ouvre dans un autre onglet de votre navigateur, vous rajoutez ce qui est en vert :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank">>Les nouvelles ficelles d'Anna K</a>

Changer la couleur des liens au survol de la souris

Dans l'HTML du module d'entête, vous collez ce code et vos liens changeront de couleur au survol de la souris.

Vous pouvez tester en pointant votre souris sur ce lien : Les nouvelles ficelles d'Anna K.

<script type="text/javascript">
var couleur;
var b=0;var c=255;d=100;
var obj;
function on(e){
if(!obj){obj=window.Event ? e.target : event.srcElement};
couleur="rgb("+b+","+c+","+d+")";
if(b<=245){b+=10}
else if(b>245 && c>10){c-=10}
else if(d>0){d-=10}
obj.style.color=couleur;
un=setTimeout("on()",10)
}
function off(){
clearTimeout(un);
obj=false;
b=0;c=255;d=100;
this.style.color=''
}
var liens=document.links;
for(i=0;i<liens.length;i++){
liens[i].onmouseover=on;
liens[i].onmouseout=off;
}
</script>

Faire un retour vers l'accueil

En général, on fait ce lien dans l'entête du blog, afin qu'il soit présent sur tout le blog,

En HTML, vous collez

<a href="adresse principale du blog">ACCUEIL</a>

Par exemple :

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">ACCUEIL</a>

donne

ACCUEIL

Faire un lien vers un endroit précis d'une autre page

Cet article fait suite à Faire un lien vers un endroit précis de la même page

Nous allons donc utiliser la même ancre d'arrivée que dans l'article sus-cité.

1ère étape : dans la page d'arrivée à l'endroit exact

Dans l'HTML, j'implante une ancre en copiant ceci

<a name="AncreArrivée">Ancre d'Arrivée</a>

2ème étape : dans le lieu de départ

Dans l'HTML de la fin de ce présent article, je colle

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/2010/07/faire-un-lien-vers-un-endroit-precis-de.html#AncreArrivée">Vers l'Ancre d'Arrivée</a>

Notez que :

• ce qui est en bleu est l'adresse de l'article d'arrivée
• ce qui est en rouge, doit être identique dans les 2 formules
• ce qui est en vert apparaît à l'écran. Pour l'ancre d'arrivée, vous pouvez mettre un point au lieu de "Ancre d'Arrivée" afin que ce soit invisible

Faîtes le test, cliquez et vous arriverez au début de l'autre article

Vers l'Ancre d'Arrivée

Faire un lien vers un endroit précis de la même page

Ancre d'Arrivée

Ces liens-interpage, interblog- s'appellent des ancres. Elles sont essentiellement utilisées quand les articles sont longs pour naviguer tout leur long. La fonction Retour vers le haut en est une variante.

Imaginons : je suis tout en bas de cet article sur le blog et je veux pouvoir revenir rapidement tout en haut.

1ère étape : dans le lieu d'arrivée

Dans l'HTML tout en haut de l'article, j'implante une ancre en collant ceci

<a name="AncreArrivée">Ancre d'Arrivée</a>

2ème étape : dans le lieu de départ

Dans l'HTML tout en bas de l'article, je colle

<a href="#AncreArrivée">Aller vers l'ancre d'Arrivée</a>

Notez que :

1. ce qui est en rouge, doit être identique dans les 2 formules
2. ce qui est en bleu apparaît à l'écran. Pour l'ancre d'arrivée, vous pouvez mettre un point au lieu de "Ancre d'Arrivée" afin que ce soit invisible
   

Testez : descendez en bas de cette page et cliquez sur "Allez vers l'ancre d'arrivée".

Ces ancres peuvent se mettre à chaque étape de votre article, pas seulement en haut, là est tout leur intérêt.







































































































































































































Aller vers l'ancre d'Arrivée

Faire un retour vers le haut de page fixe en bas d'écran

Il se réalise en CSS et HTML. Mais, malheureusement, cet effet que je trouve très joli, n'est visible que sous Fire Fox.

Un exemple en image pour ceux qui naviguent sous Internet Explorer : regardez en bas à droite



Première étape : dans le CSS

Vous collez

#gototop{position:fixed;bottom:5px;*/ right:2px;z-index:300;width:20px; height:20px;
background:transparent url(http://nsm01.casimages.com/img/2008/02/26//08022607021262651763309.gif) no-repeat center ;font-size: 0px;display:block;_display:none;text-indent:-300px;overflow:hidden;outline:none;}

En rouge, la position de l'image sur l'écran :

• le pied (bottom) est à 5px
  
• la droite (right) est à 2px
  

En bleu, les dimensions de l'image

• largeur (width) : 20px
  
• hauteur (height) : 20px
  

En vert : l'adresse de l'image. SI celle là vous convient, elle est hébergée, vous pouvez vous en servir

Seconde étape : en HTML d'un module

Vous collez

<div id="gototop"><a id="gototop" name="gototop" title="Go to Top" href="#">top</a></div>

Lorsque la page a fini de charger, vous pouvez tester

top

Faire un retour vers le haut de page avec un double-clic

L'intérêt de ce script est que le retour en haut de page peut se faire de n'importe où dans la page. Pas besoin de chercher le bouton "haut de page" qui est généralement tout en bas ou de poser des
ancres à différents niveaux.

Dans l'HTML de l'entête, collez le pavé suivant :

<SCRIPT language=JavaScript1.2>
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</SCRIPT>

Pensez à informer vos visiteurs de cette fonction. Et testez !

Faire un retour vers le haut de page

La première partie du code se place en haut de page. Il se colle en HTML, une fois pour toutes, dans l'entête :

<a name="top"></a>

La seconde partie, le lien allez vers le haut se positionne :

• en milieu de hauteur si la page est haute
  
• dans le pied de page de votre blog
  

Il permet au visiteur de surfer plus rapidement sur votre blog. Et paradoxalement, plus la navigation sera aisée et rapide, plus longtemps votre visiteur restera sur votre blog.

En html, vous collez

<a href="#top">ALLEZ VERS LE HAUT</a>

Exemple :  ALLEZ VERS LE HAUT