Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
L'universDesAstuces
14 juin 2007

Mettre des images avec un lien, des liens seuls,... dans sa page d'accueil

barre_moyenne

Mettre une image "new" par exemple, avec un lien dans sa page d'accueil :

barre_moyenne

Cliquez sur les images pour les voir en grand

1.
Nous allons insérer une image "NOUVEAU" avec un lien dans la colonne de gauche sous "catégories"

- Allez d'abord dans Apparence/Page d'accueil.

0001

0002

barre_moyenne

- Répérez ce code :

<div class="title">Cat&eacute;gories</div>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

- Mettez le code ci-dessous après la partie que j'ai mis en jaune et avant la partie qui est en rose et complétez à la place de mes textes en rouge :

<p align="left"><a href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">
<img src="ICI METTEZ LE LIEN DE VOTRE IMAGE" border="0" /></a>

Voilà ce que vous devrez avoir :

<div class="title">Cat&eacute;gories</div>
<p align="left"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0" /></a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

Remarque : Au début de mon code vous voyez <p align="left"> ce qui alligne à gauche. Si vous désirez que l'image soit centrée mettez <p align="center"> et si vous la voulez à droite, mettez <p align="right">

Voilà le résultat avec les 3 façons :

0003

Comme ici c'est une capture d'écran les logos "nouveau" ne clignotent pas bien sûr !

Voilà, c'est pas plus compliqué !

barre_moyenne

Si vous désirez mettre une image "new" par exemple et un titre à sa droite, mettez le code suivant :

avec le titre à sa droite :

<p align="left">
<img src="ICI METTEZ LE LIEN DE VOTRE IMAGE" border="0" /></a>
<A href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">ICI VOTRE TEXTE</a>

et ici le titre à sa gauche :

<p align="left">
<A href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">ICI VOTRE TEXTE</a>
<img src="ICI METTEZ LE LIEN DE VOTRE IMAGE" border="0" /></a>

Vous devrez avoir ceci :

<div class="title">Cat&eacute;gories</div>
<p align="left">
<img src="https://storage.canalblog.com/95/92/144645/11411264.gif" border="0" /></a>
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Venez voir !</a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

OU

<div class="title">Cat&eacute;gories</div>
<p align="left">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Venez voir !</a>
<img src="https://storage.canalblog.com/95/92/144645/11411264.gif" border="0" /></a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

Voilà le résultat avec les 2 façons :

0004

Comme ici c'est une capture d'écran les logos "new" ne clignotent pas bien sûr !

REMARQUE : Pour toute image ou lien que vous voudrez mettre les uns après les autres, par exemple 3 l'un endessous de l'autre, mettez à chaque fois <br> entre les 2.
En langage HTML <br> veut dire "à la ligne" et plus vous en mettez, plus il y aura d'espaces.

Exemple avec 3 codes :

<div class="title">Cat&eacute;gories</div>
<p align="left">
<img src="https://storage.canalblog.com/95/92/144645/11411264.gif" border="0" /></a>
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Venez voir !</a>
<br>
<p align="left">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Venez voir !</a>
<img src="https://storage.canalblog.com/95/92/144645/11411264.gif" border="0" /></a>
<br>
<p align="left">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Venez voir !</a>
<img src="https://storage.canalblog.com/95/92/144645/11411264.gif" border="0" /></a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

barre_moyenne

Ici on va mettre un texte "Mes nouveautés" par exemple, avec un lien et sans aucune image, mettez le code suivant :

Le texte alligné à gauche :

<p align="left"><A href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">ICI VOTRE TEXTE</a>

Le texte alligné à droite :

<p align="right"><A href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">ICI VOTRE TEXTE</a>

ou le texte alligné au centre :

<p align="center"><A href="METTEZ ICI LE LIEN DE VOTRE MESSAGE" target="_blank">ICI VOTRE TEXTE</a>

Vous devrez avoir ceci pour left :

<div class="title">Cat&eacute;gories</div>
<p align="left">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Nouveautés du blog</a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

OU pour right

<div class="title">Cat&eacute;gories</div>
<p align="right">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Nouveautés du blog</a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

OU pour center :

<div class="title">Cat&eacute;gories</div>
<p align="center">
<A href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">Nouveautés du blog</a>
<ul>
  <CBCategories>
  <li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
  </CBCategories>
</ul>

Voilà le résultat avec les 3 façons :

0005

barre_moyenne

Pour la colonne de gauche, si vous voulez les mettre tout endessous, repérez le code </div></div>
<div id="content">
<div class="blogbody"> et mettez votre/vos liens AVANT ce code :

Exemple :

<p align="left"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0"/></a>
</div></div>
<div id="content">
<div class="blogbody">

REMARQUE : Pour toute image ou lien que vous voudrez mettre les uns après les autres, par exemple 3 l'un endessous de l'autre, mettez à chaque fois <br> entre les 2.
En langage HTML <br> veut dire "à la ligne" et plus vous en mettez, plus il y aura d'espaces.

Voilà, une fois que vous avez fait ce que vous voulez, vous publiez votre message, facile non !

barre_moyenne

Ceci c'était pour dans la colonne de gauche, le principe est pareil pour la colonne du centre ou de droite, simplement il faudra placer les codes autre part !

Pour la colonne du centre, si vous voulez les mettre audessus, repérez le code </div></div><div id="content">, et mettez votre/vos liens après ce code :

Exemple :

</div></div>
<div id="content">
<p align="center"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0"/></a>
<div class="blogbody">
<Blogger>

barre_moyenne

Et si vous voulez les mettre tout en bas, repérez le code </Blogger> <$CBControlNavLinks$> et mettez votre/vos liens après ce code :

Exemple :

</Blogger>         
<$CBControlNavLinks$>
<p align="left"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0"/></a>
</div></div>
<div id="rightbar">
<div class="navlinks">

REMARQUE :  Ici le lien se mettra toujours sur sa gauche, je n'ai pas encore trouvé le moyen de le mettre au centre ou à droite :-/

barre_moyenne

Pour la colonne de droite, si vous voulez les mettre audessus, repérez le code <$CBControlNavLinks$></div></div><div id="rightbar"> et mettez votre/vos liens après ce code :

Exemple :

<$CBControlNavLinks$>
</div></div>
<div id="rightbar">
<p align="left"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0"/></a>
<div class="navlinks">

barre_moyenne

Pour la colonne de droite, si vous voulez les mettre tout endessous, repérez le code </div></div>
<div class="clear">&nbsp;</div></div>
</body></html> et mettez votre/vos liens AVANT ce code :

Exemple :

<p align="left"><a href="http://astucesjoella.canalblog.com/archives/accueil___5__nouveautes/index.html" target="_blank">
<img src="https://storage.canalblog.com/34/87/144645/8201990.gif" border="0"/></a>
</div></div>
<div class="clear">&nbsp;</div></div>
</body></html>

barre_moyenne
Les images du décor sont une création de
©Joëlla

barre_moyenne

Publicité
Publicité
Commentaires
L'universDesAstuces
Publicité
Archives
Publicité