Mettre des images avec un lien, des liens seuls,... dans sa page d'accueil
Mettre une image "new" par exemple, avec un lien dans sa page d'accueil :
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.
- Répérez ce code :
<div class="title">Caté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é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 :
Comme ici c'est une capture d'écran les logos "nouveau" ne clignotent pas bien sûr !
Voilà, c'est pas plus compliqué !
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é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é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 :
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é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>
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é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é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é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 :
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 !
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>
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 :-/
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">
Pour la colonne de droite, si vous voulez les mettre tout endessous, repérez le code </div></div>
<div class="clear"> </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"> </div></div>
</body></html>
Les images du décor sont une création de
©Joëlla